/* =================================================================
   ENHANCEMENTS — v2.1 additions layered on top of the existing
   design system. Loaded last so rules here take precedence for the
   handful of components/fixes below. No color/type tokens are
   redefined — everything reuses the existing custom properties.
   ================================================================= */

/* ---------------------------------------------------------------
   Scroll-anchor fix — category jumps (products.html?category=x)
   were landing partly under the sticky navbar + filter bar.
   --------------------------------------------------------------- */
.cat-divider{ scroll-margin-top: calc(var(--nav-h) + 92px); }
[id]{ scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ---------------------------------------------------------------
   Floating quick-contact (call / WhatsApp)
   --------------------------------------------------------------- */
.quick-contact{
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 950;
  display:flex; flex-direction:column; align-items:flex-end; gap:0.7rem;
}
.quick-contact__menu{
  display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.1rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(10px) scale(0.94); transform-origin: bottom right;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.quick-contact.open .quick-contact__menu{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); }
.quick-contact__item{
  display:flex; align-items:center; gap:0.6rem;
  background:#fff; color: var(--ink);
  padding:0.7rem 1.15rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); border:1px solid var(--border);
  font-family: var(--f-display); font-weight:700; font-size:0.86rem; white-space:nowrap;
  transition: transform 0.25s var(--ease), border-color 0.25s ease;
}
.quick-contact__item svg{ width:18px; height:18px; flex-shrink:0; }
.quick-contact__item--whatsapp svg{ color:#22C55E; }
.quick-contact__item--call svg{ color: var(--accent); }
.quick-contact__item:hover{ transform: translateX(-3px); border-color: var(--border-strong); }
.quick-contact__toggle{
  width:56px; height:56px; border-radius:50%;
  background: var(--grad-amber); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -4px 8px rgba(0,0,0,0.14); flex-shrink:0;
  transition: transform 0.3s var(--ease), background 0.3s ease, box-shadow 0.3s ease;
}
.quick-contact__toggle svg{ width:23px; height:23px; transition: transform 0.3s var(--ease); }
.quick-contact.open .quick-contact__toggle{ background: var(--grad-navy); }
.quick-contact.open .quick-contact__toggle svg{ transform: rotate(135deg); }
.quick-contact__toggle:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(234,88,12,0.38), inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -4px 8px rgba(0,0,0,0.16); }
.quick-contact__label{
  position:absolute; right: 68px; top:50%; transform: translateY(-50%) translateX(6px);
  background: var(--ink); color:#fff; font-size:0.76rem; font-weight:600;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); white-space:nowrap;
  opacity:0; visibility:hidden; transition: all 0.25s ease; pointer-events:none;
}
.quick-contact:not(.open):hover .quick-contact__label{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0); }
@media (max-width:600px){
  .quick-contact{ right:1rem; bottom:1rem; }
  .quick-contact__toggle{ width:50px; height:50px; }
  .quick-contact__label{ display:none; }
}

/* ---------------------------------------------------------------
   Back to top
   --------------------------------------------------------------- */
.back-to-top{
  position: fixed; left:1.25rem; bottom:1.25rem; z-index:940;
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(180deg, rgba(15,23,42,0.42), rgba(15,23,42,0.58)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -6px 12px rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(255,255,255,0.16);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.3s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--grad-amber); transform: translateY(-3px); }
/* liquid-glass.js drives the real backdrop-filter (refraction on Chromium,
   frosted blur fallback elsewhere) on top of the gradient/shadow dressing above. */
.back-to-top svg{ width:18px; height:18px; }
@media (max-width:600px){ .back-to-top{ left:1rem; bottom:1rem; width:42px; height:42px; } }

/* ---------------------------------------------------------------
   Avatar cluster (trust strip — family leadership)
   --------------------------------------------------------------- */
.avatar-cluster{ display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.avatar-cluster__stack{ display:flex; flex-shrink:0; }
.avatar-cluster__item{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--ink), var(--navy-soft));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:800; font-size:0.76rem;
  border:2.5px solid var(--surface);
  margin-left:-11px;
}
.avatar-cluster__item:first-child{ margin-left:0; }
.avatar-cluster__text{ font-size:0.86rem; color: var(--muted); line-height:1.4; }
.avatar-cluster__text strong{ display:block; color: var(--ink); font-family: var(--f-display); font-size:0.92rem; font-weight:700; }
.section--dark .avatar-cluster__text{ color: var(--on-navy-muted); }
.section--dark .avatar-cluster__text strong{ color:#fff; }
.section--dark .avatar-cluster__item{ border-color: var(--navy-deep); }

/* ---------------------------------------------------------------
   Accordion (FAQ)
   --------------------------------------------------------------- */
.accordion{ border-top:1px solid var(--border); }
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-item__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 0.2rem; text-align:left; background:none;
  font-family: var(--f-display); font-weight:700; font-size:1rem; color: var(--ink);
  transition: color 0.25s ease;
}
.accordion-item__q:hover{ color: var(--accent-dark); }
.accordion-item__q-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background: var(--grad-amber); color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(234,88,12,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
}
.accordion-item__q-icon svg{ width:16px; height:16px; transition: transform 0.3s var(--ease); }
.accordion-item.open .accordion-item__q-icon svg{ transform: rotate(45deg); }
.accordion-item__a{ max-height:0; overflow:hidden; transition: max-height 0.4s var(--ease); }
.accordion-item__a-inner{ padding: 0 0.2rem 1.4rem; color: var(--muted); font-size:0.94rem; line-height:1.75; max-width:760px; }
.accordion-item.open .accordion-item__a{ max-height: 260px; }

