/* ==========================================================
   WEBSTORE V13 — HOMEPAGE MARKETPLACE LAYOUT
   Scope: homepage content only.
   IMPORTANT: site-nav.css / toolbar remains untouched.
   Palette intentionally reuses V12 variables.
   ========================================================== */

.market-home{
  overflow:hidden;
}

/* ---------- Marketplace hero ---------- */
.market-hero{
  padding:22px 0 18px;
}
.market-hero-shell{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(305px,.55fr);
  gap:12px;
}
.market-hero-main{
  min-height:365px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:24px;
  padding:38px 40px;
  background:
    radial-gradient(circle at 80% 25%,rgba(242,194,123,.13),transparent 16rem),
    radial-gradient(circle at 20% 0%,rgba(208,138,70,.12),transparent 22rem),
    linear-gradient(125deg,#21150f 0%,#321d12 51%,#6c381e 100%);
  box-shadow:var(--shadow);
}
.market-hero-main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(to right,#000,transparent 88%);
  mask-image:linear-gradient(to right,#000,transparent 88%);
}
.market-hero-copy{
  position:relative;
  z-index:3;
  max-width:600px;
}
.market-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d9b48d;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}
.market-eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 5px rgba(127,211,141,.08);
}
.market-hero-main h1{
  max-width:650px;
  margin:15px 0 12px;
  color:var(--text);
  font-size:clamp(44px,4.8vw,65px);
  line-height:.99;
  letter-spacing:-.055em;
}
.market-hero-main h1 span{
  color:var(--primary-light);
}
.market-hero-main p{
  max-width:570px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.68;
}
.market-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.market-points{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:28px;
}
.market-points span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#c4ad98;
  font-size:11px;
}
.market-points span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
}

/* Decorative website preview */
.market-laptop{
  position:absolute;
  z-index:2;
  right:-12px;
  bottom:-34px;
  width:47%;
  height:78%;
  overflow:hidden;
  border:1px solid rgba(255,239,221,.17);
  border-radius:20px 20px 8px 8px;
  background:#120d0a;
  box-shadow:0 30px 75px rgba(0,0,0,.38);
  transform:rotate(-3deg);
}
.market-laptop-top{
  height:32px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border-bottom:1px solid var(--line);
  background:#1b130f;
}
.market-laptop-top i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#826a58;
}
.market-laptop-body{
  padding:18px;
}
.market-ui-nav{
  width:34%;
  height:8px;
  margin-bottom:22px;
  border-radius:5px;
  background:#806956;
}
.market-ui-h1{
  width:72%;
  height:24px;
  margin-bottom:10px;
  border-radius:7px;
  background:#fff3e4;
}
.market-ui-h1.small{
  width:48%;
  background:var(--primary);
}
.market-ui-line{
  height:7px;
  margin:8px 0;
  border-radius:5px;
  background:#423027;
}
.market-ui-line.a{width:85%}
.market-ui-line.b{width:63%}
.market-ui-btn{
  width:82px;
  height:29px;
  margin-top:17px;
  border-radius:8px;
  background:var(--primary);
}
.market-ui-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:26px;
}
.market-ui-cards span{
  height:65px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#211711;
}

