/*
Theme Name: CRYSOUND
Theme URI: https://www.crysound.com/
Author: CRYSOUND
Author URI: https://www.crysound.com/
Description: Hand-built WordPress theme for a pet supplies inquiry site — apparel, carriers, beds, toys, litter and smart pet products. Custom product post type, no WooCommerce required.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crysound
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready
*/

:root{
  /* Palette (from target design tokens) */
  --cs-primary:#180057;--cs-primary-2:#61528D;--cs-gray:#999;--cs-ink:#192a3d;
  --cs-bg-1:#f4f4f5;--cs-bg-2:#F9F9FA;--cs-bg-3:#FAFBFC;--cs-white:#fff;
  --cs-text:#333;--cs-heading:#333;--cs-muted:#69727d;--cs-border:#eee;
  --cs-link:#333;--cs-link-hover:#170057;--cs-danger:#ef4444;
  --cs-footer-bg:#ECEBF2;

  /* Typography */
  --cs-font:"HarmonyOS","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cs-fw-body:400;--cs-fw-medium:500;--cs-fw-bold:600;
  --cs-lh:1.65;

  /* Type scale (px values seen in tokens) */
  --cs-fs-xs:12px;--cs-fs-sm:13px;--cs-fs-cap:14px;--cs-fs-base:16px;--cs-fs-md:18px;
  --cs-fs-lg:20px;--cs-fs-h3:24px;--cs-fs-h2:40px;--cs-fs-h1:42px;

  /* Layout */
  --cs-container:1200px;--cs-container-narrow:750px;--cs-gutter:20px;--cs-section-y:56px;

  /* Spacing scale */
  --cs-sp-1:4px;--cs-sp-2:8px;--cs-sp-3:12px;--cs-sp-4:16px;--cs-sp-5:24px;--cs-sp-6:40px;--cs-sp-7:56px;

  /* Radius / shadow / motion */
  --cs-radius:4px;--cs-radius-lg:8px;
  --cs-shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --cs-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --cs-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --cs-transition:all .2s cubic-bezier(.455,.03,.515,.955);
  --cs-btn-min-h:40px;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cs-white);color:var(--cs-text);font-family:var(--cs-font);font-size:var(--cs-fs-base);font-weight:var(--cs-fw-body);line-height:var(--cs-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--cs-link);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--cs-link-hover)}
p{margin:0 0 var(--cs-sp-4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}

h1,h2,h3,h4,h5,h6{margin:0 0 var(--cs-sp-4);color:var(--cs-heading);font-weight:var(--cs-fw-bold);line-height:1.25}
h1,.cs-h1{font-size:var(--cs-fs-h1)}
h2,.cs-h2{font-size:var(--cs-fs-h2)}
h3,.cs-h3{font-size:var(--cs-fs-h3)}
h4,.cs-h4{font-size:var(--cs-fs-md)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:1rem;left:1rem;z-index:9999;width:auto;height:auto;padding:1rem 1.5rem;clip:auto;background:var(--cs-white);color:var(--cs-primary);border:2px solid var(--cs-primary)}

/* =========================================================
   LAYOUT
   ========================================================= */
.cs-container{width:100%;max-width:var(--cs-container);margin-inline:auto;padding-inline:var(--cs-gutter)}
.cs-container--narrow{max-width:var(--cs-container-narrow)}
.cs-section{padding-block:var(--cs-section-y)}
.cs-section__head{margin-bottom:var(--cs-sp-6);text-align:center}
.cs-section__title{margin:0 0 var(--cs-sp-3)}
.cs-section__subtitle{margin:0;color:var(--cs-muted);font-size:var(--cs-fs-md)}
.cs-eyebrow{display:block;margin-bottom:var(--cs-sp-2);color:var(--cs-primary-2);font-size:var(--cs-fs-sm);font-weight:var(--cs-fw-bold);letter-spacing:.08em;text-transform:uppercase}

/* =========================================================
   BUTTONS
   ========================================================= */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cs-sp-2);min-height:var(--cs-btn-min-h);padding:5px 20px;font-size:15px;font-weight:var(--cs-fw-medium);color:var(--cs-white);background:var(--cs-primary);border:none;border-radius:var(--cs-radius);text-align:center;transition:var(--cs-transition)}
