/* ==========================================================================
   Vorton Tools — site.css
   Everything that is NOT needed for the first paint. Loaded non-blocking
   (preload + onload swap) by build.mjs, with a <noscript> fallback.
   ========================================================================== */

/* 1. (moved) Trust bar ----------------------------------------------------
   The trade-terms bar now sits above the fold on the home pages, so its rules
   live in critical.css section 8c instead — a deferred stylesheet would let it
   flash unstyled on first paint. */

/* 2. Card grids ---------------------------------------------------------- */
/* auto-fill, not auto-fit: several grids hold only one or two items (a category
   with a single model, "other models buyers order with this one"). auto-fit
   collapses the unused tracks and stretches that lone card across the whole
   wrap, which reads as a broken layout. Capping the card width instead was
   tried and rejected — it kept the stretched track and produced 146px gutters
   between cards that sat 21.6px apart everywhere else. auto-fill keeps the
   gutter constant and simply leaves the unused slot empty.
   The grid declarations themselves now live in critical.css so the columns
   exist at first paint; everything below is decoration that cannot move a
   block. */
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin:0;
  transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
.card:hover,.card:focus-within{box-shadow:var(--shadow-2);border-color:#CFDCEB;transform:translateY(-3px)}
.card-media{background:var(--bg-alt)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img,.card:focus-within .card-media img{transform:scale(1.045)}
.card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.42rem;flex:1}
.card-title{margin:0;font-size:var(--fs-title-sm);line-height:1.3}
.card-title a{text-decoration:none;color:var(--brand)}
.card-title a:hover{text-decoration:underline;color:var(--brand-600)}
.card-text{margin:0;color:var(--muted);font-size:var(--fs-small)}
.card-meta{margin:0;font-size:var(--fs-label);color:var(--muted);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:650}
.card-link{margin-top:auto;padding-top:.7rem;font-weight:650;text-decoration:none;font-size:var(--fs-small)}
.card-link::after{content:" \2192";transition:margin-inline-start .18s ease;display:inline-block}
.card-link:hover::after{margin-inline-start:.2rem}

/* 3. Split sections ------------------------------------------------------
   .split, .grid-2 and .grid-3 are declared in critical.css: they set the
   height of the first screen, and a sheet that arrives after first paint
   cannot be allowed to decide it. Only what sits inside them lives here. */
.split-media{margin:0}
.split-media img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line)}
.split-media figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--muted)}

/* 4. Prose / lists ------------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose>*:first-child{margin-top:0}
/* Geometry for .check-list lives in critical.css so the reserved indent exists
   at first paint; only the tick glyph is drawn here, where arriving late cannot
   move anything. */
.check-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.45em;width:.62rem;height:.34rem;
  border-inline-start:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
