/* AGIROSIS Media Header + Viewer styles
   Breakpoint: 720px
*/

:root{
      --agirosis-red:#ed1d24;
      --agirosis-text:#111827;
    

      /* Button system (Ecwid-like proportions, but independent) */
      --ag-btn-font-size: 14px;          /* set to 14px if you want "small" */
      --ag-btn-height-scale: 2.5;        /* height = font-size * scale */
      --ag-btn-line-height: 1.15;        /* unitless */
      --ag-btn-min-width: 100px;
      --ag-btn-width: 170px;             /* wider */

    }

    html, body{ margin:0; padding:0; height:100%; }
    body{ min-height: 100vh; overflow: hidden; display:flex; flex-direction:column; }

    /* =========================================================
       AGIROSIS Media Header (self-contained, no Ecwid dependencies)
       Requirement: bottom line 4px solid #ed1d24 !important
       ========================================================= */

    .ag-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #fff;
      border-bottom: 4px solid #ed1d24 !important;
    }

    .ag-header__wrap{
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 12px 40px;
      box-sizing: border-box;
    }

    .ag-header__inner{ display:block; }

    .ag-header__row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
    }

    .ag-header__left,
    .ag-header__right{
      display:flex;
      align-items:center;
      min-width: 0;
    }

    .ag-header__logo-inner{
      display:flex;
      align-items:center;
      text-decoration:none;
      color: inherit;
    }

    .ag-header__logo-image,
    .ag-header__logo-image-inner{
      display:flex;
      align-items:center;
    }

    /* Picture helper classes (purely presentational) */
    .ag-picture{ display:inline-flex; align-items:center; }
    .ag-picture--inline{ display:inline-flex; }
    .ag-picture--full{ display:inline-flex; }

    .ag-header__logo-img{
      height: 50px;
      width: auto;
      display:block;
    }

    
    /* CTA buttons (right side) */
    .ag-header__cta-wrap{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 14px;
      flex-wrap: nowrap;
    }

    /* Base button: independent button system (Ecwid-like proportions) */
    .ag-header__cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;

      /* sizing */
      min-width: var(--ag-btn-min-width);
      width: var(--ag-btn-width);
      height: calc(var(--ag-btn-font-size) * var(--ag-btn-height-scale));
      padding: 0;
      box-sizing: border-box;

      /* typography */
      font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      font-size: var(--ag-btn-font-size);
      font-weight: 400;
      line-height: var(--ag-btn-line-height);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      border: 1px solid transparent;
      border-radius: 8px;
      text-decoration: none;
      cursor: pointer;
      transition: filter .12s ease-out 0s, background-color .12s ease-out 0s, color .12s ease-out 0s;
    }

    /* CTA content: text on desktop, icon on mobile */
    .ag-header__cta-text{ display:inline; }
    .ag-header__cta-ico{ display:none; }


    /* Primary (solid red) */
    .ag-header__cta--solid{
      color:#fff;
      background: var(--agirosis-red);
      border-color: var(--agirosis-red);
    }
    .ag-header__cta--solid:hover{ filter: brightness(.95); }
    .ag-header__cta--solid:active{ filter: brightness(.90); }

    /* Secondary (outline) */
    .ag-header__cta--outline{
      color: var(--agirosis-red);
      background: transparent;
      border-color: var(--agirosis-red);
    }
    .ag-header__cta--outline:hover{
      background: rgba(237,29,36,.08);
      filter: none;
    }
    .ag-header__cta--outline:active{
      background: rgba(237,29,36,.14);
      filter: none;
    }

    .ag-header__cta:focus-visible{
      outline: 3px solid rgba(237,29,36,.35);
      outline-offset: 2px;
    }

@media (max-width: 720px){
  /* Mobile: keep one row, avoid overlaps */
  .ag-header__wrap{ padding: 10px 12px; }
  .ag-header__row{ gap: 10px; }
  .ag-header__logo-img{ height: 42px; }

  /* Hide text CTAs; use square icons instead */
  .ag-header__cta-wrap{ display:none; }
  .ag-header__icons{ margin-left: 0; }

  /* Show mobile-only icons */
  .ag-header__icon--quote,
  .ag-header__icon--support{ display:inline-flex; }
}


/* Mobile-only icons (enabled via media query) */
.ag-header__icon--quote,
.ag-header__icon--support{ display:none; }

.ag-header__icon svg{ display:block; }
.ag-header__icon img{
  width: 20px;
  height: 20px;
  display:block;
  object-fit: contain;
}


@media (max-width: 380px){
  .ag-header__logo-img{ height: 38px; }
  .ag-header__icons{ gap: 8px; }
  .ag-header__icon{ width: 36px; height: 36px; }
}