/* ---------------------------------------------------------------
   Entity contact card (contact.html — replaces generic head-office block)
   --------------------------------------------------------------- */
.entity-contact-grid{ display:flex; flex-direction:column; gap:1rem; }
.entity-contact-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease);
}
.entity-contact-card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.entity-contact-card:hover .entity-contact-card__icon{ box-shadow: var(--shadow-icon-hover); }
.entity-contact-card__head{ display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:0.9rem; }
.entity-contact-card__icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background: var(--grad-amber); color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-icon);
  transition: box-shadow 0.3s var(--ease);
}
.entity-contact-card__icon svg{ width:19px; height:19px; }
.entity-contact-card__head h4{ font-size:1rem; margin-bottom:0.2rem; }
.entity-contact-card__head span{ font-size:0.78rem; color: var(--muted); }
.entity-contact-card__addr{ font-size:0.9rem; color: var(--muted); line-height:1.65; margin: 0 0 1rem; padding-left: calc(40px + 0.75rem); }
.entity-contact-card__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 1.4rem; padding-left: calc(40px + 0.75rem); }
.entity-contact-card__phones{ display:flex; flex-direction:column; gap:0.2rem; }
.entity-contact-card__phones a{ font-size:0.9rem; font-weight:600; color: var(--ink-soft); transition: color 0.3s ease; }
.entity-contact-card__phones a:hover{ color: var(--accent); }
.entity-contact-card__directions{
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family: var(--f-display); font-weight:700; font-size:0.82rem; color: var(--accent-dark);
  margin-left:auto; white-space:nowrap;
}
.entity-contact-card__directions svg{ width:13px; height:13px; transition: transform 0.3s ease; }
.entity-contact-card__directions:hover svg{ transform: translate(2px,-2px); }
@media (max-width:480px){
  .entity-contact-card__addr, .entity-contact-card__foot{ padding-left:0; }
  .entity-contact-card__foot{ margin-top:0.2rem; }
  .entity-contact-card__directions{ margin-left:0; }
}

/* ---------------------------------------------------------------
   Map tabs (contact.html — switch between location clusters)
   --------------------------------------------------------------- */
.map-tabs{ display:flex; gap:0.5rem; margin-bottom:1.4rem; justify-content:center; flex-wrap:wrap; }
.map-tab{
  font-family: var(--f-display); font-weight:600; font-size:0.86rem;
  padding:0.6rem 1.25rem; border-radius: var(--radius-pill);
  border:1px solid var(--border-strong); background: var(--surface); color: var(--ink-soft);
  transition: all 0.3s ease;
}
.map-tab:hover{ border-color: var(--ink); color: var(--ink); }
.map-tab.active{ background: var(--ink); border-color: var(--ink); color:#fff; }
.map-panel{ display:none; }
.map-panel.active{ display:block; }

/* ---------------------------------------------------------------
   Subtle technical texture behind dark sections (very low contrast)
   --------------------------------------------------------------- */
.section--dark{ overflow:hidden; }
.section--dark::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, black 0%, transparent 78%);
  pointer-events:none;
}
.section--dark > .container{ position:relative; z-index:1; }

/* ---------------------------------------------------------------
   Image frame micro-interaction (About teaser / process images)
   --------------------------------------------------------------- */
.img-frame{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); position:relative; }
.img-frame img{ transition: transform 0.7s var(--ease); }
.img-frame:hover img{ transform: scale(1.045); }

/* ---------------------------------------------------------------
   Process flow graphic (homepage — original vector, no stock photo)
   --------------------------------------------------------------- */
.process-flow{ background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.25rem; }
.process-flow svg{ width:100%; height:auto; display:block; }

/* ---------------------------------------------------------------
   Mobile: horizontally-scrolling category chip row
   --------------------------------------------------------------- */
.filter-chip-row{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
@media (max-width:760px){
  .filter-bar__inner{ flex-direction:column; align-items:stretch; gap:0.75rem; }
  .filter-chip-row{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin: 0 -1.25rem; padding: 0 1.25rem 2px;
  }
  .filter-chip-row::-webkit-scrollbar{ display:none; }
  .filter-chip{ flex-shrink:0; }
  .filter-search{ flex-basis:auto; max-width:none; margin-left:0; width:100%; }
}

/* ---------------------------------------------------------------
   Category icon inside catalog dividers (quick visual scan aid)
   --------------------------------------------------------------- */
.cat-divider__icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; align-self:center;
  background: var(--grad-amber); color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-icon);
}
.cat-divider__icon svg{ width:17px; height:17px; }

/* ---------------------------------------------------------------
   Lightweight utility: eyebrow-style small print under form / cards
   --------------------------------------------------------------- */
.micro-note{ display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color: var(--muted); }
.micro-note svg{ width:15px; height:15px; color: var(--success); flex-shrink:0; }