/* Categories batch 1 — Option B panel styles for /fruits and /vegetables hubs
   and the four item pages. Loaded only from those blades via header-styles.
   Tokens match the live dark theme (black, white, gold #D4AF37, red #C8102E).
   Live .ard-wa-float CSS is not repeated here and must stay uncut in the
   live whatsapp-float partial. Inter is already self-hosted on the live site;
   headings use Georgia as the serif (Cormorant is not shipped in this package). */

.ard-cat{
  --ad-bg:#000;
  --ad-text:#FFFFFF;
  --ad-text-2:#BDBDBD;
  --ad-text-3:#8C8C8C;
  --ad-line:rgba(255,255,255,.12);
  --ad-gold-line:rgba(212,175,55,.32);
  --gold-solid:#D4AF37;
  --gold-hair:linear-gradient(90deg,transparent,#B8860B 15%,#D4AF37 40%,#F6E7A1 50%,#D4AF37 60%,#B8860B 85%,transparent);
  --ad-red:#C8102E;
  --ad-wa:#25D366;
  --ad-serif:Georgia,"Times New Roman",serif;
  --ad-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ad-radius:2px;
  --ad-max:1280px;
  --ad-margin:16px;
  --ad-ease:ease;
  background:#000;
  color:#fff;
}
@media(min-width:768px){
  .ard-cat{--ad-margin:32px}
}
@media(min-width:1280px){
  .ard-cat{--ad-margin:64px}
}

.ard-cat .wrap{
  width:100%;
  max-width:var(--ad-max);
  margin:0 auto;
  padding:0 var(--ad-margin);
}
.ard-cat .page{padding-block:8px 80px}

/* Breadcrumb: Home / Hub / Item (no Products level). */
.ard-cat .crumb{padding:16px 0 0;font-size:14px;color:var(--ad-text-3)}
.ard-cat .crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ard-cat .crumb a{color:var(--ad-text-2);min-height:44px;min-width:44px;display:inline-flex;align-items:center;text-decoration:none}
.ard-cat .crumb a:hover{color:#fff}
.ard-cat .crumb li{display:inline-flex;align-items:center;color:#E8EAED}
.ard-cat .crumb li+li::before{content:"/";margin-inline-end:8px;color:var(--ad-text-3)}

.ard-cat .eyebrow{margin:24px 0 0;font:600 12px/1.4 var(--ad-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ad-text-2)}
.ard-cat .eyebrow::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ad-red);margin-inline-end:10px;vertical-align:2px}

.ard-cat h1{
  font-family:var(--ad-serif);font-weight:500;
  font-size:clamp(36px,4vw,52px);line-height:1.08;letter-spacing:-.01em;
  color:#fff;margin:12px 0 16px
}
.ard-cat .page-item h1{max-width:18ch}
.ard-cat .lede{max-width:46ch;margin:0 0 24px;font-size:17px;line-height:1.6;color:var(--ad-text-2)}
.ard-cat .cat-intro{max-width:62ch;margin:0 0 32px;font-size:17px;line-height:1.6;color:var(--ad-text-2)}

/* Buttons */
.ard-cat .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:var(--ad-radius);
  font:600 13px/1.2 var(--ad-sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent;
  transition:border-color .3s var(--ad-ease),box-shadow .3s var(--ad-ease),background .3s;
  text-align:center;max-width:100%;
  box-sizing:border-box;
}
.ard-cat .btn:hover{border-color:#fff;color:#fff}
.ard-cat .btn-primary{background:#fff;color:#000;border-color:#fff;box-shadow:inset 0 -2px 0 var(--ad-red)}
.ard-cat .btn-primary:hover{background:#fff;color:#000;box-shadow:inset 0 -2px 0 var(--ad-red),0 0 24px rgba(200,16,46,.35)}
.ard-cat .btn-wa svg{width:18px;height:18px;flex:0 0 18px;fill:var(--ad-wa)}
@media(max-width:767.98px){
  .ard-cat .btn{font-size:16px;letter-spacing:.1em}
  .ard-cat .cta-actions .btn{width:100%}
}

.ard-cat .cta-actions{display:flex;flex-direction:column;flex-wrap:wrap;gap:12px;align-items:stretch;margin:8px 0 0}
.ard-cat .cta-actions .btn{width:100%;flex:0 0 auto}
@media(min-width:700px){
  .ard-cat .cta-actions{flex-direction:row;align-items:stretch}
  .ard-cat .cta-actions .btn{width:auto;flex:1 1 calc(50% - 6px)}
}

/* Cards — gold-edged Option B. No-photo cards have no media element. */
.ard-cat .card-grid{display:grid;grid-template-columns:1fr;gap:20px;min-width:0;align-items:start}
@media(min-width:600px){.ard-cat .card-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(min-width:900px){.ard-cat .card-grid{grid-template-columns:1fr 1fr 1fr;gap:24px}}

.ard-cat .item-card{
  min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--ad-gold-line);padding:0 0 16px;background:#000
}
.ard-cat .item-card h2{margin:14px 0 6px;font:500 24px/1.2 var(--ad-serif);color:#fff;padding-left:16px;padding-right:16px}
.ard-cat .item-card .line{margin:0 0 16px;font-size:15px;color:var(--ad-text-2);flex:1 1 auto;padding-left:16px;padding-right:16px}
.ard-cat .item-card .line p{margin:0 0 8px}
.ard-cat .item-card .line p:last-child{margin-bottom:0}
.ard-cat .item-card .card-actions{padding-left:16px;padding-right:16px}
@media(min-width:700px){
  .ard-cat .item-card h2,
  .ard-cat .item-card .line,
  .ard-cat .item-card .card-actions{padding-left:20px;padding-right:20px}
}
.ard-cat .card-visual{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:#000;position:relative;border-bottom:1px solid var(--ad-gold-line)}
.ard-cat .card-visual img{width:100%;height:100%;object-fit:cover;display:block}
.ard-cat .card-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-top:auto}
.ard-cat .card-actions .btn{width:100%}
.ard-cat .card-actions .details{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;color:#fff;
  text-decoration:underline;text-decoration-color:var(--gold-solid);text-underline-offset:4px;font-weight:600;font-size:15px
}
@media(min-width:700px){
  .ard-cat .card-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .ard-cat .card-actions .btn{width:auto;flex:1 1 auto}
}
.ard-cat .item-card.no-photo .card-visual{display:none}
.ard-cat .item-card.no-photo .line{flex:0 0 auto}

/* Item panels and enquiry strip */
.ard-cat .item-block{margin:0 0 40px;max-width:720px}
.ard-cat .item-block.panel{border:1px solid var(--ad-gold-line);padding:20px 20px 8px;max-width:720px}
.ard-cat .item-block h2{margin:0 0 12px;font:600 12px/1 var(--ad-sans);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ard-cat .item-block p{margin:0 0 12px;font-size:16px;color:var(--ad-text-2)}
.ard-cat .item-block > .btn{margin-bottom:16px}

.ard-cat .enquiry-strip{margin:48px 0 0;padding:28px 0 8px;border-top:1px solid transparent;border-image:var(--gold-hair) 1}
.ard-cat .enquiry-strip .panel{border:1px solid var(--ad-gold-line);padding:24px 20px}
.ard-cat .enquiry-strip h2{margin:0 0 8px;font:500 28px/1.2 var(--ad-serif);color:#fff}
.ard-cat .enquiry-strip p{margin:0 0 16px;color:var(--ad-text-2)}
.ard-cat .enquiry-strip .cta-actions{margin-top:8px}

.ard-cat .related{margin:48px 0 0}
.ard-cat .related h2{margin:0 0 20px;font:600 12px/1 var(--ad-sans);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ard-cat .related .card-grid{max-width:100%}
@media(min-width:900px){.ard-cat .related .card-grid{grid-template-columns:1fr 1fr 1fr}}

/* Focus */
.ard-cat a:focus-visible,
.ard-cat .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ========================================================================
   64px insets below 576px — MUST remain at the END of styles.css.
   Same 64px lane as the live homepage hero CTA. Do not move or shrink
   the live .ard-wa-float. These exact selectors are required; they apply
   on category pages (this sheet is loaded only there) and the live
   mobile menu already uses .mobile-nav, so the menu rows on these pages
   also clear the float column.
   ======================================================================== */
@media (max-width: 575.98px) {
  .cta-actions { padding-right: 64px; }
  .item-card .card-actions { padding-right: 64px; }
  .ard-cat .item-card .card-actions { padding-right: 64px; }
  .item-block > .btn { max-width: calc(100% - 64px); }
}

@media (max-width: 575.98px) {
  .mobile-nav { padding-right: 64px; }
}