/*
Theme Name: VETOUCH B2B
Theme URI: https://www.vetouch.com/
Author: VETOUCH
Description: Custom B2B theme for VETOUCH audio and charging accessories.
Version: 2.8.0
Text Domain: vetouch-b2b
*/

:root{--b:#1268f3;--n:#07111f;--m:#667085;--l:#e5eaf0;--s:#f6f9fc}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--n);line-height:1.55}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--l);z-index:5}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{width:180px}.menu{display:flex;gap:24px;align-items:center;font-size:14px;font-weight:700}.menu a:hover{color:var(--b)}.btn{display:inline-block;padding:13px 20px;border-radius:8px;background:var(--b);color:white;font-weight:800}.btn2{display:inline-block;padding:12px 20px;border:1px solid #cfd6df;border-radius:8px;font-weight:800}.hero{padding:95px 0;background:linear-gradient(180deg,#fbfdff,#f4f8fc)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.hero h1{font-size:58px;line-height:1.04;letter-spacing:-.04em;margin:12px 0 20px}.hero p{font-size:19px;color:var(--m)}.ey{font-size:13px;color:var(--b);font-weight:800;letter-spacing:.12em}.heroimg{width:100%;max-height:540px;object-fit:contain}section{padding:80px 0}.head{max-width:760px;margin-bottom:35px}.head h2{font-size:40px;line-height:1.1;margin:8px 0 12px}.head p,.muted{color:var(--m)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{border:1px solid var(--l);border-radius:18px;padding:25px;background:#fff}.card h3{margin:8px 0}.soft{background:var(--s)}.dark{background:var(--n);color:#fff}.dark .muted{color:#aab4c2}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{padding:25px;border:1px solid var(--l);border-radius:16px}.num{color:var(--b);font-weight:900;font-size:13px}.productgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product{border:1px solid var(--l);border-radius:18px;overflow:hidden}.product .pic{height:230px;background:#f5f7fa;display:flex;align-items:center;justify-content:center}.product .pic img{max-width:80%;max-height:85%;object-fit:contain}.product .txt{padding:22px}.cta{padding:55px;border-radius:24px;background:linear-gradient(135deg,#0b63f3,#11b8ff);color:white;display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{margin:0;font-size:36px}.cta .btn2{background:white;color:var(--n);border:0}footer{padding:42px 0;border-top:1px solid var(--l)}.foot{display:flex;justify-content:space-between;gap:30px;align-items:center}.foot img{width:160px}.small{font-size:13px;color:var(--m)}form{display:grid;grid-template-columns:1fr 1fr;gap:15px}input,textarea,select{width:100%;padding:14px;border:1px solid #ccd4df;border-radius:8px;font:inherit}textarea{min-height:140px;grid-column:1/-1}.full{grid-column:1/-1}@media(max-width:850px){.menu{display:none}.grid2,.cards,.steps,.productgrid{grid-template-columns:1fr}.hero h1{font-size:42px}.hero{padding:60px 0}.cta,.foot{display:block}.cta .btn2{margin-top:20px}form{grid-template-columns:1fr}.full,textarea{grid-column:auto}}

body.admin-bar header{top:32px}@media(max-width:782px){body.admin-bar header{top:46px}}
.notice-ok{padding:14px;border:1px solid #b7e1c2;border-radius:8px;margin-bottom:18px}.notice-err{padding:14px;border:1px solid #efb3b3;border-radius:8px;margin-bottom:18px}

/* V1.1 homepage category line-art cards */
.category-card{display:flex;flex-direction:column;min-height:390px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.category-card:hover{transform:translateY(-3px);border-color:#c9d9ee;box-shadow:0 12px 28px rgba(7,17,31,.07)}.lineart{height:170px;display:flex;align-items:center;justify-content:center;color:#10233f;margin:-4px 0 8px}.lineart svg{width:100%;height:100%;max-width:245px}.category-card h3{font-size:20px;margin:4px 0 10px}.category-card .muted{margin:0}.card-arrow{margin-top:auto;padding-top:18px;color:var(--b);font-size:28px;line-height:1}@media(max-width:850px){.category-card{min-height:0}.lineart{height:190px}}

.approved-lineart{height:210px;display:flex;align-items:center;justify-content:center;margin:-4px 0 4px;}
.approved-lineart img{width:100%;height:100%;object-fit:contain;display:block;}
@media(max-width:700px){.approved-lineart{height:180px;}}

/* V1.3 HD approved line-art */
.approved-lineart img{
  width:100%;
  height:100%;
  max-width:270px;
  object-fit:contain;
  display:block;
  image-rendering:auto;
}


/* V1.4 — homepage alignment + category-card QC
   Keep every homepage module on one shared content axis. */
:root{
  --site-max:1180px;
  --site-gutter:40px;
}

/* Explicitly reassert the shared content container after WordPress/plugin CSS. */
body .wrap{
  width:calc(100% - var(--site-gutter)) !important;
  max-width:var(--site-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Keep homepage sections aligned and prevent category grid overflow. */
.home main > section{
  width:100%;
  overflow:clip;
}
.home .head,
.home .category-cards,
.home .cta{
  width:100%;
  margin-left:0;
  margin-right:0;
}
.home .category-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

/* A consistent card anatomy: image stage / title / copy / arrow. */
.home .category-card{
  min-width:0;
  min-height:420px;
  padding:22px 22px 20px;
  display:grid;
  grid-template-rows:190px auto 1fr auto;
  align-content:stretch;
  border-radius:18px;
  overflow:hidden;
}
.home .category-card .approved-lineart{
  height:190px !important;
  width:100%;
  margin:0 0 8px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home .category-card .approved-lineart img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:235px !important;
  max-height:170px !important;
  object-fit:contain;
  object-position:center center;
}
.home .category-card h3{
  min-height:31px;
  margin:4px 0 10px;
  font-size:20px;
  line-height:1.25;
}
.home .category-card .muted{
  margin:0;
  line-height:1.55;
}
.home .category-card .card-arrow{
  align-self:end;
  margin-top:14px;
  padding-top:0;
  font-size:25px;
}

/* Preserve vertical rhythm between the category block and neighboring modules. */
.home section{
  padding-top:78px;
  padding-bottom:78px;
}
.home .head{
  margin-bottom:32px;
}

/* Tablet: 2 x 2 instead of an over-wide four-column row. */
@media (max-width:980px){
  body .wrap{
    width:calc(100% - 32px) !important;
  }
  .home .category-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile: one clean card per row. */
@media (max-width:620px){
  body .wrap{
    width:calc(100% - 28px) !important;
  }
  .home section{
    padding-top:58px;
    padding-bottom:58px;
  }
  .home .category-cards{
    grid-template-columns:1fr;
    gap:14px;
  }
  .home .category-card{
    min-height:0;
    grid-template-rows:170px auto auto auto;
    padding:20px;
  }
  .home .category-card .approved-lineart{
    height:170px !important;
  }
  .home .category-card .approved-lineart img{
    max-width:220px !important;
    max-height:155px !important;
  }
}


/* V1.5 — full homepage alignment
   One shared left/right axis for Hero, Product Categories, Why VETOUCH, and CTA. */

:root{
  --home-max: 1460px;
  --home-side: 72px;
}

/* Universal homepage content frame */
.home .home-frame,
.home .wrap,
.home .hero .wrap,
.home .product-categories .wrap,
.home .why-vetouch .wrap,
.home .cta .wrap{
  width: calc(100% - (var(--home-side) * 2)) !important;
  max-width: var(--home-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Normalize section outer spacing */
.home .hero,
.home .product-categories,
.home .why-vetouch,
.home .cta-section{
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Product categories must align to same axis and never shift right */
.home .product-categories .head,
.home .product-categories .category-cards{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Why VETOUCH same axis */
.home .why-vetouch .head,
.home .why-vetouch .feature-grid{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* CTA same axis */
.home .cta,
.home .cta-box,
.home .start-project{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Hero same axis; keep image/text composition internal only */
.home .hero .hero-grid,
.home .hero .hero-inner{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Desktop product card grid */
.home .category-cards{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Feature cards mirror product-card spacing */
.home .feature-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Keep all four sections visually centered in the same content column */
@media (min-width: 1200px){
  .home .hero .wrap,
  .home .product-categories .wrap,
  .home .why-vetouch .wrap,
  .home .cta-section .wrap{
    width: min(calc(100% - 144px), var(--home-max)) !important;
  }
}

/* Tablet */
@media (max-width: 1199px){
  :root{
    --home-side: 40px;
  }
  .home .category-cards,
  .home .feature-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 700px){
  :root{
    --home-side: 20px;
  }
  .home .category-cards,
  .home .feature-grid{
    grid-template-columns: 1fr !important;
  }
}


/* V1.8 — Hero product image scale/position balance
   Do not alter the product artwork itself. */
.home .hero .grid2{
  grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr) !important;
  gap:42px !important;
  overflow:visible;
}
.home .hero .grid2 > div:last-child{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.home .heroimg{
  width:118% !important;
  max-width:none !important;
  height:auto !important;
  max-height:610px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block;
  transform:translateX(-2%);
  margin:0 !important;
}

/* Keep the hero text comfortable and aligned while giving the product visual more presence. */
.home .hero{
  overflow:hidden;
}
.home .hero .wrap{
  overflow:visible;
}

@media (max-width:1100px){
  .home .hero .grid2{
    grid-template-columns:1fr 1fr !important;
    gap:28px !important;
  }
  .home .heroimg{
    width:112% !important;
    max-height:540px !important;
    transform:translateX(-1%);
  }
}
@media (max-width:850px){
  .home .hero .grid2{
    grid-template-columns:1fr !important;
  }
  .home .heroimg{
    width:100% !important;
    max-width:760px !important;
    max-height:none !important;
    margin:24px auto 0 !important;
    transform:none;
  }
}


/* V1.9 — Wired Earphones category page */
.we-page{color:#071426;background:#fff}
.we-page .wrap{max-width:1480px;margin:0 auto;padding-left:64px;padding-right:64px}
.we-hero{padding:86px 0 78px;background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);border-bottom:1px solid #e5edf6}
.we-breadcrumb{font-size:14px;color:#758399;margin-bottom:38px}.we-breadcrumb a{color:#1670f8;text-decoration:none}
.we-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:80px;align-items:center}
.we-page .eyebrow{font-size:15px;letter-spacing:.16em;font-weight:800;color:#1474ff;margin-bottom:18px}
.we-page .eyebrow.light{color:#fff}
.we-hero h1{font-size:clamp(46px,4.4vw,72px);line-height:1.03;letter-spacing:-.04em;max-width:900px;margin:0 0 26px}
.we-lead{font-size:20px;line-height:1.65;color:#617087;max-width:820px;margin:0}
.we-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.we-page .btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:9px;font-weight:800;text-decoration:none}
.we-page .btn.primary{background:#1670f8;color:#fff}.we-page .btn.secondary{background:#fff;color:#071426;border:1px solid #ccd7e5}
.we-spec-card{background:#fff;border:1px solid #dbe5f0;border-radius:22px;padding:34px 36px;box-shadow:0 18px 50px rgba(30,72,120,.08)}
.we-spec-title{font-weight:800;font-size:14px;letter-spacing:.15em;color:#1474ff;margin-bottom:14px}
.we-spec-row{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid #edf1f6;color:#66758b}.we-spec-row:last-child{border:0}.we-spec-row strong{color:#0a1729;text-align:right}
.we-section{padding:92px 0}.we-section h2{font-size:clamp(38px,3.4vw,56px);line-height:1.08;letter-spacing:-.035em;margin:0 0 42px;max-width:920px}
.we-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.we-type-grid article{border:1px solid #dce5ef;border-radius:20px;padding:32px;min-height:250px}.we-icon{width:58px;height:58px;border-radius:15px;background:#edf5ff;color:#1474ff;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:30px}
.we-type-grid h3,.we-model-body h3,.we-oem-grid h3{font-size:22px;margin:0 0 14px}.we-type-grid p,.we-oem-grid p{color:#66758b;line-height:1.6;margin:0;font-size:17px}
.we-model-section{background:#f7faff}.we-intro{font-size:19px;color:#66758b;line-height:1.65;max-width:800px;margin:-22px 0 40px}
.we-model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.we-model-card{background:#fff;border:1px solid #dce5ef;border-radius:20px;overflow:hidden}
.we-model-placeholder{height:250px;background:linear-gradient(145deg,#fff,#f1f6fb);display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid #e6edf5;color:#c1ccd8}
.we-model-placeholder span{font-size:76px;line-height:1;font-weight:800;letter-spacing:-.06em}.we-model-placeholder small{font-weight:800;letter-spacing:.14em;margin-top:12px}
.we-model-body{padding:28px}.we-model-body p{color:#1474ff;font-weight:700}.we-model-body ul{padding-left:18px;color:#66758b;line-height:1.8}.we-model-body a{display:inline-block;margin-top:12px;text-decoration:none;color:#071426;font-weight:800}
.we-note{margin-top:26px;color:#7a8798;font-size:14px}
.we-oem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.we-oem-grid>div{padding:30px 0;border-top:3px solid #1474ff}.we-oem-grid strong{font-size:15px;color:#1474ff;letter-spacing:.1em}
.we-cta{padding:20px 0 90px}.we-cta-box{background:linear-gradient(120deg,#146cf7,#20b8ee);border-radius:26px;padding:56px 64px;display:flex;justify-content:space-between;gap:40px;align-items:center;color:#fff}.we-cta-box h2{font-size:42px;line-height:1.1;margin:0;max-width:800px}.we-white-btn{background:#fff;color:#071426;white-space:nowrap}
@media(max-width:1000px){.we-hero-grid{grid-template-columns:1fr;gap:42px}.we-type-grid,.we-oem-grid{grid-template-columns:repeat(2,1fr)}.we-model-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.we-page .wrap{padding-left:22px;padding-right:22px}.we-hero{padding:54px 0}.we-hero h1{font-size:43px}.we-type-grid,.we-model-grid,.we-oem-grid{grid-template-columns:1fr}.we-section{padding:64px 0}.we-cta-box{padding:38px 28px;display:block}.we-cta-box h2{font-size:34px;margin-bottom:28px}.we-spec-card{padding:26px 22px}}


/* V2.0 — real Wired Earphones product catalogue */
.we-filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 32px}
.we-filter-row span{border:1px solid #d7e2ee;border-radius:999px;padding:10px 17px;font-size:13px;font-weight:800;letter-spacing:.05em;color:#65758b;background:#fff}
.we-filter-row span.active{background:#0f70f7;border-color:#0f70f7;color:#fff}
.we-real-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.we-product-card{background:#fff;border:1px solid #dce5ef;border-radius:20px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.we-product-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(26,68,115,.09)}
.we-product-card.featured-product{border-color:#b9d6ff}
.we-product-image{height:300px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;padding:20px;border-bottom:1px solid #edf1f5}
.we-product-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.we-badge{position:absolute;left:16px;top:16px;background:#eaf3ff;color:#0e6ff7;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.08em;z-index:2}
.we-product-info{padding:23px 22px 24px}.we-model-code{font-size:12px;letter-spacing:.13em;color:#1670f8;font-weight:900;margin-bottom:7px}
.we-product-info h3{font-size:20px;line-height:1.25;margin:0 0 9px;color:#08172a}.we-product-info p{font-size:14px;color:#6c7b90;line-height:1.55;min-height:44px;margin:0 0 16px}
.we-product-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.we-product-meta span{font-size:11px;background:#f4f7fa;color:#637187;border-radius:6px;padding:6px 8px;font-weight:700}
.we-product-info a{font-size:13px;color:#071426;text-decoration:none;font-weight:900}
@media(max-width:1150px){.we-real-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.we-real-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.we-product-image{height:280px}}
@media(max-width:560px){.we-real-product-grid{grid-template-columns:1fr}.we-product-image{height:330px}}


/* V2.2 — clickable product category cards */
.products-grid .product-card{position:relative}
.products-grid .product-card.is-clickable{cursor:pointer}
.products-grid .product-card.is-clickable:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,55,90,.10)}
.products-grid .product-card.is-clickable .product-card-title a,
.products-grid .product-card.is-clickable .product-card-image-link{color:inherit;text-decoration:none}
.products-grid .product-card .card-stretched-link{
  position:absolute;inset:0;z-index:1;border-radius:inherit
}
.products-grid .product-card .product-card-content,
.products-grid .product-card .product-card-image{position:relative;z-index:2;pointer-events:none}
.products-grid .product-card .product-card-content a,
.products-grid .product-card .product-card-image a{pointer-events:auto}


/* V2.3 — Wired Earphones product cards: large 3:4 portrait image area.
   Original uploaded product images are preserved; only website display sizing changes. */
.we-real-product-grid{
  align-items:stretch;
}
.we-product-card{
  display:flex;
  flex-direction:column;
}
.we-product-image{
  width:100%;
  height:auto !important;
  aspect-ratio:3 / 4;
  min-height:0;
  padding:18px;
  background:#fff;
  overflow:hidden;
}
.we-product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.we-product-info{
  flex:1;
}
@media(max-width:850px){
  .we-product-image{
    height:auto !important;
    aspect-ratio:3 / 4;
  }
}
@media(max-width:560px){
  .we-product-image{
    height:auto !important;
    aspect-ratio:3 / 4;
  }
}

/* V2.4 — standardized 12-model catalogue */
.we-product-image{aspect-ratio:3 / 4 !important;padding:0 !important;background:#fff}
.we-product-image img{width:100%;height:100%;object-fit:contain;object-position:center}

/* V2.5 — Homepage hero background fix.
   Product artwork uses a transparent outer canvas so the page gradient remains continuous. */
.home .heroimg{background:transparent !important;}

/* V2.7 — exact user-supplied hero product artwork on continuous site background */
.home .heroimg{background:transparent !important;}
.home .heroimg img{display:block;mix-blend-mode:normal;}

/* V2.8 — exact original hero product artwork + uniform background */
.home .hero{background:#fefefe !important;}
.home .heroimg{background:#fefefe !important;opacity:1 !important;filter:none !important;}
