/* ITL theme — Afro Ocean layout/styling patterns recoloured to the ITL logo blues.
   Loaded last on every page so it overrides style.css / product.css. */
:root {
  --itl-navy: #0a1f5c;
  --itl-blue: #1338a8;
  --itl-sky: #2f6fe0;
  --itl-ink: #0f1b33;
  --itl-muted: #5b6785;
  --itl-border: #e1e7f2;
  --itl-soft: #f4f7fc;
  --itl-gradient: linear-gradient(135deg, #0a1f5c 0%, #1338a8 55%, #2f6fe0 100%);
  --itl-gradient-hero: linear-gradient(135deg, #071640 0%, #0f2e86 55%, #2a63d1 100%);
  --itl-shadow-card: 0 8px 28px -10px rgba(10, 31, 92, .18);
  --itl-shadow-elegant: 0 20px 50px -20px rgba(10, 31, 92, .35);
  --itl-radius: 10px;
  --itl-surface: #fff;
  --itl-on-dark: #fff;
  --itl-on-dark-muted: #e1e7f2;
  --itl-dark-glass: rgba(7,22,64,.65);
  --itl-dark-line: rgba(255,255,255,.25);
  --itl-hero-overlay: linear-gradient(90deg, rgba(7,22,64,.94), rgba(7,22,64,.74) 48%, rgba(7,22,64,.12));
  --itl-whatsapp: #168548;
  /* remap legacy palette */
  --bittersweet: var(--itl-blue);
  --salmon: var(--itl-sky);
  --rich-black-fogra-29: var(--itl-ink);
  --onyx: var(--itl-muted);
  --cultured: var(--itl-soft);
  --ff-josefin-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ff-roboto: 'Inter', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--ff-roboto); color: var(--itl-ink); background: #fff; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .section-title, .card-title, .hero-title, .banner-title {
  font-family: var(--ff-josefin-sans); letter-spacing: -0.01em; color: var(--itl-ink);
}
a { transition: color .25s ease; }

/* ---------- Header: glass, sticky, uppercase tracked nav ---------- */
.header {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--itl-border);
  transition: all .5s ease-out;
}
.header.active {
  top: 12px; left: 12px; right: 12px; width: auto;
  border: 1px solid var(--itl-border); border-radius: 16px;
  box-shadow: var(--itl-shadow-elegant);
}
.header .container { padding-block: 16px; }
.navbar-link {
  font-family: var(--ff-roboto); font-size: 12.5px !important; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(15, 27, 51, .72);
  position: relative;
}
.navbar-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--itl-gradient); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease; border-radius: 2px;
}
.navbar-link:is(:hover, :focus) { color: var(--itl-navy); }
.navbar-link:is(:hover, :focus)::after { transform: scaleX(1); }
.nav-open-btn, .nav-close-btn { background: var(--itl-gradient); color: #fff; border-radius: 8px; }
.dropdown-list { border-radius: 12px; border: 1px solid var(--itl-border); box-shadow: var(--itl-shadow-elegant); }
.dropdown-link:hover { color: var(--itl-blue); background: var(--itl-soft); }

/* ---------- Buttons: gradient, lift on hover ---------- */
.btn, .btn-primary, .cart-form__add-btn, .filter-btn.active, .go-top-btn {
  border-radius: var(--itl-radius) !important;
}
.btn-primary, .cart-form__add-btn, .card-action-btn:hover, .go-top-btn {
  background: var(--itl-gradient) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: var(--itl-shadow-card); transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover, .cart-form__add-btn:hover, .go-top-btn:hover {
  transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(47, 111, 224, .55);
}
.btn-secondary { background: #fff; color: var(--itl-navy); border: 1px solid var(--itl-border); }
.btn-secondary:is(:hover, :focus) { background: var(--itl-soft); color: var(--itl-blue); }
.btn-link { color: var(--itl-blue); border-color: var(--itl-blue); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7, 22, 64, .55), rgba(7, 22, 64, 0) 70%);
}
.hero-title, .hero-title strong { color: #fff; font-weight: 800; }
.hero-text { color: rgba(255, 255, 255, .85); }

/* ---------- Section headings: eyebrow + bold display ---------- */
.section-title { font-weight: 800; color: var(--itl-ink); }
.section-title::after {
  content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0;
  border-radius: 3px; background: var(--itl-gradient);
}

/* ---------- Filter pills ---------- */
.filter-btn {
  border: 1px solid var(--itl-border); border-radius: 999px !important;
  color: var(--itl-muted); background: #fff; transition: all .25s ease;
}
.filter-btn:hover { border-color: var(--itl-sky); color: var(--itl-blue); }
.filter-btn.active { background: var(--itl-gradient); color: #fff; border-color: transparent; }

/* ---------- Product cards: card-premium + hover-lift ---------- */
.product-card {
  background: #fff; border: 1px solid var(--itl-border); border-radius: var(--itl-radius);
  overflow: hidden; height: 100%;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--itl-shadow-elegant); border-color: #c9d5ee; }
.product-card .card-banner { background: var(--itl-soft); border-radius: 0; }
.product-card .image-contain { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.product-card .card-content { border-top: 1px solid var(--itl-border); padding: 18px 20px; }
.product-card .card-title > a { color: var(--itl-ink); font-weight: 600; }
.product-card:hover .card-title > a, .product-card .card-title > a:is(:hover, :focus) { color: var(--itl-blue); }
.card-cat-link { color: var(--itl-sky); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; }
.card-badge { background: var(--itl-gradient); border-radius: 6px; }
.card-action-btn { border-radius: 8px; color: var(--itl-navy); box-shadow: var(--itl-shadow-card); }
.card-action-tooltip { background: var(--itl-navy); border-radius: 6px; }

/* ---------- Collection / CTA cards ---------- */
.collection-card, .cta-card { border-radius: 14px; overflow: hidden; box-shadow: var(--itl-shadow-card); transition: transform .35s ease, box-shadow .35s ease; }
.collection-card:hover, .cta-card:hover { transform: translateY(-4px); box-shadow: var(--itl-shadow-elegant); }

/* ---------- Product detail ---------- */
.product .company-name { color: var(--itl-sky); text-transform: uppercase; letter-spacing: .22em; font-size: 1.3rem; font-weight: 700; }
.product .product__title { font-family: var(--ff-josefin-sans); font-weight: 800; color: var(--itl-ink); }
.product .product__description { color: var(--itl-muted); line-height: 1.75; }
.product .image-box { border: 1px solid var(--itl-border); border-radius: 14px; background: var(--itl-soft); overflow: hidden; }
.discount-price__value a { color: var(--itl-blue); }
.discount-price__discount { background: var(--itl-soft) !important; color: var(--itl-navy) !important; border-radius: 6px; }

/* ---------- Footer: dark navy ---------- */
.footer-top, .footer-bottom { background: #071640 !important; }
.footer, .footer-top, .footer-bottom, .footer p, .footer address { color: rgba(255, 255, 255, .72); }
.footer-list-title, .footer h2, .footer h3, .footer h4 {
  color: #fff !important; text-transform: uppercase; letter-spacing: .2em; font-size: 12px !important; font-weight: 600;
}
.footer-list-title::after { background: var(--itl-gradient) !important; }
.footer-link, .footer a { color: rgba(255, 255, 255, .72); }
.footer-link:hover, .footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-brand .logo img { background: #fff; border-radius: 10px; padding: 6px 10px; }
.footer input { border-radius: 8px; }

/* ---------- Forms ---------- */
input, textarea, select { border-radius: 8px; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(47, 111, 224, .45); outline-offset: 1px; }

/* ---------- Reveal-on-load animation ---------- */
@keyframes itl-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
main > *, article.product > section { animation: itl-fade-up .6s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* footer fixes */
.footer table, .footer td, .footer th, .footer dt, .footer dd, .footer span, .footer li { color: rgba(255, 255, 255, .72) !important; }
.footer .social-link, .footer [class*="social"] a { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border-radius: 8px; }
.footer .social-link:hover, .footer [class*="social"] a:hover { background: var(--itl-gradient) !important; }
.cart-form__add-btn { padding-inline: 22px !important; font-size: 1.4rem !important; }

/* Shared announcement and persistent contact options. */
body { padding-block-start: 126px; }
.header { top:36px; z-index:50; }
.header.active { top:36px; left:0; right:0; width:100%; border-radius:0; }
.itl-announcement { position:fixed; top:0; inset-inline:0; height:36px; overflow:hidden; z-index:51; background:var(--itl-navy); color:var(--itl-on-dark); display:flex; align-items:center; }
.itl-announcement-track { display:flex; width:max-content; animation:itl-ticker 45s linear infinite; }
.itl-announcement-group { display:flex; align-items:center; gap:40px; padding-right:40px; white-space:nowrap; font-size:11px; font-weight:600; }
.itl-announcement-group span { display:flex; gap:8px; align-items:center; }
.itl-announcement:hover .itl-announcement-track { animation-play-state:paused; }
@keyframes itl-ticker { to { transform:translateX(-50%); } }
.itl-sticky-contact { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:4px; padding:6px; border:1px solid var(--itl-border); background:var(--itl-surface); box-shadow:var(--itl-shadow-elegant); border-radius:999px; width:max-content; max-width:calc(100% - 24px); }
.itl-sticky-contact a { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; color:var(--itl-ink); font-size:13px; font-weight:600; border-radius:999px; }
.itl-sticky-contact a:hover { background:var(--itl-soft); }
.itl-sticky-contact a:last-child { background:var(--itl-blue); color:var(--itl-on-dark); }
.itl-sticky-contact ion-icon { font-size:20px; }
.itl-sticky-contact .whatsapp-icon { color:var(--itl-whatsapp); }
.whatsapp-float { display:none !important; }
.go-top-btn { bottom:174px !important; right:24px; z-index:45; }
.footer-bottom { padding-bottom:100px; }
.navbar-item:focus-within .dropdown-list { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.header .logo img { object-fit:contain; }
@media(min-width:1200px) { .header .navbar-list { gap:20px; } }
@media(max-width:767px) { .itl-sticky-contact { bottom:10px; } .itl-sticky-contact a { padding:12px; font-size:11px; gap:5px; } .header .container { padding-block:14px; } body { padding-block-start:114px; } .itl-sticky-contact span { display:block; } }
@media(prefers-reduced-motion:reduce) { .itl-announcement-track { animation:none; } .itl-announcement { overflow-x:auto; } }

/* Shared catalog geometry: photo orientation never determines card size. */
.product-list { align-items:stretch; grid-auto-rows:1fr; }
.product-list > li, .has-scrollbar > li:has(.product-card) { min-width:0; }
.product-card { display:flex; flex-direction:column; width:100%; }
.product-card .card-banner { height:280px; flex-shrink:0; }
.product-card .card-banner img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; padding:16px; box-sizing:border-box; }
.product-card .card-content { flex:1; display:flex; flex-direction:column; justify-content:flex-start; min-width:0; }
.product-card .card-cat { min-height:32px; margin-bottom:12px; overflow-wrap:anywhere; }
.product-card .card-title { line-height:1.45; overflow-wrap:anywhere; margin-bottom:0; }
.product-card .card-action-list { right:12px; }
.product-card:focus-within .card-action-list { opacity:1; right:12px; }
@media(hover:none) { .product-card .card-action-list { opacity:1; } }

/* Keep the existing detail layout, with equal image frames and a full-width quote action. */
article.product { width:min(1200px,100%); max-width:1200px; padding:40px 24px 56px; gap:40px; align-items:start; }
.product .product__slider, .product .product__content { width:100%; min-width:0; max-width:none; padding:0; margin:0; align-self:start; justify-self:stretch; }
.product .image-box { width:100%; aspect-ratio:1; max-width:540px; border-radius:var(--itl-radius); }
.product .image-box__src { width:100%; height:100%; max-width:none; margin:0; object-fit:contain; padding:24px; box-sizing:border-box; }
.product .company-name { margin:0 0 12px; letter-spacing:0; }
.product .product__title { margin:0; line-height:1.35; overflow-wrap:anywhere; }
.product .product__description { font-size:15px; line-height:1.8; margin:20px 0 24px; overflow-wrap:anywhere; }
.product .product__price { align-items:flex-start; }
.product .discount-price { justify-content:flex-start; gap:12px; }
.product .discount-price__discount { margin:0; }
.product .discount-price__value { width:100%; }
.product .discount-price { width:100%; }
.product .itl-product-description-link { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:14px 20px; box-sizing:border-box; border:1px solid var(--itl-blue); border-radius:var(--itl-radius); background:var(--itl-soft); color:var(--itl-blue); font-size:15px; font-weight:700; line-height:1.4; }
.product .itl-product-description-link ion-icon { font-size:22px; flex-shrink:0; }
.product .itl-product-description-link:hover { background:var(--itl-blue); color:var(--itl-on-dark); }
.product .itl-product-description-link:focus-visible { outline:3px solid var(--itl-sky); outline-offset:4px; }
.product .product__description { scroll-margin-top:150px; }
.product .cart-form { display:flex; flex-direction:column; margin-top:24px; width:100%; }
.product .cart-form > a { display:block; width:100%; }
.product .cart-form__add-btn { width:100%; min-height:52px; margin:0; padding:14px 22px; align-items:center; gap:12px; line-height:1.4; font-size:15px !important; }
.product .cart-form__add-btn .icon-cart { margin:0; flex-shrink:0; }
@media(max-width:991px) { article.product { display:grid; grid-template-columns:minmax(0,1fr); margin-inline:auto; max-width:680px; gap:28px; } }
@media(max-width:574px) { .product-card .card-banner { height:240px; } article.product { padding:24px 20px 40px; } }

/* One shared WhatsApp logo, above the persistent contact bar on narrow screens. */
.itl-whatsapp-float { position:fixed; right:1rem; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:50; }
@media(min-width:768px) { .itl-whatsapp-float { right:1.5rem; bottom:1.5rem; } }
.itl-whatsapp-btn { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#22c55e; color:#fff; box-shadow:0 8px 24px rgba(34,197,94,.45); transition:transform .3s ease, box-shadow .3s ease; }
.itl-whatsapp-btn svg { width:24px; height:24px; }
.itl-whatsapp-btn:hover { transform:scale(1.1); box-shadow:0 12px 32px rgba(34,197,94,.55); color:#fff; }
.itl-whatsapp-btn:focus-visible, .product .cart-form__add-btn:focus-visible { outline:3px solid var(--itl-sky); outline-offset:4px; }
.itl-whatsapp-ping { position:absolute; inset:0; border-radius:50%; background:#22c55e; opacity:.25; animation:itl-whatsapp-ping 1.5s cubic-bezier(0,0,.2,1) infinite; pointer-events:none; }
@keyframes itl-whatsapp-ping { 75%,100% { transform:scale(1.8); opacity:0; } }
.itl-whatsapp-tip { display:none; }
@media(min-width:768px) {
  .itl-whatsapp-btn { width:56px; height:56px; }
  .itl-whatsapp-btn svg { width:28px; height:28px; }
  .itl-whatsapp-tip { display:block; position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); padding:8px 14px; border:1px solid var(--itl-border); border-radius:10px; background:var(--itl-surface); color:var(--itl-ink); font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 6px 18px rgba(2,12,46,.12); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; pointer-events:none; }
  .itl-whatsapp-float:hover .itl-whatsapp-tip, .itl-whatsapp-float:focus-within .itl-whatsapp-tip { opacity:1; visibility:visible; }
}
@media(max-width:767px) { .go-top-btn { right:20px; bottom:156px !important; } }