.cs-btn:hover{color:var(--cs-white);background:var(--cs-primary-2)}
.cs-btn--outline{color:var(--cs-primary);background:transparent;border:1px solid var(--cs-primary)}
.cs-btn--outline:hover{color:var(--cs-white);background:var(--cs-primary)}
.cs-btn--ghost{color:var(--cs-primary);background:transparent;padding-inline:0}
.cs-btn--ghost:hover{color:var(--cs-primary-2);background:transparent}

/* =========================================================
   HEADER
   ========================================================= */
.cs-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--cs-border)}
.cs-header__inner{display:flex;align-items:center;gap:var(--cs-sp-6);min-height:64px}
.cs-header__brand{flex:0 0 auto;display:flex;align-items:center}
.cs-header__brand img,.cs-header .custom-logo{max-height:40px;width:auto}
.cs-header__logo-text{font-size:var(--cs-fs-lg);font-weight:var(--cs-fw-bold);color:var(--cs-primary)}
.cs-header__nav{flex:1 1 auto;display:flex;justify-content:center}
.cs-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--cs-sp-4)}

.cs-menu{display:flex;align-items:center;gap:var(--cs-sp-6);list-style:none}
.cs-menu a{display:inline-flex;align-items:center;height:64px;font-size:var(--cs-fs-cap);font-weight:var(--cs-fw-medium);color:var(--cs-text)}
.cs-menu a:hover{color:var(--cs-primary)}
.cs-menu .current-menu-item>a{color:var(--cs-primary)}

.cs-header__toggle{display:none;flex-direction:column;gap:5px;width:40px;height:40px;padding:9px;background:transparent;border:none}
.cs-header__toggle span{display:block;height:2px;width:100%;background:var(--cs-primary);border-radius:2px;transition:var(--cs-transition)}

/* =========================================================
   HERO
   ========================================================= */
