/* =========================================================================
 * MAC Vehicles - inventory presentation
 * Matches the SearchKings design tokens (see THEME_AUDIT.md):
 *   BRAND PALETTE (2026-06-02, orange+black): dark #111111, dark-hover #000000,
 *   orange #F07000, orange-hover #D86200, grey1 #F4F4F4, grey2 #CCCCCC.
 *   (--mac-navy / --mac-red var names kept for minimal churn; values are the new brand colors.)
 *   font Inter Tight, container 1120px, shadows: base 0 8px 24px /.15.
 * Maintainer note: card/single markup is produced by includes/render.php
 * shortcodes; this file only styles it. Edit cautiously - clients do not
 * touch this; it is developer-owned (see scripts/README.md).
 * ========================================================================= */
:root{
  --mac-navy:#111111; --mac-navy-hover:#000000; --mac-red:#F07000; --mac-red-hover:#D86200;
  --mac-grey1:#F4F4F4; --mac-grey2:#CCCCCC; --mac-ink:#1C2024;
  --mac-shadow-small:0 4px 8px rgba(0,0,0,.15);
  --mac-shadow-base:0 8px 24px rgba(0,0,0,.15);
  --mac-radius:12px;
}
.mac-inventory,.mac-single{font-family:"Inter Tight",sans-serif;color:var(--mac-ink);}

/* ---- Filter bar ---- */
.mac-filter{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:var(--mac-grey1);
  padding:20px;border-radius:var(--mac-radius);margin-bottom:32px;}
.mac-filter .mac-field{display:flex;flex-direction:column;gap:5px;flex:1 1 170px;min-width:150px;}
.mac-filter label{font-size:12px;font-weight:700;color:var(--mac-navy);text-transform:uppercase;letter-spacing:.04em;}
.mac-filter select,.mac-filter input[type=search]{appearance:none;-webkit-appearance:none;
  padding:11px 34px 11px 12px;border:1px solid var(--mac-grey2);border-radius:8px;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23003A52'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size:18px;font-size:14px;color:var(--mac-ink);font-family:inherit;cursor:pointer;}
.mac-filter select:focus{outline:2px solid var(--mac-navy);outline-offset:1px;border-color:var(--mac-navy);}
.mac-filter .mac-actions{display:flex;gap:10px;flex:0 0 auto;}

/* ---- Buttons (pill, brand) ---- */
.mac-btn{display:inline-block;border:0;border-radius:50px;padding:11px 24px;font-weight:600;
  cursor:pointer;text-decoration:none;font-size:14px;line-height:1.2;font-family:inherit;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;}
/* color !important so Elementor's global `.elementor-kit-N a` link color (higher
   specificity) can never override the button text. */
.mac-btn-primary{background:var(--mac-red);color:#fff!important;}
.mac-btn-primary:hover{background:var(--mac-red-hover);color:#fff!important;box-shadow:0 4px 11px rgba(0,0,0,.3);}
.mac-btn-ghost{background:#fff;color:var(--mac-navy)!important;border:1px solid var(--mac-grey2);}
.mac-btn-ghost:hover{background:var(--mac-navy);color:#fff!important;border-color:var(--mac-navy);}

/* ---- Featured single-row slider ---- */
/* One row on every breakpoint; native scroll-snap drives touch swipe (mobile)
   and trackpad (desktop); .mac-slider__nav arrows handle click nav. JS
   (featured-slider.js) only wires the arrows + edge-disabled state. */
.mac-featured{position:relative;}
.mac-slider__track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:6px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none;}
.mac-slider__track::-webkit-scrollbar{display:none;}
/* ~3 cards across on desktop, 2 on tablet, 1 (with a peek) on mobile. */
.mac-featured .mac-card{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start;}
/* Plain blackish chevrons (no pill background), spread into the side margins.
   featured-slider.js hides each arrow when no movement is possible in that
   direction (e.g. prev hidden at the start, next hidden at the end).
   background/border/box-shadow forced transparent with !important so the global
   Elementor kit `button` styling (orange fill + pill radius) can't reapply. */
.mac-featured .mac-slider__nav{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--mac-navy);
  cursor:pointer;font-size:40px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0 0 5px;
  transition:color .2s ease,opacity .2s ease;}
.mac-featured .mac-slider__nav:hover{color:var(--mac-red);background:transparent!important;box-shadow:none!important;}
.mac-slider__nav--prev{left:-46px;}
.mac-slider__nav--next{right:-46px;}

/* ---- Card grid ---- */
.mac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;}
.mac-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mac-grey2);
  border-radius:var(--mac-radius);overflow:hidden;box-shadow:var(--mac-shadow-small);
  transition:box-shadow .25s ease,transform .25s ease;}