/* Two side banners */
.market-hero-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:12px;
}
.market-side-banner{
  position:relative;
  overflow:hidden;
  min-height:176px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.market-side-banner::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-50px;
  top:-55px;
  border-radius:50%;
  background:rgba(242,194,123,.06);
}
.market-side-banner.dark{
  background:
    radial-gradient(circle at 100% 0%,rgba(208,138,70,.18),transparent 14rem),
    linear-gradient(145deg,#1d130e,#3a2014);
}
.market-side-banner.warm{
  background:
    radial-gradient(circle at 85% 20%,rgba(242,194,123,.13),transparent 12rem),
    linear-gradient(145deg,#251810,#5a301b);
}
.market-side-banner small{
  position:relative;
  z-index:2;
  color:#ba9e86;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}
.market-side-banner h3{
  position:relative;
  z-index:2;
  margin:8px 0;
  color:var(--text);
  font-size:23px;
  line-height:1.05;
}
.market-side-banner p{
  position:relative;
  z-index:2;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.market-side-banner a{
  position:relative;
  z-index:2;
  margin-top:16px;
  color:var(--primary-light);
  font-size:11px;
  font-weight:900;
}

/* ---------- Category rail ---------- */
.market-quick-section{
  padding:12px 0 22px;
}
.market-quick-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:9px;
}
.market-quick-item{
  min-height:102px;
  padding:14px 8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.018));
  text-align:center;
  transition:.18s ease;
}
.market-quick-item:hover{
  transform:translateY(-3px);
  border-color:rgba(242,194,123,.34);
  background:rgba(208,138,70,.06);
}
.market-quick-icon{
  width:42px;
  height:42px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(208,138,70,.22);
  border-radius:13px;
  background:rgba(208,138,70,.09);
  color:var(--primary-light);
  font-size:18px;
}
.market-quick-item b{
  display:block;
  color:#f5eadd;
  font-size:11px;
}
.market-quick-item span{
  display:block;
  margin-top:2px;
  color:var(--muted-2);
  font-size:10.5px;
}

/* ---------- Feature strip ---------- */
.market-feature-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  overflow:hidden;
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.market-feature-strip div{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-right:1px solid var(--line);
  color:#c7b19e;
  font-size:11px;
  font-weight:800;
}
.market-feature-strip div:last-child{
  border-right:0;
}
.market-feature-strip span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(208,138,70,.20);
  border-radius:8px;
  background:rgba(208,138,70,.08);
  color:var(--primary-light);
}

/* ---------- Product sections ---------- */
.market-section{
  padding:34px 0 54px;
}
.market-section.alt{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%,rgba(208,138,70,.055),transparent 25rem),
    rgba(255,255,255,.012);
}
.market-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.market-section-kicker{
  display:block;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.market-section-head h2{
  margin:5px 0 0;
  color:var(--text);
  font-size:30px;
  letter-spacing:-.035em;
}
.market-section-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
}
.market-section-more{
  flex:0 0 auto;
  color:var(--primary-light);
  font-size:11px;
  font-weight:850;
}
.market-product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

/* Reuse the real product-card() markup from app.js,
   only resize it inside homepage marketplace sections. */
.market-product-grid .product-card{
  border-radius:17px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
}
.market-product-grid .product-card:hover{
  transform:translateY(-4px);
}
.market-product-grid .product-cover{
  height:165px;
  padding:12px;
}
.market-product-grid .product-badge{
  top:10px;
  right:10px;
  padding:5px 7px;
  font-size:10.5px;
}
.market-product-grid .product-mock{
  padding:12px;
  border-radius:12px;
}
.market-product-grid .product-mock-title{
  height:19px;
  margin-top:18px;
}
.market-product-grid .product-mock-line{
  height:5px;
  margin-top:8px;
}
.market-product-grid .product-mock-button{
  width:62px;
  height:21px;
  margin-top:11px;
}
.market-product-grid .product-mock-grid{
  margin-top:12px;
  gap:4px;
}
.market-product-grid .product-mock-grid span{
  height:26px;
}
.market-product-grid .product-body{
  padding:14px;
}
.market-product-grid .product-name{
  font-size:14px;
}
.market-product-grid .product-category{
  font-size:11px;
}
.market-product-grid .product-price{
  font-size:11px;
  color:var(--primary-light);
}
.market-product-grid .product-description{
  min-height:33px;
  margin:9px 0;
  font-size:11px;
  line-height:1.52;
}
.market-product-grid .product-tags{
  gap:5px;
}
.market-product-grid .product-tags > span,
.market-product-grid .feature-chip{
  min-height:25px;
  padding:0 7px;
  font-size:10px;
}
.market-product-grid .product-actions{
  gap:6px;
  margin-top:10px;
}
.market-product-grid .product-actions .btn{
  min-height:34px;
  padding:0 8px;
  border-radius:9px;
  font-size:10.5px;
}

