/*
Theme Name:   Loka International
Theme URI:    https://lokainternational.com
Description:  Child theme of GeneratePress for Loka International — bilingual (ar/en) agri-export catalogue.
Author:       Loka International
Template:     generatepress
Version:      2.14.0
Text Domain:  loka
*/

/* ==========================================================================
   Brand tokens — sampled from the vector logo
   ========================================================================== */
:root{
  --loka-teal:#00534C;
  --loka-teal-dark:#003A35;
  --loka-teal-mid:#4A8580;
  --loka-green:#629D41;
  --loka-green-soft:#8BB773;
  --loka-coral:#F6956A;
  --loka-coral-soft:#FDF0EB;
  --loka-coral-line:#F7D9CC;

  --loka-ink:#14201E;
  --loka-body:#3D4F4C;
  --loka-mute:#5C6B69;
  --loka-faint:#8A9998;
  --loka-line:#E2EBE9;
  --loka-line-soft:#E8EFED;
  --loka-bg:#FFFFFF;
  --loka-bg-soft:#F4F8F2;
  --loka-bg-tint:#F8FBF7;

  --loka-radius:18px;
  --loka-radius-sm:12px;
  --loka-shadow:0 2px 12px rgba(20,32,30,.045);
  --loka-shadow-lg:0 14px 36px rgba(20,32,30,.12);

  --loka-gutter:clamp(1.25rem, 4vw, 3.5rem);
  --loka-section:clamp(3rem, 6vw, 5.125rem);
  --loka-max:1440px;
}

/* ==========================================================================
   Typography — a family per script, one scale
   ========================================================================== */
body{
  color:var(--loka-body);
  background:var(--loka-bg);
  -webkit-font-smoothing:antialiased;
}
body:not(.rtl){
  font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;
}
body.rtl{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  line-height:1.9;              /* Arabic needs more leading than Latin */
}

h1,h2,h3,h4{ color:var(--loka-teal); line-height:1.15; margin-top:0; }
body:not(.rtl) h1,
body:not(.rtl) h2,
body:not(.rtl) h3{
  font-family:"Newsreader",Georgia,serif;
  font-weight:500;
  letter-spacing:-.4px;
}
body.rtl h1,
body.rtl h2,
body.rtl h3{ font-weight:700; line-height:1.35; }

h1{ font-size:clamp(2.125rem,4.4vw,3.375rem); }
h2{ font-size:clamp(1.75rem,3.2vw,2.625rem); }
h3{ font-size:clamp(1.25rem,2vw,1.75rem); }

a{ color:var(--loka-teal); text-decoration:none; transition:color .18s ease; }
a:hover,a:focus{ color:var(--loka-green); }

/* ==========================================================================
   Shell
   ========================================================================== */