.mac-card:hover{box-shadow:var(--mac-shadow-base);transform:translateY(-3px);}
.mac-card__imgwrap{position:relative;display:block;aspect-ratio:16/10;background:var(--mac-grey1);overflow:hidden;}
.mac-card__imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.mac-card:hover .mac-card__imgwrap img{transform:scale(1.04);}
.mac-card__imgwrap--noimg{background:var(--mac-grey1)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CCCCCC'%3E%3Cpath d='M5 11l1.5-4.5h11L19 11M6.5 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m11 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E") no-repeat center;
  background-size:84px;}
.mac-card__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;}
.mac-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 11px;border-radius:50px;color:#fff;background:var(--mac-navy);box-shadow:var(--mac-shadow-small);}
.mac-badge--cond{background:var(--mac-red);}
.mac-card__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;flex:1;}
.mac-card__title{font-size:19px;font-weight:700;color:var(--mac-navy);line-height:1.25;margin:0;}
.mac-card__title a{color:inherit;text-decoration:none;}
.mac-card__title a:hover{color:var(--mac-red);}
.mac-card__meta{font-size:13px;color:#6a6f75;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.mac-card__meta span+span:before{content:"\2022";margin-right:8px;color:var(--mac-grey2);}
.mac-card__price{margin-top:6px;font-size:22px;font-weight:800;color:var(--mac-red);line-height:1.1;}
.mac-card__price.is-request{font-size:17px;color:var(--mac-navy);font-weight:700;}
.mac-card__cta{margin-top:14px;}
.mac-card__cta .mac-btn{width:100%;text-align:center;}

/* ---- Empty + pagination ---- */
.mac-empty{padding:48px 24px;text-align:center;color:#555;background:var(--mac-grey1);border-radius:var(--mac-radius);}
.mac-empty a{color:var(--mac-red);font-weight:600;}
.mac-pagination{display:flex;justify-content:center;gap:8px;margin-top:36px;flex-wrap:wrap;}
.mac-pagination .page-numbers{display:inline-block;min-width:42px;text-align:center;padding:9px 14px;
  border:1px solid var(--mac-grey2);border-radius:8px;text-decoration:none;color:var(--mac-navy);font-weight:600;
  transition:background .2s,color .2s;}
.mac-pagination .page-numbers.current{background:var(--mac-navy);color:#fff;border-color:var(--mac-navy);}
.mac-pagination .page-numbers:hover:not(.current){background:var(--mac-grey1);}

/* ---- Single vehicle ---- */
.mac-single__title{font-size:36px;font-weight:700;color:var(--mac-navy);line-height:1.2;margin:0 0 18px;}

/* ---- Product gallery: main image + thumb strip + lightbox ---- */
.mac-gal__main{position:relative;margin:0 0 12px;cursor:zoom-in;border-radius:14px;overflow:hidden;box-shadow:var(--mac-shadow-small);}
.mac-gal__main img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.mac-gal__zoom{position:absolute;bottom:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(17,17,17,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .2s;}
.mac-gal__main:hover .mac-gal__zoom{background:var(--mac-red);}
.mac-gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
/* These thumbs are <button> elements; override Elementor's global button style
   (orange bg + 50px pill radius) so they're just framed images. */
.mac-gal__thumb{padding:0!important;margin:0!important;border:2px solid transparent!important;border-radius:10px!important;
  overflow:hidden!important;cursor:pointer;background:none!important;background-color:transparent!important;
  box-shadow:none!important;line-height:0;display:block;width:100%;transition:border-color .15s;}
.mac-gal__thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;}
.mac-gal__thumb.is-active{border-color:var(--mac-red)!important;}
.mac-gal__thumb:hover{border-color:var(--mac-red)!important;background:none!important;}
.mac-gal__zoom{cursor:pointer;}
.mac-gal-lb{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:99999;padding:24px;}
.mac-gal-lb.is-open{display:flex;}
.mac-gal-lb img{max-width:92vw;max-height:88vh;border-radius:10px;}
.mac-gal-lb__x{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;}

/* ---- Buy box (price + key specs + CTA) ---- */
.mac-buybox{background:var(--mac-grey1);border:1px solid #e7edf0;border-radius:14px;padding:26px 24px;box-shadow:var(--mac-shadow-small);}
.mac-buybox__price{font-size:30px;font-weight:800;color:var(--mac-red);margin:0 0 18px;}
.mac-buybox__price.is-request{font-size:24px;color:var(--mac-navy);}
.mac-buybox__specs{list-style:none;margin:0 0 22px;padding:0;}
.mac-buybox__specs li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--mac-grey2);font-size:14px;}
.mac-buybox__specs li span:first-child{color:#6a6f75;font-weight:600;}
.mac-buybox__specs li span:last-child{color:var(--mac-navy);font-weight:700;text-align:right;}
.mac-buybox__cta{display:block;width:100%;text-align:center;margin:0 0 12px;}
.mac-buybox__call{margin:0;font-size:14px;color:var(--mac-navy);text-align:center;}
.mac-buybox__call a{color:var(--mac-navy);font-weight:700;}
.mac-specs__h{color:var(--mac-navy);font-size:24px;font-weight:700;margin:0 0 14px;}
.mac-single__price{font-size:30px;font-weight:800;color:var(--mac-red);margin:0 0 20px;}
.mac-single__price.is-request{font-size:23px;color:var(--mac-navy);}
.mac-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 32px;
  margin:0 0 28px;padding:20px 24px;list-style:none;background:var(--mac-grey1);border-radius:var(--mac-radius);}
.mac-specs li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--mac-grey2);padding:10px 0;font-size:14px;}
.mac-specs .mac-spec__label{color:#6a6f75;font-weight:600;}
.mac-specs .mac-spec__val{color:var(--mac-navy);font-weight:700;text-align:right;}
.mac-single h3{color:var(--mac-navy);font-size:24px;font-weight:700;margin:0 0 14px;}
.mac-features{margin:0 0 28px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 24px;}
.mac-features li{position:relative;padding-left:26px;font-size:14px;color:#333;line-height:1.5;}
.mac-features li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--mac-red);font-weight:800;}
.mac-description{font-size:15px;line-height:1.7;margin:0 0 24px;}
.mac-back{display:inline-block;margin-top:4px;color:var(--mac-navy);font-weight:600;text-decoration:none;}
.mac-back:hover{color:var(--mac-red);}