/* ---------- Industry blocks ---------- */
.market-industry-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.market-industry{
  min-height:150px;
  position:relative;
  overflow:hidden;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(208,138,70,.10),transparent 12rem),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.market-industry b{
  display:block;
  color:var(--text);
  font-size:16px;
}
.market-industry p{
  max-width:235px;
  color:var(--muted);
  font-size:11px;
  line-height:1.58;
}
.market-industry a{
  color:var(--primary-light);
  font-size:11px;
  font-weight:850;
}
.market-industry .ghost{
  position:absolute;
  right:16px;
  bottom:7px;
  font-size:54px;
  opacity:.10;
}

/* ---------- Benefits / process ---------- */
.market-benefit-grid,
.market-process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.market-benefit-card,
.market-process-card{
  padding:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.022);
}
.market-benefit-card .market-card-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border:1px solid rgba(208,138,70,.22);
  border-radius:12px;
  background:rgba(208,138,70,.08);
  color:var(--primary-light);
  font-size:16px;
}
.market-benefit-card h3,
.market-process-card h3{
  margin:0 0 7px;
  font-size:13px;
}
.market-benefit-card p,
.market-process-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.58;
}
.market-process-card > span{
  display:block;
  margin-bottom:12px;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}

/* ---------- CTA / contact ---------- */
.market-contact-wrap{
  padding:52px 0 62px;
}
.market-contact{
  min-height:250px;
  display:grid;
  grid-template-columns:1fr 320px;
  align-items:center;
  gap:22px;
  overflow:hidden;
  position:relative;
  padding:32px 34px;
  border:1px solid rgba(208,138,70,.28);
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 20%,rgba(242,194,123,.10),transparent 15rem),
    linear-gradient(115deg,#21150f,#4a2717 58%,#7d4222);
  box-shadow:var(--shadow);
}
.market-contact h2{
  margin:7px 0 8px;
  font-size:36px;
  letter-spacing:-.04em;
}
.market-contact p{
  max-width:650px;
  margin:0;
  color:#cdb6a1;
  font-size:11px;
  line-height:1.68;
}
.market-contact-card{
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  background:rgba(18,13,10,.42);
  backdrop-filter:blur(10px);
}
.market-contact-card b{
  display:block;
  font-size:17px;
}
.market-contact-card span{
  display:block;
  margin-top:5px;
  color:#cbb49f;
  font-size:11px;
  line-height:1.55;
}
.market-contact-links{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin-top:14px;
}
.market-contact-links .btn{
  min-height:35px;
  padding:0 8px;
  font-size:10.5px;
}

/* loading placeholder so page is not empty before /api/products returns */
.market-product-loading{
  grid-column:1/-1;
  min-height:220px;
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  border-radius:17px;
  color:var(--muted-2);
  font-size:11px;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .market-hero-shell{grid-template-columns:1fr}
  .market-hero-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }
  .market-quick-grid{grid-template-columns:repeat(4,1fr)}
  .market-product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .market-hero{padding-top:12px}
  .market-hero-main{
    min-height:405px;
    padding:26px 22px;
  }
  .market-hero-main h1{
    max-width:92%;
    font-size:46px;
  }
  .market-laptop{
    width:64%;
    height:44%;
    right:-7px;
    bottom:-15px;
    opacity:.82;
  }
  .market-points{display:none}
  .market-hero-side{grid-template-columns:1fr}
  .market-quick-grid{grid-template-columns:repeat(2,1fr)}
  .market-feature-strip{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .market-feature-strip::-webkit-scrollbar{display:none}
  .market-feature-strip div{
    flex:0 0 155px;
    padding:0 12px;
  }
  .market-product-grid{grid-template-columns:1fr}
  .market-industry-grid{grid-template-columns:1fr}
  .market-benefit-grid,
  .market-process-grid{grid-template-columns:1fr 1fr}
  .market-contact{grid-template-columns:1fr;padding:25px}
}
@media(max-width:520px){
  .market-hero-main{
    min-height:420px;
    border-radius:19px;
    padding:22px 17px;
  }
  .market-hero-main h1{
    font-size:39px;
  }
  .market-hero-main p{
    max-width:96%;
    font-size:12px;
  }
  .market-hero-actions{
    display:grid;
    grid-template-columns:1fr;
    width:min(100%,280px);
  }
  .market-hero-actions .btn{width:100%}
  .market-laptop{
    width:72%;
    height:39%;
  }
  .market-side-banner{border-radius:18px}
  .market-section-head{
    align-items:flex-start;
  }
  .market-section-head h2{font-size:25px}
  .market-section-head p{display:none}
  .market-benefit-grid,
  .market-process-grid{grid-template-columns:1fr}
  .market-contact h2{font-size:30px}
  .market-contact-links{grid-template-columns:1fr}
}