.cs-hero{position:relative;background:var(--cs-bg-1)}
.cs-hero__viewport{position:relative;overflow:hidden}
.cs-hero__track{display:flex;transition:transform .5s cubic-bezier(.455,.03,.515,.955)}
.cs-hero__slide{position:relative;flex:0 0 100%;min-height:clamp(360px,42vw,540px);display:flex;align-items:center}
.cs-hero__media{position:absolute;inset:0;z-index:0}
.cs-hero__media img{width:100%;height:100%;object-fit:cover}
.cs-hero__slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(24,0,87,.72) 0%,rgba(24,0,87,.35) 55%,rgba(24,0,87,.05) 100%)}
.cs-hero__content{position:relative;z-index:2;width:100%;color:#fff}
.cs-hero__title{margin:0 0 var(--cs-sp-4);color:#fff;font-size:clamp(28px,3.4vw,42px);max-width:16ch}
.cs-hero__subtitle{margin:0 0 var(--cs-sp-5);color:rgba(255,255,255,.9);font-size:var(--cs-fs-lg);max-width:40ch}
.cs-hero__cta{background:#fff;color:var(--cs-primary)}
.cs-hero__cta:hover{background:var(--cs-primary-2);color:#fff}

.cs-hero__nav{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:var(--cs-primary);background:var(--cs-white);border:1px solid var(--cs-border);border-radius:50%;transition:var(--cs-transition)}
.cs-hero__nav:hover{color:#fff;background:var(--cs-primary);border-color:var(--cs-primary)}

/* ---- Hero thumbnail navigation (below slides) ---- */
.cs-hero__thumbs-wrap{display:flex;align-items:center;gap:var(--cs-sp-3);padding-block:var(--cs-sp-4)}
.cs-hero__thumbs{flex:1 1 auto;display:flex;justify-content:center;gap:var(--cs-sp-3);list-style:none;overflow-x:auto}
.cs-hero__thumb{flex:0 0 auto}
.cs-hero__thumb button{display:block;width:96px;height:64px;padding:4px;background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius);cursor:pointer;transition:var(--cs-transition)}
.cs-hero__thumb button:hover{border-color:var(--cs-primary-2)}
.cs-hero__thumb.is-active button{border-color:var(--cs-primary);box-shadow:0 0 0 1px var(--cs-primary)}
.cs-hero__thumb img{width:100%;height:100%;object-fit:contain}
.cs-hero__thumb-ph{display:block;width:100%;height:100%;background:var(--cs-bg-1)}

/* =========================================================
   FLOATING SIDE PANEL
   ========================================================= */
.cs-floatbar{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:95}
.cs-floatbar{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:900}
.cs-floatbar__list{list-style:none;display:flex;flex-direction:column;background:var(--cs-white);border:1px solid var(--cs-border);border-right:none;border-radius:var(--cs-radius) 0 0 var(--cs-radius);box-shadow:var(--cs-shadow);overflow:hidden}
.cs-floatbar__item+.cs-floatbar__item{border-top:1px solid var(--cs-border)}
.cs-floatbar__link{display:flex;align-items:center;gap:10px;padding:12px 20px;color:var(--cs-primary);white-space:nowrap;transition:background .2s}
.cs-floatbar__link:hover{background:var(--cs-bg-2)}
.cs-floatbar__icon{width:24px;height:24px;flex-shrink:0}
.cs-floatbar__icon svg{width:100%;height:100%}
.cs-floatbar__label{font-size:var(--cs-fs-sm);color:var(--cs-text);font-weight:500}
.cs-floatbar__item + .cs-floatbar__item{border-top:1px solid var(--cs-border)}
.cs-floatbar__link{display:flex;align-items:center;justify-content:flex-start;gap:var(--cs-sp-2);height:44px;padding-right:var(--cs-sp-4);color:var(--cs-primary);background:var(--cs-white);white-space:nowrap;transition:var(--cs-transition)}
.cs-floatbar__icon{flex:0 0 44px;display:flex;align-items:center;justify-content:center}
.cs-floatbar__icon svg{width:20px;height:20px}
.cs-floatbar__label{font-size:var(--cs-fs-cap)}
.cs-floatbar__link:hover{color:#fff;background:var(--cs-primary)}

/* =========================================================
   LIVE CHAT BUTTON
   ========================================================= */
.cs-chat-btn{position:fixed;right:22px;bottom:22px;z-index:96;width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--cs-primary);border-radius:50%;box-shadow:var(--cs-shadow-lg);transition:var(--cs-transition)}
.cs-chat-btn:hover{color:#fff;background:var(--cs-primary-2);transform:translateY(-2px)}
.cs-chat-btn svg{width:26px;height:26px}

/* =========================================================
   PRODUCTS (WooCommerce grid + placeholder)
   ========================================================= */
.cs-products--featured{background:var(--cs-bg-2)}
.cs-placeholder{padding:var(--cs-sp-6);text-align:center;color:var(--cs-muted);background:var(--cs-bg-1);border:1px dashed var(--cs-border);border-radius:var(--cs-radius-lg)}
.cs-products .woocommerce ul.products,.cs-products__grid ul.products{display:grid;gap:var(--cs-sp-5);margin:0;padding:0;list-style:none}
.cs-products ul.products li.product{margin:0;width:auto;float:none;text-align:left}
.cs-products ul.products li.product img{border-radius:var(--cs-radius);margin-bottom:var(--cs-sp-3)}
.cs-products ul.products li.product .woocommerce-loop-product__title{font-size:var(--cs-fs-cap);font-weight:var(--cs-fw-medium);color:var(--cs-text);padding:0}
.cs-products ul.products li.product .price{color:var(--cs-primary);font-weight:var(--cs-fw-bold)}
.cs-products .cs-products__grid > ul.products{grid-template-columns:repeat(5,1fr)}
.cs-products--featured .cs-products__grid > ul.products{grid-template-columns:repeat(4,1fr)}

/* ---- CPT product grid (inquiry site, no WooCommerce) ---- */
.cs-product-list{display:grid;gap:var(--cs-sp-5);margin:0;padding:0;list-style:none}
.cs-product-list--cols-5{grid-template-columns:repeat(5,1fr)}
.cs-product-list--cols-4{grid-template-columns:repeat(4,1fr)}
.cs-product-list--cols-3{grid-template-columns:repeat(3,1fr)}
.cs-product-card{margin:0}
.cs-product-card.is-hidden{display:none}
.cs-product-card__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cs-bg-1);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg)}
.cs-product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.cs-product-card__media:hover img{transform:scale(1.04)}
.cs-product-card__placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--cs-bg-1),var(--cs-bg-3))}
.cs-product-card__body{padding-top:var(--cs-sp-3)}
.cs-product-card__cat{display:block;margin-bottom:var(--cs-sp-1);font-size:var(--cs-fs-xs);color:var(--cs-primary-2);text-transform:uppercase;letter-spacing:.06em}
.cs-product-card__title{margin:0 0 var(--cs-sp-2);font-size:var(--cs-fs-cap);font-weight:var(--cs-fw-medium)}
.cs-product-card__title a{color:var(--cs-heading)}
.cs-product-card__title a:hover{color:var(--cs-primary)}
.cs-product-card__excerpt{margin:0 0 var(--cs-sp-2);font-size:var(--cs-fs-sm);color:var(--cs-muted)}
.cs-product-card__more{font-size:var(--cs-fs-sm);font-weight:var(--cs-fw-medium);color:var(--cs-primary)}