.cross-list li::before{border-color:#B3261E;transform:rotate(0);width:.7rem;height:0;border-inline-start:0;border-bottom:2px solid #B3261E;top:.72em}
.def-list{display:grid;grid-template-columns:minmax(9rem,auto) minmax(0,1fr);gap:.5rem 1.25rem;margin:0 0 1.5rem}
.def-list dt{margin:0;font-weight:650;color:var(--brand)}
.def-list dd{margin:0}
@media (max-width:560px){.def-list{grid-template-columns:minmax(0,1fr);gap:0 0}.def-list dd{margin-bottom:.75rem}}

/* 5. Tables -------------------------------------------------------------- */
.table-wrap{
  position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 1.5rem;background:#fff;
  /* Two hairline shadows pinned to the scroll box tell you there is more table
     to the right without any JavaScript. */
  background-image:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(255,255,255,0),#fff 70%),
    radial-gradient(farthest-side at 0 50%,rgba(16,22,29,.14),rgba(16,22,29,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(16,22,29,.14),rgba(16,22,29,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:2.5rem 100%,2.5rem 100%,.85rem 100%,.85rem 100%;
  background-attachment:local,local,scroll,scroll;
}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:34rem;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:start;padding:.9rem 1rem;font-weight:650;color:var(--brand);background:var(--bg-alt);border-bottom:1px solid var(--line)}
th,td{padding:.72rem .95rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--line-2)}
thead th{background:var(--brand-050);color:var(--brand);font-weight:700;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:#FBFCFE}
.spec-table th{width:38%;color:var(--ink-2);font-weight:600;background:#fff}
.spec-table{min-width:0}
.spec-table tbody tr:hover{background:transparent}
/* Narrow screens: a three-column text table cannot fit, so it scrolls. Every
   table on the site puts its row label in a <th scope="row">, so that label can
   be pinned to the start edge while the remaining columns scroll past it —
   otherwise the reader loses track of which row they are looking at. */
@media (max-width:640px){
  th,td{padding:.6rem .7rem}
  .table-wrap th[scope="row"],.table-wrap thead th:first-child{
    position:sticky;inset-inline-start:0;z-index:2;background:#fff;
    box-shadow:1px 0 0 var(--line-2),7px 0 11px -7px rgba(16,22,29,.20);
  }
  .table-wrap thead th:first-child{background:var(--brand-050)}
  [dir="rtl"] .table-wrap th[scope="row"],[dir="rtl"] .table-wrap thead th:first-child{
    box-shadow:-1px 0 0 var(--line-2),-7px 0 11px -7px rgba(16,22,29,.20);
  }
}

/* 6. Steps / process ----------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.2rem;margin:0;padding:0;list-style:none}
.step{position:relative;padding-inline-start:3.3rem;margin:0}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;inset-inline-start:0;top:0;width:2.25rem;height:2.25rem;
  display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:700;font-variant-numeric:tabular-nums;
}
.step h3{margin:0 0 .3rem;font-size:var(--fs-title-sm);color:var(--brand)}
.step p{margin:0;color:var(--ink-2);font-size:var(--fs-small);max-width:74ch}

/* 7. Feature highlights -------------------------------------------------- */
/* border-inline-start, not border-left: in Arabic the amber rule belongs on
   the right-hand edge. */
.feature{
  background:#fff;border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:var(--radius);padding:1.15rem 1.2rem;margin:0;
}
.feature h3{margin:0 0 .35rem;font-size:var(--fs-title-sm);color:var(--brand)}
.feature p{margin:0;color:var(--muted);font-size:var(--fs-small)}

/* 8. Callouts ------------------------------------------------------------ */
.callout{border:1px solid #CFDCEB;background:var(--brand-050);border-radius:var(--radius);padding:1.15rem 1.3rem;margin:0 0 1.5rem}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-color:#F3D9A4;background:var(--accent-050)}
.callout-honest{border-color:#CFDCEB}
.callout strong{color:var(--brand)}

/* 9. Badges --------------------------------------------------------------
   .badges itself (the flex row) is declared in critical.css — it sits above the
   fold on product and category pages. Only the pill decoration is here. */
.badges li{
  margin:0;padding:.32rem .72rem;border-radius:var(--radius-pill);background:var(--brand-050);
  color:var(--brand);font-size:var(--fs-label);font-weight:650;border:1px solid #D6E3F2;
}

/* 10. FAQ ---------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);margin-top:1.5rem}
/* The FAQ page stacks several h2 + .faq groups inside one section, so the group
   heading needs its own breathing room or it reads as part of the list above. */
.faq + h2{margin-top:clamp(2.25rem,4.5vw,3.25rem)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>summary{
  cursor:pointer;padding:1.1rem 2.2rem 1.1rem 0;font-weight:650;color:var(--brand);
  font-size:var(--fs-title);position:relative;list-style:none;
  transition:color .18s ease;
}
.faq-item>summary:hover{color:var(--brand-600)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{
  content:"";position:absolute;inset-inline-end:.35rem;top:1.6rem;width:.55rem;height:.55rem;
  border-inline-end:2px solid var(--accent-700);border-bottom:2px solid var(--accent-700);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq-item[open]>summary::after{transform:rotate(-135deg)}
.faq-item[open]>summary{color:var(--ink)}
.faq-answer{padding:0 0 1.2rem;color:var(--ink-2);max-width:74ch}
.faq-answer p:last-child{margin-bottom:0}

/* 11. Product pages ------------------------------------------------------
   .product-hero is in critical.css: it is the first screen of all 37 product
   pages, and the deferred sheet used to paint it stacked and then snap the two
   columns together (CLS 0.72). What remains here is inside those columns. */
.product-media{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-alt);overflow:hidden}
.product-media img{width:100%;height:auto}
/* .product-gallery's grid and li are in critical.css — the strip is above the
   fold on mobile and stacks into three tall rows without them. */
.product-gallery img{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-alt);
  transition:border-color .18s ease,transform .18s ease;
}
.product-gallery img:hover{border-color:#C3D3E6;transform:translateY(-2px)}
.product-sku{margin:0 0 .5rem;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
.product-cta{margin-top:1.6rem;padding:1.35rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-alt)}
.product-cta h2{margin:0 0 .35rem;font-size:var(--fs-title)}
.product-cta p{margin:0;color:var(--muted);font-size:var(--fs-small)}
.product-cta .btn-row{margin-top:1rem}
.product-cta .btn-row:first-child{margin-top:0}

/* 12. CTA band ----------------------------------------------------------- */
.cta-band{background:var(--brand);color:#D8E4F1;border-radius:var(--radius-lg);padding:clamp(1.9rem,4.5vw,3rem)}
.cta-band h2{color:#fff;margin-bottom:.5rem}
.cta-band p{color:#C6D6E8;max-width:62ch}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.cta-band .btn-row{margin-top:1.6rem}

/* 13. Forms --------------------------------------------------------------
   Moved to forms.css, which is inlined into every page that carries a form.
   A deferred sheet left the contact form's first screen unstyled at first
   paint and reflowed it on arrival — CLS 0.317 measured under Slow 4G. See
   the header comment in forms.css. Do not re-add these rules here. */

/* 14. Footer ------------------------------------------------------------- */
.site-footer{background:var(--bg-dark);color:#AFC2D6;margin-top:0;padding-block:clamp(2.5rem,5.5vw,3.75rem) 1.35rem;font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.1rem)}
.footer-name{display:flex;align-items:center;gap:.6rem;margin:0 0 .85rem;font-weight:700;color:#fff;font-size:var(--fs-title)}
/* the supplied wordmark is white-on-transparent, so it reads on this navy panel */
.footer-logo{display:block;width:auto;height:30px;max-width:100%}
.footer-desc{margin:0 0 .9rem;max-width:44ch}
.footer-note{margin:0 0 1rem;padding:.8rem 1rem;border-inline-start:3px solid var(--accent);background:rgba(255,255,255,.05);border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm);max-width:46ch}
.footer-note strong{color:#fff}
.footer-contact{margin:0 0 1.1rem;padding:0;list-style:none}
.footer-contact li{margin:0 0 .3rem}
.site-footer a{color:#DCE7F3;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-decoration-thickness:1px;text-underline-offset:3px;padding-block:.28rem;transition:color .18s ease,text-decoration-color .18s ease}
.site-footer a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.footer-address{font-style:normal;color:#8FA5BC;line-height:1.6;font-size:var(--fs-label)}
.footer-col-title{margin:0 0 .8rem;font-weight:700;color:#fff;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li{margin:0 0 .5rem}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4.5vw,2.75rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.13);
  font-size:var(--fs-label);color:#8FA5BC;
}
.footer-bottom p{margin:0}
@media (max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* 15. Misc --------------------------------------------------------------- */
.related{margin-top:2.5rem}
.related h2{font-size:var(--step-2)}
.section-dark a{color:#BFD6F0}
.section-dark a:hover{color:var(--accent)}

/* 16. Arabic / RTL -------------------------------------------------------
   The RTL text metrics live in critical.css. [dir="rtl"] body{line-height:1.85}
   used to be here, in the deferred sheet: on every Arabic page the whole
   document reflowed vertically the moment site.css landed, 1.5 seconds in,
   which is where /ar/'s CLS came from. Only the table-cell alignment below is
   still here — tables are well below the fold. */
[lang="ar"] .prose{max-width:70ch}

/* 17. Print -------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.cta-band,.nav-toggle,.skip-link,.btn-row{display:none!important}
  body{color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
  .card,.product-media,.callout{box-shadow:none;border-color:#999}
  .section{padding-block:1rem}
}

/* 18. Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .card:hover{transform:none}
  .card:hover .card-media img{transform:none}
}

/* 19. Scroll-linked reveals ----------------------------------------------
   Content fades and lifts as it enters the viewport. This is pure CSS
   (scroll-driven animations) with no observer and no library, and it is
   wrapped in @supports so browsers without animation-timeline simply render
   everything in place - there is no hidden state to get stuck in, and no
   JavaScript that could fail to run.

   It animates the standalone `translate` property, never `transform`, because
   `.card:hover` uses transform for its lift and an animated transform would
   win over it. */
@keyframes reveal-up{
  from{opacity:0;translate:0 1.15rem}
  to{opacity:1;translate:0 0}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.feature,.step,.callout,.table-wrap,.split-media,.cta-band,.related,.faq{
      animation:reveal-up both linear;
      animation-timeline:view();
      animation-range:entry 8% entry 92%;
    }
    /* A short stagger so a row of cards does not snap in as one slab. Kept to
       four steps: past that it reads as a queue rather than a reveal. */
    .card-grid>*:nth-child(2),.grid-3>*:nth-child(2),.grid-2>*:nth-child(2){animation-range:entry 13% entry 97%}
    .card-grid>*:nth-child(3),.grid-3>*:nth-child(3),.grid-2>*:nth-child(3){animation-range:entry 18% entry 100%}
    .card-grid>*:nth-child(4),.grid-3>*:nth-child(4),.grid-2>*:nth-child(4){animation-range:entry 23% entry 100%}
  }
}