/* ==========================================================
   WebStore V28 — Floating quick contact on homepage
   Facebook / Zalo / Phone
   ========================================================== */
.home-contact-float{
  position:fixed;
  z-index:850;
  right:22px;
  bottom:24px;
  width:230px;
  display:grid;
  gap:9px;
  pointer-events:none;
}

.home-contact-card{
  min-height:64px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  overflow:hidden;
  border:1px solid rgba(90,62,42,.10);
  border-radius:16px;
  background:rgba(255,249,242,.97);
  color:#17100c;
  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    0 2px 0 rgba(255,255,255,.72) inset;
  backdrop-filter:blur(12px);
  pointer-events:auto;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.home-contact-card:hover{
  transform:translateX(-5px);
  border-color:rgba(208,138,70,.34);
  box-shadow:
    0 18px 42px rgba(0,0,0,.31),
    0 2px 0 rgba(255,255,255,.78) inset;
}

.home-contact-card.is-unavailable{
  display:none;
}

.home-contact-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 13px rgba(0,0,0,.08);
}

.home-contact-icon svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

.home-contact-facebook .home-contact-icon{
  color:#ffffff;
  background:linear-gradient(145deg,#8b4bff,#f04a86 56%,#ff7a36);
}

.home-contact-zalo .home-contact-icon{
  color:#0b72ec;
  border:1px solid rgba(11,114,236,.18);
  background:#fff;
}

.home-contact-zalo-icon b{
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:-.04em;
}

.home-contact-phone .home-contact-icon{
  color:#e34747;
  background:#fff;
  border:1px solid rgba(227,71,71,.12);
}

.home-contact-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.12;
}

.home-contact-copy strong{
  overflow:hidden;
  color:#15110e;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.home-contact-copy small{
  overflow:hidden;
  margin-top:5px;
  color:#8b8179;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.home-contact-arrow{
  color:#a28569;
  font-size:22px;
  line-height:1;
  transition:transform .16s ease;
}

.home-contact-card:hover .home-contact-arrow{
  transform:translateX(2px);
}

/* Không che footer khi màn hình quá thấp. */
@media(max-height:620px) and (min-width:721px){
  .home-contact-float{
    bottom:12px;
    gap:6px;
  }

  .home-contact-card{
    min-height:54px;
    grid-template-columns:36px minmax(0,1fr) 15px;
    padding:7px 9px;
  }

  .home-contact-icon{
    width:36px;
    height:36px;
    border-radius:11px;
  }

  .home-contact-copy small{
    display:none;
  }
}