/* ---- Filter bar ---- */
.cs-product-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cs-sp-2);margin-bottom:var(--cs-sp-6)}
.cs-product-filter__btn{padding:8px 18px;font-size:var(--cs-fs-cap);color:var(--cs-text);background:var(--cs-bg-1);border:1px solid var(--cs-border);border-radius:999px;transition:var(--cs-transition)}
.cs-product-filter__btn.is-active,.cs-product-filter__btn:hover{background:var(--cs-primary);color:var(--cs-white);border-color:var(--cs-primary)}
.cs-product-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--cs-sp-6)}
.cs-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cs-sp-5)}
.cs-product-card{background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg);overflow:hidden;transition:var(--cs-transition)}
.cs-product-card:hover{box-shadow:var(--cs-shadow-lg);transform:translateY(-2px)}
.cs-product-card__image{display:block;aspect-ratio:4/3;overflow:hidden}
.cs-product-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.cs-product-card__placeholder{display:block;width:100%;height:100%;background:var(--cs-bg-2)}
.cs-product-card__info{padding:var(--cs-sp-3)}
.cs-product-card__cat{font-size:var(--cs-fs-cap);color:var(--cs-primary);text-transform:uppercase;letter-spacing:.04em}
.cs-product-card__title{font-size:var(--cs-fs-base);font-weight:var(--cs-fw-medium);margin-top:4px}
.cs-product-card__title a{color:var(--cs-heading)}
.cs-product-card__title a:hover{color:var(--cs-primary)}
.cs-product-archive{padding:var(--cs-sp-8) 0}
@media(max-width:768px){.cs-product-grid{grid-template-columns:repeat(2,1fr)}}
.cs-product-filter__btn:hover{color:var(--cs-primary);border-color:var(--cs-primary)}
.cs-product-filter__btn.is-active{color:#fff;background:var(--cs-primary);border-color:var(--cs-primary)}

/* ---- Single product ---- */
.cs-product-single__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--cs-sp-6);align-items:start}
.cs-product-single__media img,.cs-product-single__media .cs-product-card__placeholder{width:100%;border-radius:var(--cs-radius-lg);aspect-ratio:4/3;object-fit:cover}

