/* ================================================================
   COC MARKET NATIVE — PREMIUM CATEGORY LANDINGS v1.4
   Four product_cat landings; isolated to .cmn-cl-main.
   Browsers/reviews retain their own independent Code Snippets styles.
   ================================================================ */
.cmn-cl-main {--cl-orange:#f97316;--cl-ink:#20323f;--cl-muted:#687984;--cl-line:#e1e7eb;min-width:0;padding:7px 0 75px;color:var(--cl-ink)}
.cmn-cl-main,.cmn-cl-main *,.cmn-cl-main *::before,.cmn-cl-main *::after{box-sizing:border-box}
.cmn-cl-main .cmn-cl-wrap{width:min(1390px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.cmn-cl-main a{text-decoration:none}
.cmn-cl-main img{max-width:100%;height:auto}
.cmn-cl-main :is(a,button,summary):focus-visible{outline:3px solid rgba(249,115,22,.55);outline-offset:3px}
.cmn-cl-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:12px 5px 21px;font-size:11.5px;line-height:1.4;font-weight:680;color:#b95a1b}
.cmn-cl-breadcrumbs a{color:#6b7e89!important;transition:color .2s}
.cmn-cl-breadcrumbs a:hover{color:#b85115!important}
.cmn-cl-breadcrumbs>span[aria-hidden]{font-weight:500;color:#aeb9c1}

/* The category hero now comes directly from template-parts/home-hero.php,
   sharing ALL the homepage hero selectors in assets/css/theme.css. */

/* Existing browser: already contains its own heading, product cards and Ajax filter. */
.cmn-cl-browser{padding-top:66px;padding-bottom:4px;scroll-margin-top:125px}
.cmn-cl-browser>.cmktpb-browser{max-width:100%;margin-inline:auto}
.cmn-cl-browser-fallback{display:grid;grid-template-columns:1fr auto;gap:12px 22px;align-items:center;border:1px solid var(--cl-line);border-radius:19px;padding:34px;background:#fff}
.cmn-cl-browser-fallback h2{margin:10px 0!important;font-size:29px;letter-spacing:-.04em}
.cmn-cl-browser-fallback p{margin:0!important;color:var(--cl-muted)!important;font-size:13px!important}
.cmn-cl-browser-fallback-actions a{display:inline-flex;padding:13px 16px;border-radius:10px;background:#fff0e6;color:#bb4d0d;font-size:12px;font-weight:850}
.cmn-cl-native-fallback{grid-column:1/-1}

/* Category-specific FAQs */
.cmn-cl-faq{padding-top:72px;padding-bottom:20px}
.cmn-cl-section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:25px}
.cmn-cl-overline{display:inline-flex;align-items:center;gap:9px;color:#ca6019;font-size:10px;font-weight:900;letter-spacing:.15em;line-height:1.5}
.cmn-cl-overline::before{content:"";width:21px;height:3px;border-radius:3px;background:var(--cl-orange)}
.cmn-cl-section-head h2{margin:12px 0 0!important;color:#203340!important;font-size:clamp(32px,3.25vw,45px)!important;letter-spacing:-.048em!important;line-height:1.1!important;font-weight:850!important}
.cmn-cl-section-head h2 span{color:var(--cl-orange)}
.cmn-cl-section-head>p{flex:0 1 390px;margin:0 0 4px!important;color:#748390!important;font-size:13px!important;line-height:1.7!important}
.cmn-cl-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:13px 16px}
.cmn-cl-faq-card{min-width:0;border:1px solid #e0e7eb;border-radius:15px;background:#fff;box-shadow:0 10px 21px rgba(28,45,55,.032);overflow:hidden}
.cmn-cl-faq-card[open]{border-color:#ffcaa7;box-shadow:0 12px 26px rgba(207,88,18,.075)}
.cmn-cl-faq-card>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:79px;list-style:none;padding:18px 20px 18px 22px;cursor:pointer}
.cmn-cl-faq-card>summary::-webkit-details-marker{display:none}
.cmn-cl-faq-card>summary strong{flex:1;color:#253a47;font-size:13.3px;font-weight:790;line-height:1.48;transition:color .18s}
.cmn-cl-faq-card>summary:hover strong{color:#bc5415}
.cmn-cl-faq-plus{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:#fff1e8;color:#c75d18}
.cmn-cl-faq-plus::before,.cmn-cl-faq-plus::after{content:"";position:absolute;width:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .19s ease}
.cmn-cl-faq-plus::after{transform:rotate(90deg)}
.cmn-cl-faq-card[open] .cmn-cl-faq-plus{background:#f97316;color:#fff}
.cmn-cl-faq-card[open] .cmn-cl-faq-plus::after{transform:rotate(0)}
.cmn-cl-faq-answer{padding:0 22px 19px}
.cmn-cl-faq-answer p{padding-top:17px!important;margin:0!important;border-top:1px solid #edf0f2;color:#637480!important;font-size:12.8px!important;line-height:1.85!important}
.cmn-cl-faq-more{display:flex;justify-content:center;padding-top:27px}
.cmn-cl-faq-more a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #fcd0b2;border-radius:11px;background:#fff;color:#b65718!important;font-size:12px;font-weight:830;transition:background .2s,border-color .2s}
.cmn-cl-faq-more a:hover{background:#fff2e9;border-color:#f6ab79}
.cmn-cl-faq-more a span{font-size:18px;line-height:0}

/* Reuse the existing reviews shortcode with no cloned testimonials. */
.cmn-cl-reviews{padding-top:85px;padding-bottom:30px}
.cmn-cl-reviews-kicker{margin-bottom:6px}
.cmn-cl-reviews-shortcode{min-width:0}

/* Actual WooCommerce term description, expandable without hiding from the DOM. */
.cmn-cl-description{padding-top:73px;padding-bottom:30px;scroll-margin-top:115px}
.cmn-cl-description-frame{padding:39px clamp(26px,4vw,55px) 38px;border:1px solid #dfe6eb;border-radius:24px;background:#fff;box-shadow:0 14px 29px rgba(20,45,59,.045)}
.cmn-cl-description-head{align-items:center;margin-bottom:19px}
.cmn-cl-description-head h2{max-width:850px;font-size:clamp(29px,3vw,41px)!important}
.cmn-cl-description-mark{flex:0 0 auto;padding:8px 12px;border:1px solid #ffddc7;border-radius:9px;background:#fff5ed;color:#c06323;font-size:10px;font-weight:820;letter-spacing:.065em}
.cmn-cl-description-body{position:relative;min-width:0;overflow:visible;color:#5b6e7b;font-size:14px;line-height:1.95}
.cmn-cl-description-body.is-collapsed{max-height:198px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 68%,transparent 100%);mask-image:linear-gradient(#000 68%,transparent 100%)}
.cmn-cl-description-body p{margin:0 0 17px!important;color:#5b6e7b!important;font-size:14px!important;line-height:1.95!important}
.cmn-cl-description-body :is(h2,h3,h4){color:#233744!important;font-weight:850;letter-spacing:-.03em;margin:20px 0 11px!important}
.cmn-cl-description-body a{color:#bb5315!important;text-decoration:underline!important;text-underline-offset:3px}
.cmn-cl-description-body li{margin:7px 0;color:#5b6e7b}
.cmn-cl-description-toggle{display:inline-flex;align-items:center;gap:12px;margin-top:7px!important;padding:12px 16px!important;border:1px solid #ffcdab!important;border-radius:10px!important;background:#fff3e9!important;color:#b65316!important;font-size:12px!important;font-weight:850!important;line-height:1.3!important;box-shadow:none!important;cursor:pointer!important;transition:background .18s}
.cmn-cl-description-toggle[hidden]{display:none!important}
.cmn-cl-description-toggle:hover,.cmn-cl-description-toggle:focus-visible{background:#ffe5d3!important;color:#9c3b0a!important}
.cmn-cl-description-toggle span{font-size:15px}

/* One shared "From VIN to request" partial for homepage AND category pages. */
.cmn-cl-main .cmn-process-section{padding-top:76px;padding-bottom:32px;scroll-margin-top:115px}
.cmn-cl-main .cmn-process-head h2{max-width:800px}
.cmn-cl-main .cmn-process-head h2 span{color:#f97316}
.cmn-cl-main .cmn-process-head>p{font-size:13px!important;color:#71828b!important}
.cmn-cl-main .cmn-process-steps article{box-shadow:0 9px 20px rgba(22,42,52,.026)}
.cmn-cl-main .cmn-process-media img{width:100%!important;height:100%!important;object-fit:cover}

@media(max-width:1050px){
  .cmn-cl-faq{padding-top:52px}
}
@media(max-width:760px){
  .cmn-cl-main{padding-top:2px;padding-bottom:45px}
  .cmn-cl-main .cmn-cl-wrap{width:calc(100% - 26px)}
  .cmn-cl-breadcrumbs{gap:7px;padding:9px 2px 16px;font-size:10.5px}
  .cmn-cl-browser{padding-top:35px;scroll-margin-top:105px}
  .cmn-cl-section-head{display:block;margin-bottom:20px}
  .cmn-cl-section-head h2{font-size:clamp(30px,7vw,39px)!important}
  .cmn-cl-section-head>p{max-width:650px;margin:13px 0 0!important;font-size:12px!important}
  .cmn-cl-faq{padding-top:43px;padding-bottom:8px}
  .cmn-cl-faq-grid{grid-template-columns:1fr;gap:9px}
  .cmn-cl-faq-card>summary{min-height:67px;padding:15px 16px}
  .cmn-cl-faq-card>summary strong{font-size:12.3px}
  .cmn-cl-faq-answer{padding:0 16px 16px}
  .cmn-cl-faq-answer p{font-size:12px!important}
  .cmn-cl-faq-more{padding-top:21px}
  .cmn-cl-reviews{padding-top:56px;padding-bottom:10px}
  .cmn-cl-description{padding-top:48px;padding-bottom:13px}
  .cmn-cl-description-frame{padding:25px 18px 27px;border-radius:18px}
  .cmn-cl-description-mark{display:none}
  .cmn-cl-description-body p{font-size:12.8px!important;line-height:1.78!important}
  .cmn-cl-description-body.is-collapsed{max-height:185px}
  .cmn-cl-main .cmn-process-section{padding-top:54px;padding-bottom:10px}
}
@media(max-width:390px){
  .cmn-cl-browser-fallback{grid-template-columns:1fr;padding:22px}
}
@media(prefers-reduced-motion:reduce){.cmn-cl-main *,.cmn-cl-main *::before,.cmn-cl-main *::after{scroll-behavior:auto!important;transition:none!important}}