/* Tablet */
@media(max-width:1000px){
  .home-contact-float{
    right:14px;
    bottom:18px;
    width:205px;
  }

  .home-contact-card{
    min-height:58px;
    grid-template-columns:38px minmax(0,1fr) 15px;
    border-radius:14px;
  }

  .home-contact-icon{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .home-contact-copy strong{
    font-size:11px;
  }

  .home-contact-copy small{
    font-size:10.5px;
  }
}

/* Mobile: 3 nút tròn dọc, giữ đủ chức năng nhưng không che nội dung. */
@media(max-width:720px){
  .home-contact-float{
    right:10px;
    bottom:14px;
    width:48px;
    gap:7px;
  }

  .home-contact-card{
    width:48px;
    min-height:48px;
    height:48px;
    display:grid;
    grid-template-columns:1fr;
    padding:4px;
    border-radius:50%;
  }

  .home-contact-card:hover{
    transform:translateY(-2px);
  }

  .home-contact-icon{
    width:38px;
    height:38px;
    margin:auto;
    border-radius:50%;
  }

  .home-contact-copy,
  .home-contact-arrow{
    display:none;
  }
}
.home-seo-guides{padding:58px 0;border-top:1px solid rgba(232,174,106,.08)}.home-seo-guide-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.home-seo-guide-head h2{margin:6px 0;font-size:clamp(28px,3vw,42px)}.home-seo-guide-head p{color:#9a8169}.home-seo-guide-head>a{color:#e5a35d;font-weight:900;text-decoration:none}.home-seo-guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.home-seo-guide-grid>a{display:block;padding:18px;border:1px solid rgba(230,174,111,.12);border-radius:15px;background:#15100c;text-decoration:none;color:#f7ecdf}.home-seo-guide-grid span,.home-seo-guide-grid b,.home-seo-guide-grid small{display:block}.home-seo-guide-grid span{color:#d7934b;font-size:10.5px;font-weight:950}.home-seo-guide-grid b{margin-top:8px;font-size:14px}.home-seo-guide-grid small{margin-top:8px;color:#876f5b}@media(max-width:980px){.home-seo-guide-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.home-seo-guide-head{align-items:flex-start;flex-direction:column}.home-seo-guide-grid{grid-template-columns:1fr}}

/* WebStore V68 · Customer readability: tăng cỡ chữ phụ nhỏ, giữ nguyên các tiêu đề lớn. */


/* ==========================================================
   WebStore V81 — Customer Experience Upgrade
   ========================================================== */
.v81-hero-browser{display:flex;flex-direction:column;padding:0;background:#0d0907}
.v81-hero-browser .market-laptop-top{flex:0 0 32px}
.v81-hero-browser .market-laptop-top span{min-width:0;overflow:hidden;margin-left:7px;color:#725f50;font-size:8.5px;white-space:nowrap;text-overflow:ellipsis}
.v81-hero-preview-link{position:relative;display:block;flex:1;min-height:0;overflow:hidden;text-decoration:none}
.v81-hero-preview-link>img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;transition:transform .4s ease,filter .4s ease}
.v81-hero-preview-link:hover>img{transform:scale(1.025);filter:brightness(1.04)}
.v81-preview-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(10,7,5,.9) 100%)}
.v81-preview-copy{position:absolute;z-index:2;left:15px;right:15px;bottom:13px;display:grid;gap:2px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.v81-preview-copy small{color:#edb879;font-size:8px;font-weight:950;letter-spacing:.08em}
.v81-preview-copy b{overflow:hidden;font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.v81-preview-copy em{color:#d6c0ab;font-size:9px;font-style:normal;font-weight:700}

.v81-trust-bar{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;margin:13px 0;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))}
.v81-trust-bar article{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border-right:1px solid var(--line);text-align:center}
.v81-trust-bar article:last-child{border-right:0}
.v81-trust-bar b{color:#f1c38d;font-size:20px;letter-spacing:-.04em}
.v81-trust-bar span{margin-top:3px;color:#9c8674;font-size:9.5px}

.market-product-grid .v81-price-block .product-price{font-size:13px}
.market-product-grid .v81-price-old{font-size:9px}
.market-product-grid .v81-price-block small{font-size:8px}
.market-product-grid .v81-sale-badge{left:10px;top:10px;min-height:24px;padding:0 7px;font-size:9.5px}
.market-product-grid .v81-live-pill{left:10px;bottom:10px;min-height:22px;font-size:8px}
.market-product-grid .v81-detail-link{margin-top:8px;font-size:9px}
.market-product-grid .v81-promo-name{font-size:8.5px}

@media(max-width:820px){
  .v81-market-points{display:flex;gap:11px;margin-top:20px}
  .v81-market-points span{font-size:9.5px}
  .v81-trust-bar{grid-template-columns:1fr 1fr}
  .v81-trust-bar article:nth-child(2){border-right:0}
  .v81-trust-bar article:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

@media(max-width:620px){
  .market-hero{padding-top:8px}
  .market-hero-main{min-height:500px;padding:21px 17px 18px}
  .market-hero-main h1{max-width:100%;font-size:36px;line-height:1.02}
  .market-hero-main p{font-size:11.5px;line-height:1.58}
  .v81-market-points{overflow-x:auto;flex-wrap:nowrap;margin-top:15px;padding-bottom:2px;scrollbar-width:none}
  .v81-market-points::-webkit-scrollbar{display:none}
  .v81-market-points span{flex:0 0 auto}
  .market-laptop.v81-hero-browser{width:88%;height:39%;right:-9%;bottom:-8px;opacity:1;transform:rotate(-2deg)}
  .market-hero-side{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .market-side-banner{min-height:180px;padding:17px}
  .market-side-banner h3{font-size:18px}
  .market-side-banner p{font-size:10px}
  .market-side-banner a{font-size:10px}

  .market-quick-section{padding-top:8px}
  .market-quick-grid{display:flex;overflow-x:auto;gap:8px;margin-left:-16px;margin-right:-16px;padding:0 16px 5px;scroll-snap-type:x proximity;scrollbar-width:none}
  .market-quick-grid::-webkit-scrollbar{display:none}
  .market-quick-item{flex:0 0 118px;min-height:94px;scroll-snap-align:start}
  .market-quick-icon{width:38px;height:38px}
  .v81-trust-bar{margin-top:10px}
  .v81-trust-bar article{min-height:66px}
  .v81-trust-bar b{font-size:18px}

  .market-product-grid{display:flex;overflow-x:auto;gap:10px;margin-left:-16px;margin-right:-16px;padding:1px 16px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .market-product-grid::-webkit-scrollbar{display:none}
  .market-product-grid .product-card{flex:0 0 min(84vw,350px);scroll-snap-align:start}
  .market-product-grid .product-cover{height:185px}
  .market-product-grid .product-description{min-height:0}
  .market-section{padding:27px 0 38px}
  .market-section-head{margin-bottom:13px}
  .market-section-more{font-size:10px}
}

@media(max-width:390px){
  .market-hero-main{min-height:520px}
  .market-hero-main h1{font-size:33px}
  .market-hero-side{grid-template-columns:1fr}
  .market-side-banner{min-height:155px}
}


/* V88 · Performance & rendering containment */
@supports (content-visibility:auto){
  .market-section,.market-quick-section,.market-contact-wrap,.templates-section{content-visibility:auto;contain-intrinsic-size:1px 720px}
}
@media(max-width:760px){
  .market-product-card,.showroom-category-card{transition:none!important}
}

/* V93 · larger, fully interactive card controls */
.market-product-grid .product-tags{gap:7px;align-items:center}
.market-product-grid .product-tags > span,
.market-product-grid .feature-chip{
  min-height:31px;
  padding:0 10px;
  font-size:11.5px;
  font-weight:800;
}
.market-product-grid .product-actions{gap:8px;margin-top:13px}
.market-product-grid .product-actions .btn{
  min-height:42px;
  padding:0 12px;
  font-size:12.5px;
  font-weight:850;
}
@media(max-width:640px){
  .market-product-grid .product-tags{gap:6px}
  .market-product-grid .feature-chip{min-height:34px;font-size:11px;flex:0 0 auto}
  .market-product-grid .product-actions .btn{min-height:44px;font-size:12px}
}