/* ---- Product gallery (main image + thumbnails) ---- */
.cs-gallery__stage{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-white);border:1px solid var(--cs-border)}
.cs-gallery__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .3s ease}
.cs-gallery__slide.is-active{opacity:1;visibility:visible}
.cs-gallery__slide img{width:100%;height:100%;border-radius:0;aspect-ratio:auto;object-fit:cover}
.cs-gallery__thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--cs-sp-2);margin:var(--cs-sp-3) 0 0;padding:0}
.cs-gallery__thumb{flex:0 0 auto}
.cs-gallery__thumb button{display:block;padding:0;width:72px;height:72px;background:var(--cs-white);border:2px solid var(--cs-border);border-radius:var(--cs-radius);overflow:hidden;cursor:pointer;transition:border-color .2s ease}
.cs-gallery__thumb button img{width:100%;height:100%;border-radius:0;aspect-ratio:auto;object-fit:cover}
.cs-gallery__thumb button:hover{border-color:var(--cs-primary-2)}
.cs-gallery__thumb.is-active button{border-color:var(--cs-primary)}

/* ---- Product gallery meta box (admin) ---- */
.crysound-gallery__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.crysound-gallery__item{position:relative;width:60px;height:60px;border:1px solid #ddd;border-radius:4px;overflow:hidden;cursor:move}
.crysound-gallery__item img{width:100%;height:100%;object-fit:cover;display:block}
.crysound-gallery__remove{position:absolute;top:0;right:0;width:18px;height:18px;line-height:16px;padding:0;text-align:center;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:0 0 0 4px;cursor:pointer}
.cs-product-single__cat{display:block;margin-bottom:var(--cs-sp-2);color:var(--cs-primary-2);font-size:var(--cs-fs-sm);text-transform:uppercase;letter-spacing:.06em}
.cs-product-single__title{margin:0 0 var(--cs-sp-4);font-size:var(--cs-fs-h2)}
.cs-product-single__excerpt{margin-bottom:var(--cs-sp-5);color:var(--cs-muted);font-size:var(--cs-fs-md)}
.cs-product-single__content{margin-top:var(--cs-sp-7)}
.cs-products--related{background:var(--cs-bg-2)}

/* =========================================================
   PRODUCT LINES
   ========================================================= */
.cs-lines__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--cs-sp-5);list-style:none}
.cs-lines__link{display:flex;flex-direction:column;align-items:center;gap:var(--cs-sp-3);padding:0;text-align:center;background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg);transition:var(--cs-transition);overflow:hidden}
.cs-lines__link:hover{box-shadow:var(--cs-shadow-lg);transform:translateY(-2px)}

/* ---- Dropdown sub-menu ---- */
.cs-menu--primary>li{position:relative}
.cs-menu--primary .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:200px;padding:8px 0;background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius);box-shadow:var(--cs-shadow-lg);z-index:100;list-style:none}
.cs-menu--primary>li:hover>.sub-menu{display:block}
.cs-menu--primary .sub-menu a{display:block;padding:8px 20px;color:var(--cs-text);font-size:var(--cs-fs-sm);white-space:nowrap}
.cs-menu--primary .sub-menu a:hover{background:var(--cs-bg-2);color:var(--cs-primary)}
.cs-lines__media{display:flex;align-items:center;justify-content:center;width:100%;height:150px}
.cs-lines__media img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain}
.cs-lines__media img{max-height:96px;width:auto}
.cs-lines__name{font-size:var(--cs-fs-md);font-weight:var(--cs-fw-medium);color:var(--cs-heading)}

/* =========================================================
   SOLUTIONS
   ========================================================= */