.loka-wrap{ max-width:var(--loka-max); margin-inline:auto; padding-inline:var(--loka-gutter); }
.loka-section{ padding-block-start:var(--loka-section); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.loka-btn,
.loka-btn-ghost,
.loka-btn-accent{
  display:inline-block;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  padding:1rem 2.125rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.loka-btn{ background:var(--loka-teal); color:#fff; box-shadow:0 4px 16px rgba(0,83,76,.2); }
.loka-btn:hover{ background:var(--loka-teal-dark); color:#fff; }
.loka-btn-ghost{ background:#fff; color:var(--loka-teal); border-color:#B9CDC9; font-weight:500; }
.loka-btn-ghost:hover{ border-color:var(--loka-teal); color:var(--loka-teal); }
.loka-btn-accent{ background:var(--loka-coral); color:var(--loka-ink); box-shadow:0 2px 10px rgba(246,149,106,.35); }
.loka-btn-accent:hover{ background:#fff; color:var(--loka-teal); }

/* ==========================================================================
   Header
   ========================================================================== */
.loka-utility{
  background:var(--loka-teal);
  color:#BFD6D3;
  font-size:.8125rem;
}
.loka-utility .loka-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:44px; flex-wrap:wrap;
}
.loka-utility a{ color:#BFD6D3; }
.loka-utility a:hover{ color:#fff; }
.loka-utility__meta{ display:flex; gap:1.375rem; flex-wrap:wrap; }
.loka-lang{
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:.25rem .875rem; color:#fff !important; font-weight:500;
}

.loka-header{ background:#fff; border-block-end:1px solid var(--loka-line-soft); }
.loka-header .loka-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:108px;
}
.loka-logo img{ height:84px; width:auto; display:block; }
.loka-nav{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.loka-nav a{ color:var(--loka-ink); font-weight:500; font-size:.9375rem; }
.loka-nav a:hover{ color:var(--loka-green); }
.loka-nav .loka-btn-accent{ padding:.875rem 1.75rem; font-size:.9375rem; }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.loka-hero{ background:var(--loka-bg-soft); }
.loka-hero__grid{
  display:grid; grid-template-columns:minmax(0,48%) minmax(0,1fr);
  align-items:stretch; gap:0; min-height:560px;
}
.loka-hero__text{
  display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
  padding-block:3rem; padding-inline-end:3.75rem;
}
.loka-hero__media{ padding-block:3rem; }
.loka-hero__media img{
  width:100%; height:100%; min-height:420px; aspect-ratio:4/3;
  object-fit:cover; border-radius:20px; display:block;
  box-shadow:0 18px 44px rgba(0,83,76,.16);
}
.loka-eyebrow{
  display:inline-flex; align-items:center; gap:.5625rem; align-self:start;
  background:#fff; border:1px solid #D9E3E1; border-radius:999px;
  padding:.5rem 1.0625rem; font-size:.8125rem; font-weight:600; color:var(--loka-teal);
}
.loka-eyebrow i{ width:7px; height:7px; border-radius:999px; background:var(--loka-green); display:block; }
.loka-hero h1{ margin:0; }
/* Slides after the first use h2 (one h1 per page) but must look identical. */
.loka-hero h2.loka-hero__title{ margin:0; font-size:clamp(2.125rem,4.4vw,3.375rem); }
.loka-hero p{ margin:0; font-size:1.125rem; max-width:34rem; }
.loka-hero__actions{ display:flex; gap:.875rem; flex-wrap:wrap; }

.loka-slider__controls{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.loka-dots{ display:flex; gap:.5625rem; }
.loka-dot{
  width:9px; height:9px; border-radius:999px; border:0; padding:0;
  background:#C6D6D3; cursor:pointer; position:relative;
  transition:width .25s ease,background .25s ease;
}
/*
 * A 9px dot is far below the 44px a thumb needs. Extend the hit area with a
 * pseudo-element rather than making the dot itself bigger, so it stays a dot.
 */
.loka-dot::after{
  content:""; position:absolute; inset:-17px -8px;
}
.loka-dot[aria-current="true"]{ width:30px; background:var(--loka-teal); }
.loka-arrow{
  width:42px; height:42px; border-radius:999px; border:1px solid #C6D6D3;
  background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.loka-arrow:hover{ border-color:var(--loka-teal); }
body.rtl .loka-arrow svg{ transform:scaleX(-1); }
.loka-slide{ display:none; }
.loka-slide.is-active{ display:contents; }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.loka-trust{ border-block-end:1px solid var(--loka-line-soft); }
.loka-trust__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0; padding-block:1.75rem;
}
.loka-trust__item{ padding-inline:1.875rem; border-inline-start:1px solid var(--loka-line-soft); }
.loka-trust__item:first-child{ border-inline-start:0; padding-inline-start:0; }
.loka-trust__value{ font-size:1.4375rem; color:var(--loka-teal); }
body:not(.rtl) .loka-trust__value{ font-family:"Newsreader",Georgia,serif; font-weight:500; }
body.rtl .loka-trust__value{ font-weight:700; font-size:1.3125rem; }
.loka-trust__note{ font-size:.8125rem; color:var(--loka-mute); margin-top:.375rem; line-height:1.5; }

/* ==========================================================================
   Cards and grids
   ========================================================================== */
.loka-grid{ display:grid; gap:1.5rem; }
.loka-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); }
.loka-grid--4{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }

.loka-card{
  border:1px solid var(--loka-line); border-radius:var(--loka-radius);
  overflow:hidden; background:#fff; box-shadow:var(--loka-shadow);
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease;
}
.loka-card:hover{ box-shadow:0 10px 28px rgba(0,83,76,.11); transform:translateY(-2px); }
.loka-card__media{
  background:var(--loka-bg-soft); position:relative;
  aspect-ratio:4/3; flex:0 0 auto; overflow:hidden;
}
.loka-card__media img{
  width:100%; height:100%; aspect-ratio:4/3;
  object-fit:cover; display:block;
}
/* Any image placed in a fixed-ratio box follows the box, never its own size. */
.loka-ratio{ display:block; position:relative; overflow:hidden; background:var(--loka-bg-soft); }
.loka-ratio > img{ width:100%; height:100%; object-fit:cover; display:block; }
.loka-ratio--wide{ aspect-ratio:16/7; }
.loka-ratio--wide > img{ aspect-ratio:16/7; }
.loka-card__body{ padding:1.0625rem 1.1875rem 1.3125rem; }
.loka-card__title{ font-size:1.0625rem; font-weight:600; color:var(--loka-ink); margin:0; }
.loka-card__alt{ font-size:.84375rem; color:var(--loka-faint); margin-top:.1875rem; }
.loka-card__spec{ font-size:.84375rem; margin-top:.75rem; line-height:1.85; }
.loka-card__spec dt{ color:var(--loka-faint); display:inline; }
.loka-card__spec dd{ display:inline; margin:0 0 0 .375rem; }
body.rtl .loka-card__spec dd{ margin:0 .375rem 0 0; }
.loka-card__spec div + div{ margin-top:.125rem; }

.loka-badge{
  position:absolute; inset-block-start:12px; inset-inline-start:12px;
  border-radius:999px; padding:.25rem .6875rem;
  font-size:.71875rem; font-weight:600; color:#fff;
}
.loka-badge--fresh{ background:rgba(98,157,65,.92); }
.loka-badge--frozen{ background:rgba(0,83,76,.88); }
.loka-badge--inputs{ background:rgba(74,133,128,.92); }

.loka-noimg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem;
  color:#9FB3AF; font-size:.78125rem; background:#F1F6EF;
}

.loka-chip{
  display:inline-block; background:var(--loka-bg-soft);
  border:1px solid var(--loka-line); border-radius:999px;
  padding:.375rem .875rem; font-size:.8125rem; color:var(--loka-teal);
}
.loka-chip--cert{ background:var(--loka-coral-soft); border-color:var(--loka-coral-line); color:#9A4A22; }
.loka-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* ==========================================================================
   Season chart
   ========================================================================== */
.loka-season{ background:var(--loka-teal); border-radius:22px; padding:clamp(1.75rem,3.5vw,2.875rem); }
.loka-season h2{ color:#fff; margin-bottom:.5rem; }
.loka-season__intro{ color:#A9C6C2; margin:0 0 2rem; }
.loka-season__row{
  display:grid; grid-template-columns:minmax(120px,168px) repeat(12,minmax(0,1fr));
  gap:0 6px; align-items:center;
}
.loka-season__row + .loka-season__row{ margin-top:.625rem; }
.loka-season__label{ color:#fff; font-size:.90625rem; }
.loka-season__head{ color:#A9C6C2; text-align:center; font-size:.75rem; font-weight:500; }
.loka-season__cell{ height:24px; border-radius:6px; background:rgba(255,255,255,.09); }
.loka-season__cell.is-peak{ background:var(--loka-green); }
.loka-season__cell.is-store{ background:var(--loka-coral); }
.loka-season__key{ display:flex; gap:1.5rem; margin-top:1.625rem; font-size:.8125rem; color:#A9C6C2; flex-wrap:wrap; }
.loka-season__key span{ display:inline-flex; align-items:center; gap:.5625rem; }
.loka-season__key i{ width:24px; height:12px; border-radius:4px; display:block; }

/* ==========================================================================
   Product page
   ========================================================================== */
.loka-crumbs{ font-size:.84375rem; color:var(--loka-faint); padding-block:1.25rem 0; }
.loka-crumbs a{ color:var(--loka-faint); }
.loka-crumbs span{ margin-inline:.5rem; }

.loka-product{ display:grid; grid-template-columns:minmax(0,43%) minmax(0,1fr); gap:3rem; align-items:start; }
.loka-gallery__main img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--loka-radius); display:block; }
.loka-gallery__thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:.75rem; }
.loka-gallery__thumbs button{
  padding:0; border:2px solid var(--loka-line); border-radius:var(--loka-radius-sm);
  overflow:hidden; background:none; cursor:pointer; aspect-ratio:1;
}
.loka-gallery__thumbs button[aria-current="true"]{ border-color:var(--loka-teal); }
.loka-gallery__thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.loka-spec{ width:100%; border-collapse:collapse; margin-block:1.625rem; }
.loka-spec th,.loka-spec td{
  text-align:start; padding:.75rem 1rem;
  border-block-end:1px solid var(--loka-line-soft); vertical-align:top; font-size:.90625rem;
}
.loka-spec th{ width:34%; background:var(--loka-bg-tint); color:var(--loka-teal); font-weight:600; }
.loka-spec .is-pending{ color:#B5762F; }

.loka-faq{ display:flex; flex-direction:column; gap:.875rem; }
.loka-faq__item{ border:1px solid var(--loka-line); border-radius:14px; padding:1.125rem 1.375rem; background:#fff; }
.loka-faq__q{ font-weight:600; font-size:.96875rem; color:var(--loka-ink); margin-bottom:.375rem; }
.loka-faq__a{ font-size:.90625rem; color:var(--loka-mute); margin:0; }

/* ==========================================================================
   Filters
   ========================================================================== */
.loka-filters{ border:1px solid var(--loka-line); border-radius:var(--loka-radius); padding:1.5rem 1.75rem; background:var(--loka-bg-tint); }
.loka-filters__row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.loka-filters__row + .loka-filters__row{ margin-top:1.375rem; }
.loka-filters__label{ font-size:.8125rem; font-weight:600; color:var(--loka-mute); min-width:92px; }
.loka-pill{
  background:#fff; color:var(--loka-body); border:1px solid #D9E3E1;
  border-radius:999px; padding:.5625rem 1.25rem; font-size:.90625rem; font-weight:500;
  cursor:pointer; text-decoration:none; display:inline-block;
}
.loka-pill[aria-current="true"],.loka-pill.is-on{ background:var(--loka-teal); color:#fff; border-color:var(--loka-teal); }
.loka-months{ display:flex; gap:.375rem; flex-wrap:wrap; flex-grow:1; }
.loka-months .loka-pill{ border-radius:10px; padding:.625rem .75rem; flex-grow:1; text-align:center; }
.loka-filters__result{ margin-top:1.25rem; padding-top:1.125rem; border-top:1px solid var(--loka-line); font-size:.90625rem; }

/* ==========================================================================
   RFQ
   ========================================================================== */
.loka-rfq{ background:var(--loka-bg-soft); border:1px solid #DCE9D6; border-radius:22px; padding:clamp(1.75rem,3.5vw,3rem); }
.loka-rfq h2{ margin-bottom:.6875rem; }
.loka-rfq .frm-fluent-form label{ font-size:.84375rem; font-weight:600; color:var(--loka-ink); }
.loka-rfq input[type=text],.loka-rfq input[type=email],.loka-rfq select,.loka-rfq textarea{
  border:1px solid #C6D6D3 !important; border-radius:10px !important; background:#fff !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.loka-footer{ background:var(--loka-teal); color:#A9C6C2; margin-top:var(--loka-section); }
.loka-footer .loka-wrap{ padding-block:3.625rem 0; }
.loka-footer a{ color:#A9C6C2; }
.loka-footer a:hover{ color:#fff; }
.loka-footer h3{ color:#fff; font-size:.78125rem; letter-spacing:1.3px; text-transform:uppercase; font-weight:600; margin-bottom:1.0625rem; font-family:inherit; }
body.rtl .loka-footer h3{ letter-spacing:0; text-transform:none; font-size:.8125rem; }
.loka-footer__grid{ display:grid; grid-template-columns:1.55fr .85fr .85fr 1.35fr; gap:2.875rem; padding-bottom:2.625rem; }
.loka-footer__logo{ height:88px; width:auto; background:#fff; border-radius:14px; padding:.75rem 1.125rem; display:block; }
.loka-footer__about{ font-size:.90625rem; line-height:1.72; margin:1.25rem 0 0; max-width:23rem; }
.loka-footer__links{ display:flex; flex-direction:column; gap:.6875rem; font-size:.90625rem; }
.loka-social{ display:flex; gap:.625rem; margin-top:1.375rem; }
.loka-social a{
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.loka-social a:hover{ background:rgba(255,255,255,.18); }
.loka-contact{ display:flex; flex-direction:column; gap:.9375rem; }
.loka-contact div{ display:flex; gap:.6875rem; align-items:flex-start; font-size:.90625rem; }
.loka-contact svg{ flex-shrink:0; margin-top:.25rem; }

.loka-certs{ border-top:1px solid rgba(255,255,255,.14); padding-block:1.75rem 1.5rem; }
.loka-certs__grid{ display:flex; gap:.75rem; flex-wrap:wrap; }
.loka-cert{
  flex:1 1 220px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:.875rem 1.125rem;
}
.loka-cert__std{ font-size:.9375rem; color:#fff; font-weight:600; }
.loka-cert__what{ font-size:.78125rem; color:#A9C6C2; margin-top:.25rem; }
.loka-cert__no{ font-size:.71875rem; color:#7FA9A4; margin-top:.4375rem; }
.loka-certs__scope{ font-size:.75rem; color:#7FA9A4; margin-top:.875rem; line-height:1.6; max-width:61rem; }

.loka-colophon{
  border-top:1px solid rgba(255,255,255,.14); padding-block:1.375rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.8125rem; color:#8FB4AF; flex-wrap:wrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .loka-footer__grid{ grid-template-columns:1fr 1fr; }
  .loka-product{ grid-template-columns:1fr; gap:2rem; }
  .loka-hero__grid{ grid-template-columns:1fr; min-height:0; }
  .loka-hero__text{ padding-inline-end:0; }
  .loka-hero__media img{ min-height:280px; }
}
@media (max-width:768px){
  .loka-header .loka-wrap{ min-height:80px; flex-wrap:wrap; gap:.75rem; }
  .loka-logo img{ height:60px; }
  .loka-nav{ gap:1rem; font-size:.875rem; }
  .loka-footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .loka-trust__item{ border-inline-start:0; padding-inline:0; padding-block:.75rem; }
  .loka-season__row{ grid-template-columns:minmax(90px,110px) repeat(12,minmax(0,1fr)); gap:0 3px; }
  .loka-season__head{ font-size:.625rem; }
  .loka-gallery__thumbs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--loka-green); outline-offset:2px;
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   RFQ form (rendered by loka-catalog)
   ========================================================================== */
.loka-form__grid{
  display:grid; gap:1.125rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.loka-form__field{ margin:0; }
.loka-form__field.is-wide{ grid-column:1/-1; }
.loka-form__field label{
  display:block; font-size:.84375rem; font-weight:600;
  color:var(--loka-ink); margin-bottom:.375rem;
}
.loka-form__field label span[aria-hidden]{ color:var(--loka-coral); }
.loka-form__field input,
.loka-form__field textarea{
  width:100%; box-sizing:border-box;
  padding:.75rem .875rem; font-size:.90625rem; font-family:inherit;
  border:1px solid #C6D6D3; border-radius:10px; background:#fff;
  color:var(--loka-ink);
}
.loka-form__field textarea{ resize:vertical; min-height:6rem; }
.loka-form__field input:focus,
.loka-form__field textarea:focus{ border-color:var(--loka-teal); }
.loka-form__context{
  font-size:.875rem; color:var(--loka-mute);
  margin:1.125rem 0 0; padding:.75rem 1rem;
  background:#fff; border:1px solid var(--loka-line); border-radius:10px;
}
.loka-form button[type=submit]{ margin-top:1.375rem; border:0; }
.loka-rfq__done,
.loka-rfq__error{
  border-radius:12px; padding:1.125rem 1.375rem; font-size:.96875rem;
}
.loka-rfq__done{ background:#fff; border:1px solid var(--loka-green); color:var(--loka-teal); }
.loka-rfq__error{ background:var(--loka-coral-soft); border:1px solid var(--loka-coral-line); color:#9A4A22; }
.loka-rfq__done p,.loka-rfq__error p{ margin:0; }

/* ==========================================================================
   Content pages
   ========================================================================== */
.loka-page__head{ max-width:52rem; }
.loka-page__lead{
  font-size:1.1875rem; color:var(--loka-mute); margin:.875rem 0 0;
  max-width:44rem; line-height:1.6;
}
body.rtl .loka-page__lead{ line-height:1.9; }

/* A measured column: long lines are the single biggest thing that stops
   people reading a company profile. */
.loka-prose{ max-width:46rem; }
.loka-prose > * + *{ margin-top:1.25rem; }
.loka-prose h2{ margin-top:2.75rem; font-size:clamp(1.5rem,2.6vw,2.125rem); }
.loka-prose h3{ margin-top:2rem; font-size:1.25rem; }
.loka-prose p{ font-size:1.0625rem; }
.loka-prose ul,.loka-prose ol{ padding-inline-start:1.375rem; }
.loka-prose li + li{ margin-top:.5rem; }
.loka-prose strong{ color:var(--loka-ink); }
.loka-prose table{ width:100%; border-collapse:collapse; }
.loka-prose th,.loka-prose td{
  text-align:start; padding:.75rem 1rem;
  border-block-end:1px solid var(--loka-line-soft); font-size:.9375rem;
}
.loka-prose th{ background:var(--loka-bg-tint); color:var(--loka-teal); font-weight:600; width:34%; }
.loka-prose blockquote{
  margin:0; padding-inline-start:1.125rem;
  border-inline-start:3px solid var(--loka-green);
  color:var(--loka-mute); font-size:1.0625rem;
}

/* Wide blocks may break the measure deliberately. */
.loka-prose .loka-wide{ max-width:none; }

/* Fact grid, used on About and Quality */
.loka-facts{
  display:grid; gap:1rem; max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.loka-fact{
  border:1px solid var(--loka-line); border-radius:var(--loka-radius-sm);
  padding:1.25rem 1.375rem; background:#fff;
}
.loka-fact__k{ font-size:.78125rem; letter-spacing:1.1px; text-transform:uppercase; color:var(--loka-green); font-weight:600; }
body.rtl .loka-fact__k{ letter-spacing:0; text-transform:none; font-size:.8125rem; }
.loka-fact__v{ font-size:1.125rem; color:var(--loka-teal); font-weight:600; margin-top:.4375rem; }
.loka-fact__n{ font-size:.84375rem; color:var(--loka-mute); margin-top:.3125rem; line-height:1.5; }

/* Numbered steps, used on Quality */
.loka-steps{ counter-reset:loka-step; max-width:none; }
.loka-step{
  display:flex; gap:1.125rem; align-items:flex-start;
  padding-block:1.125rem; border-block-end:1px solid var(--loka-line-soft);
}
.loka-step::before{
  counter-increment:loka-step; content:counter(loka-step);
  flex-shrink:0; width:34px; height:34px; border-radius:999px;
  background:var(--loka-bg-soft); color:var(--loka-teal);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.9375rem; font-variant-numeric:tabular-nums;
}
.loka-step h3{ margin:.25rem 0 .375rem; font-size:1.0625rem; }
.loka-step p{ margin:0; font-size:.9375rem; color:var(--loka-mute); }

/* ==========================================================================
   Menu output
   wp_nav_menu() with items_wrap '%3$s' emits bare <li> elements, and a browser
   draws markers on those. Strip them and lay the items out directly.
   ========================================================================== */
.loka-nav li,
.loka-footer__links li{ list-style:none; margin:0; padding:0; }
.loka-nav ul,
.loka-footer__links ul{ list-style:none; margin:0; padding:0; display:contents; }
.loka-nav{ list-style:none; }
.loka-footer__links{ list-style:none; }
.loka-footer__links li + li{ margin-top:.6875rem; }

/* ==========================================================================
   Disclosure notes — distributed products and crop protection
   Logical properties throughout: the accent rule has to sit on the leading
   edge in both directions, and border-left would put it on the wrong side in
   Arabic.
   ========================================================================== */
.loka-note{
  background:var(--loka-bg-tint);
  border:1px solid var(--loka-line);
  border-inline-start:4px solid var(--loka-teal-mid);
  border-radius:var(--loka-radius);
  padding:1.5rem 1.75rem;
  max-width:52rem;
}
.loka-note p{
  margin:0;
  font-size:.90625rem;
  line-height:1.65;
  color:var(--loka-mute);
}
.loka-note p + p{ margin-top:1rem; }

.loka-note__warn{
  background:var(--loka-coral-soft);
  border:1px solid var(--loka-coral-line);
  border-radius:calc(var(--loka-radius) - 8px);
  padding:1rem 1.125rem;
  color:var(--loka-ink) !important;
  font-weight:500;
}

/* ==========================================================================
   FAQ — native <details>, so it works with no JavaScript and the answer text
   is in the DOM for a crawler or an AI assistant even while collapsed.
   ========================================================================== */
.loka-faq{ max-width:52rem; }
.loka-faq__item{
  border:1px solid var(--loka-line);
  border-radius:var(--loka-radius);
  background:var(--loka-bg);
  margin-bottom:.75rem;
  overflow:hidden;
}
.loka-faq__item[open]{ background:var(--loka-bg-tint); }
.loka-faq__q{
  cursor:pointer;
  list-style:none;
  padding:1.125rem 1.375rem;
  font-weight:600;
  font-size:1.03125rem;
  color:var(--loka-ink);
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  position:relative;
  padding-inline-end:3rem;
}
.loka-faq__q::-webkit-details-marker{ display:none; }
.loka-faq__q::after{
  content:"+";
  position:absolute;
  inset-inline-end:1.375rem;
  font-size:1.375rem;
  line-height:1;
  color:var(--loka-teal-mid);
  transition:transform .18s ease;
}
.loka-faq__item[open] .loka-faq__q::after{ content:"\2212"; }
.loka-faq__q:hover{ color:var(--loka-teal); }
.loka-faq__q:focus-visible{ outline:2px solid var(--loka-teal); outline-offset:-2px; }
.loka-faq__a{ padding:0 1.375rem 1.25rem; }
.loka-faq__a p{
  margin:0;
  color:var(--loka-body);
  line-height:1.7;
  max-width:46rem;
}
@media (prefers-reduced-motion:reduce){
  .loka-faq__q::after{ transition:none; }
}

/* ==========================================================================
   Shipping calendar
   Twelve columns will not fit a phone, so the table scrolls inside its own
   container rather than pushing the page sideways — the one exception the
   responsive rule allows.
   ========================================================================== */
.loka-cal__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.loka-cal{
  width:100%; border-collapse:separate; border-spacing:0;
  min-width:44rem; font-size:.875rem;
}
.loka-cal th, .loka-cal td{ padding:.5rem .25rem; text-align:center; }
.loka-cal thead th{
  font-weight:600; color:var(--loka-mute); font-size:.78125rem;
  border-bottom:1px solid var(--loka-line); white-space:nowrap;
}
.loka-cal tbody th{
  text-align:start; font-weight:500; white-space:nowrap;
  padding-inline-end:1rem; border-bottom:1px solid var(--loka-line-soft);
}
.loka-cal tbody th a{ color:var(--loka-ink); }
.loka-cal tbody th a:hover{ color:var(--loka-teal); }
.loka-cal tbody td{
  border-bottom:1px solid var(--loka-line-soft);
  min-width:2.25rem;
}
.loka-cal td.is-on{
  background:var(--loka-green-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.loka-cal td.is-on.is-frozen{ background:var(--loka-teal-mid); }
.loka-cal tbody tr:hover td{ background-color:var(--loka-bg-tint); }
.loka-cal tbody tr:hover td.is-on{ background-color:var(--loka-green); }
.loka-cal tbody tr:hover td.is-on.is-frozen{ background-color:var(--loka-teal); }

/* Full month names where they fit; the short form takes over when they do not. */
.loka-cal__abbr{ display:none; }
@media (max-width:60rem){
  .loka-cal__full{ display:none; }
  .loka-cal__abbr{ display:inline; }
  .loka-cal{ min-width:34rem; }
}

/* ==========================================================================
   How we prove quality
   ========================================================================== */
.loka-proof{ background:var(--loka-bg-soft); }
.loka-proof__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  counter-reset:none;
}
.loka-proof__item{
  background:var(--loka-bg); border:1px solid var(--loka-line);
  border-radius:var(--loka-radius); padding:1.625rem 1.5rem 1.5rem;
}
.loka-proof__num{
  display:block; font-size:.8125rem; font-weight:700; letter-spacing:.06em;
  color:var(--loka-green); margin-bottom:.625rem;
}
.loka-proof__item h3{ font-size:1.0625rem; margin:0 0 .5rem; line-height:1.35; }
.loka-proof__item p{
  margin:0; font-size:.90625rem; line-height:1.65; color:var(--loka-mute);
}

/* ==========================================================================
   Content pages — prose plus a sticky aside
   ========================================================================== */
.loka-page__body{
  margin-top:2.5rem;
  display:grid; gap:3rem;
  grid-template-columns:minmax(0,1fr) 19rem;
  align-items:start;
}
.loka-page__body > .loka-prose{ max-width:44rem; }

.loka-page__aside{ position:sticky; top:2rem; display:grid; gap:1.25rem; }
.loka-aside__media{
  border-radius:var(--loka-radius); overflow:hidden;
  aspect-ratio:4/3; background:var(--loka-bg-soft);
}
.loka-aside__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.loka-aside__card,
.loka-aside__links{
  border:1px solid var(--loka-line); border-radius:var(--loka-radius);
  padding:1.5rem 1.625rem; background:var(--loka-bg-tint);
}
.loka-aside__title{ font-size:1.0625rem; margin:0 0 .625rem; }
.loka-aside__note{
  margin:0 0 1.125rem; font-size:.875rem; line-height:1.6; color:var(--loka-mute);
}
.loka-aside__facts{ margin:0 0 1.25rem; font-size:.875rem; }
.loka-aside__facts dt{
  font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--loka-faint); margin-top:.75rem;
}
.loka-aside__facts dt:first-child{ margin-top:0; }
.loka-aside__facts dd{ margin:.1875rem 0 0; color:var(--loka-body); }
.loka-aside__cta{ display:block; text-align:center; }

.loka-aside__links ul{ list-style:none; margin:0; padding:0; }
.loka-aside__links li + li{ margin-top:.5rem; }
.loka-aside__links a{
  display:block; font-size:.9375rem; font-weight:500;
  padding:.5rem .75rem; border-radius:calc(var(--loka-radius) - 10px);
  background:var(--loka-bg); border:1px solid var(--loka-line-soft);
}
.loka-aside__links a:hover{ border-color:var(--loka-teal-mid); color:var(--loka-teal); }

@media (max-width:62rem){
  .loka-page__body{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .loka-page__aside{ position:static; }
  /* Side by side while there is room, stacked once there is not. */
  .loka-aside__media{ max-width:26rem; }
}

/* ==========================================================================
   Certificate gallery (Quality page)

   Named `certdoc`, not `cert`: the footer strip already owns .loka-certs and
   .loka-cert, and reusing those turned the footer's horizontal row into a
   stacked column on desktop.
   ========================================================================== */
.loka-certdocs{
  display:grid; gap:1.25rem; margin:1.5rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.loka-certdoc{
  margin:0; border:1px solid var(--loka-line); border-radius:var(--loka-radius);
  overflow:hidden; background:var(--loka-bg); display:flex; flex-direction:column;
}
.loka-certdoc__media{
  display:block; position:relative; background:var(--loka-bg-soft);
  aspect-ratio:3/4; overflow:hidden;
}
.loka-certdoc__media img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.loka-certdoc__media--none{
  display:grid; place-items:center; text-align:center; padding:1rem;
  color:var(--loka-faint); font-size:.8125rem;
}
.loka-certdoc__zoom{
  position:absolute; inset-inline:0; bottom:0;
  background:rgba(0,83,76,.92); color:#fff;
  font-size:.78125rem; text-align:center; padding:.5rem;
  opacity:0; transition:opacity .16s ease;
}
.loka-certdoc__media:hover .loka-certdoc__zoom,
.loka-certdoc__media:focus-visible .loka-certdoc__zoom{ opacity:1; }
.loka-certdoc__body{ padding:.875rem 1rem 1rem; }
.loka-certdoc__std{ font-weight:600; color:var(--loka-teal); font-size:.9375rem; }
.loka-certdoc__what{ font-size:.8125rem; color:var(--loka-body); margin-top:.1875rem; }
.loka-certdoc__no{
  font-size:.71875rem; color:var(--loka-faint); margin-top:.375rem;
  word-break:break-word;
}
.loka-certdocs__scope{
  margin:1.25rem 0 0; font-size:.875rem; line-height:1.65;
  color:var(--loka-mute); max-width:46rem;
}
@media (prefers-reduced-motion:reduce){ .loka-certdoc__zoom{ transition:none; } }
/* A tap target has no hover, so the label is always legible there. */
@media (hover:none){ .loka-certdoc__zoom{ opacity:1; position:static; } }

/* ==========================================================================
   Root overflow guard

   A horizontal scroller inside an RTL page overflows to the LEFT, into negative
   coordinates. The scroller clips it visually, and body measures correctly, but
   the root element still counts that leftward extent in its scrollWidth — so the
   whole page scrolls sideways and opens a band of empty space beside the
   content. The shipping calendar is 12 columns and has to scroll, so the
   scroller is not the bug; the root counting it is.

   `clip` rather than `hidden` on purpose: `hidden` makes the root a scroll
   container, which silently breaks `position: sticky` on the content-page aside.
   `clip` prevents the scroll without creating one.
   ========================================================================== */
html{ overflow-x:clip; }

/* --------------------------------------------------------------------------
   Calendar on a phone

   A 12-column table cannot fit 375px, and the scroll container that let it
   overflow was itself the bug: in RTL the table extends into negative space,
   `overflow-x: auto` clips it visually but the root still counts it, so the
   whole document measured 565px against a 375px viewport. Hiding this one
   section dropped it straight back to 375px, which is how it was confirmed.

   So below 48rem the table stops behaving like a table. Each line becomes its
   own block: the name on one row, its twelve months as a full-width grid
   beneath. Nothing overflows, and nobody has to drag a table sideways.
   -------------------------------------------------------------------------- */
@media (max-width:48rem){
  .loka-cal__scroll{ overflow-x:visible; }
  .loka-cal{ min-width:0; display:block; font-size:.8125rem; }

  .loka-cal thead{ display:block; }
  .loka-cal thead tr{
    display:grid; grid-template-columns:repeat(12,1fr); gap:2px;
    border-bottom:1px solid var(--loka-line); padding-bottom:.25rem;
  }
  /* The "Line" column header has no column of its own in this layout. */
  .loka-cal thead th:first-child{ display:none; }
  .loka-cal thead th{ padding:0; font-size:.625rem; letter-spacing:-.02em; }
  .loka-cal__full{ display:none; }
  .loka-cal__abbr{ display:inline; }

  .loka-cal tbody{ display:block; }
  .loka-cal tbody tr{
    display:grid; grid-template-columns:repeat(12,1fr); gap:2px;
    margin-top:.875rem;
  }
  .loka-cal tbody tr:hover td{ background-color:var(--loka-bg-soft); }
  .loka-cal tbody tr:hover td.is-on{ background-color:var(--loka-green); }

  .loka-cal tbody th{
    grid-column:1 / -1; padding:0 0 .3125rem; border:0;
    font-size:.875rem; white-space:normal;
  }
  .loka-cal tbody td{
    height:1.375rem; min-width:0; padding:0;
    border:0; border-radius:2px; background:var(--loka-bg-soft);
  }
  .loka-cal tbody td.is-on{ box-shadow:none; }
}

/* ==========================================================================
   Mobile navigation — burger and side drawer

   The drawer slides from the inline-start edge, so it comes from the right in
   Arabic and the left in English without a second rule. Hiding the nav is gated
   on `.loka-js`: if the script never runs, the button would hide a menu nothing
   can reopen, and the site would have no navigation at all.
   ========================================================================== */
.loka-burger{
  display:none; background:none; border:0; cursor:pointer;
  padding:.625rem; margin-inline-start:auto; border-radius:10px;
  color:var(--loka-teal);
}
.loka-burger:hover{ background:var(--loka-bg-soft); }
.loka-burger:focus-visible{ outline:2px solid var(--loka-teal); outline-offset:2px; }
.loka-burger__bars{ display:block; width:22px; }
.loka-burger__bars i{
  display:block; height:2px; border-radius:2px; background:currentColor;
}
.loka-burger__bars i + i{ margin-top:5px; }

.loka-nav__close{
  display:none; background:none; border:0; cursor:pointer;
  color:var(--loka-mute); padding:.5rem; border-radius:8px;
  align-self:flex-end; margin-bottom:.5rem;
}
.loka-nav__close:hover{ background:var(--loka-bg-soft); color:var(--loka-ink); }
.loka-nav__close:focus-visible{ outline:2px solid var(--loka-teal); outline-offset:2px; }

.loka-nav__backdrop{
  position:fixed; inset:0; background:rgba(20,32,30,.45);
  opacity:0; transition:opacity .22s ease; z-index:60;
}
.loka-nav__backdrop.is-open{ opacity:1; }

@media (max-width:62rem){
  .loka-burger{ display:block; }

  .loka-js .loka-nav{
    position:fixed; z-index:70;
    inset-block:0; inset-inline-start:0;
    width:min(20rem,86vw);
    /* Off-canvas on the side it opens from, in either direction. */
    /* The slide direction is a variable so the open state can reset it with one
       rule instead of fighting a more specific RTL selector. */
    --loka-slide:-102%;
    transform:translateX(var(--loka-slide));
    background:var(--loka-bg);
    box-shadow:0 0 40px rgba(20,32,30,.18);
    display:flex; flex-direction:column; align-items:stretch;
    gap:.25rem; padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));
    padding-top:calc(1.25rem + env(safe-area-inset-top,0px));
    overflow-y:auto; overscroll-behavior:contain;
    transition:transform .24s ease;
    visibility:hidden;
  }
  /* No descendant combinator: `loka-js` and `dir="rtl"` are both on <html>, so
     `[dir="rtl"] .loka-js` matches nothing and the drawer slid off the wrong
     edge in Arabic. */
  .loka-js[dir="rtl"] .loka-nav{ --loka-slide:102%; }

  /* Both selectors listed so the open state matches or beats the RTL rule above;
     with only the first, `[dir=rtl] .loka-js .loka-nav` is more specific and the
     drawer stays parked off-canvas on the Arabic side. */
  .loka-js .loka-nav.is-open,
  .loka-js[dir="rtl"] .loka-nav.is-open{ --loka-slide:0%; visibility:visible; }

  .loka-nav__close{ display:block; }

  .loka-js .loka-nav a{
    padding:.8125rem .375rem; font-size:1.0625rem;
    border-bottom:1px solid var(--loka-line-soft);
  }
  .loka-js .loka-nav a:last-child{ border-bottom:0; }
  .loka-js .loka-nav .loka-btn-accent{
    margin-top:1rem; text-align:center; border-bottom:0;
    padding:.9375rem 1.5rem;
  }
}

/* Without the drawer the nav still has to be usable, so it simply wraps. */
@media (max-width:62rem){
  html:not(.loka-js) .loka-nav{ flex-wrap:wrap; gap:.75rem 1rem; }
  html:not(.loka-js) .loka-burger{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .loka-js .loka-nav,
  .loka-nav__backdrop{ transition:none; }
}



/* --- drawer close button and admin-bar clearance -------------------------- */
/* Scoped through .loka-nav so the theme's own styling wins over whatever else
   is painting buttons on the page — it was rendering white-on-charcoal. */
.loka-nav .loka-nav__close{
  background:none; color:var(--loka-mute);
  border:0; box-shadow:none; line-height:0;
}
.loka-nav .loka-nav__close:hover{ background:var(--loka-bg-soft); color:var(--loka-ink); }

/* Logged-in admins get the WordPress toolbar over the top of the drawer, since
   it sits far above any sane z-index. Push the drawer's content clear of it
   rather than fight for the stacking order. */
@media (max-width:62rem){
  .loka-js body.admin-bar .loka-nav{
    padding-top:calc(1.25rem + 46px + env(safe-area-inset-top,0px));
  }
}
@media (max-width:62rem) and (min-width:48.9375rem){
  .loka-js body.admin-bar .loka-nav{ padding-top:calc(1.25rem + 32px); }
}