/* Zoho application form embed - frameless: sits flush on the page (no card/box) so the
   focus is the form itself, not a container. Just centered + width-capped. */
.mac-zoho-form{max-width:760px;margin:0 auto;background:transparent;border:none;border-radius:0;box-shadow:none;padding:0;}
.mac-zoho-form iframe{display:block;border-radius:0;}

/* ---- Tablet: featured slider shows 2 cards ---- */
@media (max-width:980px){
  .mac-featured .mac-card{flex:0 0 calc((100% - 26px)/2);}
}

/* ---- Mobile ---- */
@media (max-width:767px){
  .mac-grid{grid-template-columns:1fr;gap:20px;}
  /* One card with a peek of the next so the swipe affordance is obvious. */
  .mac-featured .mac-card{flex:0 0 86%;}
  .mac-slider__track{gap:16px;}
  /* No room for outset arrows on phones; pull them just inside the edges. */
  .mac-featured .mac-slider__nav{width:34px;height:34px;font-size:34px;}
  .mac-slider__nav--prev{left:-6px;}
  .mac-slider__nav--next{right:-6px;}
  .mac-filter{padding:16px;gap:12px;}
  .mac-filter .mac-field{flex:1 1 100%;min-width:0;}
  .mac-filter .mac-actions{width:100%;}
  .mac-filter .mac-actions .mac-btn{flex:1;text-align:center;}
  .mac-single__title{font-size:28px;}
  .mac-single__price{font-size:26px;}
  .mac-specs{grid-template-columns:1fr;padding:16px 18px;}
  .mac-features{grid-template-columns:1fr;}
}