.cs-solutions{background:var(--cs-bg-1)}
.cs-solutions__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cs-sp-5);list-style:none}
.cs-solutions__card{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:var(--cs-sp-5);overflow:hidden;color:#fff;background:var(--cs-primary);border-radius:var(--cs-radius-lg)}
.cs-solutions__media{position:absolute;inset:0;z-index:0}
.cs-solutions__media img{width:100%;height:100%;object-fit:cover}
.cs-solutions__card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,0,87,0) 30%,rgba(24,0,87,.85) 100%)}
.cs-solutions__title{position:relative;z-index:2;font-size:var(--cs-fs-md);font-weight:var(--cs-fw-bold);color:#fff}

/* =========================================================
   BLOGS
   ========================================================= */
.cs-blogs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cs-sp-5);list-style:none}
.cs-blogs__card{display:flex;flex-direction:column;height:100%;background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg);overflow:hidden;transition:var(--cs-transition)}
.cs-blogs__card:hover{box-shadow:var(--cs-shadow-lg);transform:translateY(-2px)}
.cs-blogs__media{display:block;aspect-ratio:16/10;background:var(--cs-bg-1);overflow:hidden}
.cs-blogs__media img{width:100%;height:100%;object-fit:cover}
.cs-blogs__body{display:flex;flex-direction:column;gap:var(--cs-sp-2);padding:var(--cs-sp-4)}
.cs-blogs__date{font-size:var(--cs-fs-xs);color:var(--cs-muted)}
.cs-blogs__title{font-size:var(--cs-fs-cap);font-weight:var(--cs-fw-medium);color:var(--cs-heading);line-height:1.4}

/* =========================================================
   FOOTER
   ========================================================= */
.cs-footer{background:var(--cs-footer-bg);padding-block:var(--cs-sp-6) var(--cs-sp-5);margin-top:var(--cs-sp-7)}
.cs-footer__top{display:grid;grid-template-columns:1.4fr 2.6fr;gap:var(--cs-sp-6)}
.cs-footer__tagline{margin:0 0 var(--cs-sp-3);font-size:var(--cs-fs-h3);color:var(--cs-primary)}
.cs-footer__about{color:var(--cs-muted);font-size:var(--cs-fs-cap);max-width:42ch}
.cs-footer__email a{color:var(--cs-primary);font-weight:var(--cs-fw-medium)}
.cs-footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cs-sp-5)}
.cs-footer__col-title{margin:0 0 var(--cs-sp-3);font-size:var(--cs-fs-cap);font-weight:var(--cs-fw-bold);color:var(--cs-heading)}
.cs-footer__menu{list-style:none;display:flex;flex-direction:column;gap:var(--cs-sp-2)}
.cs-footer__menu a{font-size:var(--cs-fs-cap);color:var(--cs-muted)}
.cs-footer__menu a:hover{color:var(--cs-primary)}
.cs-footer__bottom{margin-top:var(--cs-sp-5);padding-top:var(--cs-sp-4);border-top:1px solid rgba(0,0,0,.08)}
.cs-footer__copy{margin:0;font-size:var(--cs-fs-sm);color:var(--cs-muted)}

/* =========================================================
   BLOG LIST (index/archive)
   ========================================================= */
.cs-post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cs-sp-5)}
.cs-post-card{background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius-lg);overflow:hidden}
.cs-section__head--left{text-align:left}

/* ---- Article / Page ---- */
.cs-article-wrap,.cs-page-wrap{max-width:820px;margin-inline:auto}
.cs-article__title,.cs-page__title{margin:0 0 var(--cs-sp-3);font-size:var(--cs-fs-h2)}
.cs-article__meta{display:flex;flex-wrap:wrap;gap:var(--cs-sp-3);margin-bottom:var(--cs-sp-5);color:var(--cs-muted);font-size:var(--cs-fs-sm)}
.cs-article__meta a{color:var(--cs-muted)}
.cs-article__meta a:hover{color:var(--cs-primary)}
.cs-article__media,.cs-page__media{margin:0 0 var(--cs-sp-6)}
.cs-article__media img,.cs-page__media img{width:100%;border-radius:var(--cs-radius-lg)}
.cs-article__content,.cs-page__content{font-size:var(--cs-fs-md);line-height:1.8}
.cs-article__content h2,.cs-page__content h2{margin-top:var(--cs-sp-6)}
.cs-article__content h3,.cs-page__content h3{margin-top:var(--cs-sp-5)}
.cs-article__content img{border-radius:var(--cs-radius)}
.cs-article__content blockquote{margin:var(--cs-sp-5) 0;padding-left:var(--cs-sp-5);border-left:3px solid var(--cs-primary);color:var(--cs-muted)}
.cs-article__foot{margin-top:var(--cs-sp-6);padding-top:var(--cs-sp-4);border-top:1px solid var(--cs-border);font-size:var(--cs-fs-sm)}
.cs-article__tags a{display:inline-block;margin-right:var(--cs-sp-2);color:var(--cs-primary-2)}