/* Header icons */
    .ag-header__icons{
      display:flex;
      align-items:center;
      gap: 10px;
      margin-left: 10px;
    }
    .ag-header__icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid rgba(17,24,39,.12);
      background: #fff;
      color: #111827;
      cursor: pointer;
      padding: 0;
      box-sizing: border-box;
    }
    .ag-header__icon:hover{ background: rgba(17,24,39,.04); }
    .ag-header__icon:active{ background: rgba(17,24,39,.08); }
    .ag-header__icon:focus-visible{
      outline: 3px solid rgba(237,29,36,.35);
      outline-offset: 2px;
    }

    /* Mobile CTA icons styling (solid + outline like the buttons) */
    .ag-header__icon--quote{
      background: var(--agirosis-red);
      border-color: var(--agirosis-red);
      color: #fff;
    }
    .ag-header__icon--quote:hover{ filter: brightness(.95); background: var(--agirosis-red); }
    .ag-header__icon--quote:active{ filter: brightness(.90); background: var(--agirosis-red); }

    .ag-header__icon--support{
      background: #fff;
      border-color: var(--agirosis-red);
      color: var(--agirosis-red);
    }
    .ag-header__icon--support:hover{ background: rgba(237,29,36,.08); filter:none; }
    .ag-header__icon--support:active{ background: rgba(237,29,36,.14); filter:none; }
    .ag-header__icon--cart{ position: relative; text-decoration:none; }
    .ag-header__badge{
      position:absolute;
      top: -6px;
      right: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--agirosis-red);
      color: #fff;
      font: 600 11px/18px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      box-sizing: border-box;
      text-align:center;
      border: 2px solid #fff;
    }

    /* Off-canvas products menu */
    .ag-menu{
      position: fixed;
      inset: 0;
      z-index: 2000;
      pointer-events: none;
    }
    .ag-menu__overlay{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.35);
      opacity: 0;
      transition: opacity .18s ease;
    }
    .ag-menu__panel{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: min(420px, 92vw);
      background: #fff;
      border-left: 1px solid rgba(0,0,0,.10);
      transform: translateX(100%);
      transition: transform .22s ease;
      display:flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .ag-menu__top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .ag-menu__title{
      font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: #111827;
    }
    .ag-menu__close{
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid rgba(17,24,39,.12);
      background: #fff;
      color: #111827;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      padding:0;
    }
    .ag-menu__close:hover{ background: rgba(17,24,39,.04); }
    .ag-menu__close:active{ background: rgba(17,24,39,.08); }

    .ag-menu__search{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }
    .ag-menu__search-field{
      flex: 1 1 auto;
      height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(17,24,39,.15);
      padding: 0 12px;
      font: 400 14px/1.2 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      outline: none;
    }
    .ag-menu__search-field:focus{
      border-color: rgba(237,29,36,.55);
      box-shadow: 0 0 0 3px rgba(237,29,36,.18);
    }
    .ag-menu__search-btn{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(17,24,39,.12);
      background: #fff;
      color: #111827;
      cursor: pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }
    .ag-menu__search-btn:hover{ background: rgba(17,24,39,.04); }
    .ag-menu__search-btn:active{ background: rgba(17,24,39,.08); }

    .ag-menu__nav{
      padding: 6px 0;
      overflow: auto;
      flex: 1 1 auto;
    }
    .ag-menu__link{
      display:block;
      padding: 12px 16px;
      text-decoration:none;
      color: #111827;
      font: 500 14px/1.2 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }
    .ag-menu__link:hover{ background: rgba(17,24,39,.04); color: var(--agirosis-red); font-weight: 700; }
    .ag-menu__link:active{ background: rgba(17,24,39,.08); }
    .ag-menu__link:focus-visible{ outline: 3px solid rgba(237,29,36,.35); outline-offset: 2px; }

    .ag-menu__contact{
      padding: 12px 16px 16px;
      border-top: 1px solid rgba(0,0,0,.08);
      display:grid;
      gap: 8px;
    }
    .ag-menu__contact-item{
      text-decoration:none;
      color: #111827;
      font: 400 13px/1.3 "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      opacity: .9;
    }
    .ag-menu__contact-item:hover{ opacity: 1; text-decoration: underline; }


    .ag-menu__social{
      display:flex;
      gap: 10px;
      padding: 0 16px 16px;
    }
    .ag-menu__social a{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(17,24,39,.12);
      background: #fff;
      color: #111827;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
    }
    .ag-menu__social a:hover{ background: rgba(17,24,39,.04); }
    .ag-menu__social a:active{ background: rgba(17,24,39,.08); }

    .ag-menu--open{ pointer-events: auto; }
    .ag-menu--open .ag-menu__overlay{ opacity: 1; }
    .ag-menu--open .ag-menu__panel{ transform: translateX(0); }


    /* =========================================================
       Full-height PDF area (header stays on top, no page scrollbar)
       ========================================================= */
    .ag-viewer{
      flex: 1 1 auto;
      min-height: 0;          /* critical for flex children */
      overflow: hidden;       /* avoid body scrollbars */
      width: 100%;
    }
    .ag-viewer .PDFFlip{
      height: 100% !important;
      width: 100% !important;
    }
    /* Common PDFFlip internal wrappers (safety net) */
    .ag-viewer .pdfflip,
    .ag-viewer .pdfflip-container,
    .ag-viewer .pdfflip-viewport,
    .ag-viewer .pdfflip-stage{
      height: 100% !important;
    }


/* ==========================================================
   FIX (Desktop): Hide CTA icons (quote/support). Show only on mobile.
   Reason: base .ag-header__icon sets display inline-flex later in cascade.
   ========================================================== */
.ag-header__icon--quote,
.ag-header__icon--support{
  display: none !important;
}
@media (max-width: 720px){
  .ag-header__icon--quote,
  .ag-header__icon--support{
    display: inline-flex !important;
  }
}