/* ---- Search form ---- */
.cs-searchform{display:flex;gap:var(--cs-sp-2);max-width:480px}
.cs-searchform__input{flex:1 1 auto;height:44px;padding:0 var(--cs-sp-4);border:1px solid var(--cs-border);border-radius:var(--cs-radius);background:var(--cs-white)}
.cs-searchform__input:focus{outline:none;border-color:var(--cs-primary)}
.cs-searchform__btn{flex:0 0 auto;height:44px;padding:0 var(--cs-sp-5);color:#fff;background:var(--cs-primary);border:none;border-radius:var(--cs-radius);font-weight:var(--cs-fw-medium)}
.cs-searchform__btn:hover{background:var(--cs-primary-2)}

/* ---- 404 ---- */
.cs-404{text-align:center;max-width:620px;margin-inline:auto}
.cs-404__code{margin:0;font-size:clamp(80px,14vw,160px);line-height:1;color:var(--cs-primary);opacity:.15}
.cs-404__title{margin:0 0 var(--cs-sp-3);font-size:var(--cs-fs-h3)}
.cs-404__text{margin:0 0 var(--cs-sp-5);color:var(--cs-muted)}
.cs-404__search{display:flex;justify-content:center;margin-top:var(--cs-sp-6)}
.cs-404__search .cs-searchform{margin-inline:auto}

/* ---- Pagination ---- */
.pagination,.nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cs-sp-2);margin-top:var(--cs-sp-6)}
.pagination .page-numbers,.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;color:var(--cs-text);background:var(--cs-white);border:1px solid var(--cs-border);border-radius:var(--cs-radius)}
.pagination .page-numbers.current,.nav-links .page-numbers.current{color:#fff;background:var(--cs-primary);border-color:var(--cs-primary)}
.pagination a.page-numbers:hover,.nav-links a.page-numbers:hover{border-color:var(--cs-primary);color:var(--cs-primary)}
.cs-post-card__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cs-post-card__body{padding:var(--cs-sp-4)}
.cs-post-card__title{margin:0 0 var(--cs-sp-2)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .cs-products .cs-products__grid > ul.products{grid-template-columns:repeat(3,1fr)}
  .cs-products--featured .cs-products__grid > ul.products,.cs-solutions__grid,.cs-blogs__grid{grid-template-columns:repeat(2,1fr)}
  .cs-product-list--cols-5,.cs-product-list--cols-4{grid-template-columns:repeat(3,1fr)}
  .cs-lines__grid{grid-template-columns:repeat(3,1fr)}
  .cs-logos__grid{grid-template-columns:repeat(3,1fr)}
  .cs-footer__top{grid-template-columns:1fr}
  .cs-product-single__grid{grid-template-columns:1fr}
}
@media(max-width:782px){
  .cs-floatbar{display:none}
  .cs-hero__thumb button{width:72px;height:48px}
  .cs-chat-btn{width:48px;height:48px;right:16px;bottom:16px}
  .cs-header__nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:#fff;border-bottom:1px solid var(--cs-border);padding:var(--cs-sp-4) var(--cs-gutter);transform:translateY(-140%);transition:transform .3s ease;box-shadow:var(--cs-shadow)}
  .cs-header__nav.is-open{transform:translateY(0)}
  .cs-menu{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .cs-menu a{height:auto;padding-block:12px;width:100%}
  .cs-header__toggle{display:flex}
  .cs-header__cta{display:none}
  .cs-post-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cs-products .cs-products__grid > ul.products,.cs-products--featured .cs-products__grid > ul.products,.cs-solutions__grid,.cs-blogs__grid,.cs-lines__grid,.cs-footer__cols,.cs-logos__grid,.cs-product-list--cols-5,.cs-product-list--cols-4,.cs-product-list--cols-3{grid-template-columns:repeat(2,1fr)}
  .cs-section{padding-block:var(--cs-sp-6)}
}