/* Tibile visual + SEO cleanup — 2026-09-14 */
:root{--tibile-content:1180px}

/* A stable hero that aligns to the same content grid as products. */
.tibile-hero-slider{width:min(var(--tibile-content),calc(100% - 30px));margin:18px auto 20px;box-sizing:border-box}
.tibile-hero-slides{height:300px;aspect-ratio:auto;border-radius:22px;overflow:hidden}
.tibile-hero-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.tibile-hero-dots{bottom:12px}
.home-seo-intro{padding:8px 0 4px;text-align:right}
.home-seo-intro .wrap{max-width:var(--tibile-content)}
.home-seo-intro h1{margin:0;font-size:22px;line-height:1.6;color:var(--text)}
.home-seo-intro p{margin:3px 0 0;color:var(--muted);font-size:13px}

/* Turn product photography into a compact visual tile like the reference cards. */
.p-thumb.has-cover{background:linear-gradient(145deg,#f1f6ff 0%,#fbfdff 100%);padding:20px;box-sizing:border-box}
.p-thumb.has-cover .p-image-art{width:106px;height:106px;border-radius:28px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px rgba(37,99,235,.12);border:1px solid rgba(191,219,254,.72);overflow:hidden}
.p-thumb.has-cover .p-image-art img{width:84px;height:84px;object-fit:contain;border-radius:20px;transform:none!important}
.p-thumb.has-cover .p-image-art img:hover{transform:none}
.product-image-fallback{padding:20px;box-sizing:border-box;background:linear-gradient(145deg,#eff6ff,#f8fbff)}
.p-icon{width:76px;height:76px;border-radius:24px;background:#fff;box-shadow:0 14px 32px rgba(37,99,235,.10);border:1px solid rgba(191,219,254,.72)}

/* Stronger but restrained dark-mode treatment for the new visual layer. */
html[data-tibile-theme="dark"] .p-thumb.has-cover,
html[data-tibile-theme="dark"] .product-image-fallback{background:linear-gradient(145deg,#0f1724,#172235)}
html[data-tibile-theme="dark"] .p-thumb.has-cover .p-image-art,
html[data-tibile-theme="dark"] .p-icon{background:#182333;border-color:#2b3a51;box-shadow:0 14px 32px rgba(0,0,0,.35)}
html[data-tibile-theme="dark"] .tibile-hero-slides{background:#101a29;border-color:#26384f;box-shadow:0 18px 45px rgba(0,0,0,.32)}
html[data-tibile-theme="dark"] .home-seo-intro{color:var(--text)}

/* Responsive: never let hero or product art create horizontal overflow. */
@media(max-width:760px){
  .tibile-hero-slider{width:calc(100% - 20px);margin-top:10px;margin-bottom:14px}
  .tibile-hero-slides{height:190px;border-radius:18px}
  .p-thumb.has-cover{padding:14px}
  .p-thumb.has-cover .p-image-art{width:74px;height:74px;border-radius:20px}
  .p-thumb.has-cover .p-image-art img{width:58px;height:58px;border-radius:14px}
  .home-seo-intro{padding:4px 14px 2px}
  .home-seo-intro h1{font-size:19px}
  .home-seo-intro p{font-size:11px}
}
@media(max-width:420px){.tibile-hero-slides{height:175px}.tibile-hero-slider{width:calc(100% - 16px)}}

/* Theme-safe logo swap: the dark asset is white/blue and stays fully visible. */
html[data-tibile-theme="dark"] .brand-logo-img,
html[data-tibile-theme="dark"] [data-tibile-logo]{filter:none!important}

/* Distinct colored tile per well-known product, instead of one repeated generic icon. */
.p-icon-brand{position:relative;color:#fff;box-shadow:0 10px 26px rgba(15,23,42,.18)!important;border:none!important;overflow:hidden}
.p-icon-brand svg{opacity:.9}
.p-icon-label{position:absolute;top:6px;inset-inline-start:8px;font-size:10px;font-weight:800;letter-spacing:.02em;opacity:.85}
.pd-icon .p-icon-brand{width:100px;height:100px;border-radius:28px}
.pd-icon .p-icon-label{font-size:13px;top:10px;inset-inline-start:12px}

/* --------------------------------------------------------------------
   Product page "quick delivery / support / trust" boxes were never
   given dark-mode colors at all — they stayed white in dark mode.
   -------------------------------------------------------------------- */
html[data-tibile-theme="dark"] .v171-proof,
html[data-tibile-theme="dark"] .v171-rating{background:var(--surface);border-color:var(--border);color:var(--text)}
html[data-tibile-theme="dark"] .v171-benefits>div{background:var(--surface);border-color:var(--border)}
html[data-tibile-theme="dark"] .v171-benefits b{color:var(--text)}
html[data-tibile-theme="dark"] .v171-benefits span{color:var(--muted)}
html[data-tibile-theme="dark"] .v171-mobile-buy{background:rgba(17,24,38,.96);border-color:var(--border-strong);box-shadow:0 -10px 30px rgba(0,0,0,.4)}
html[data-tibile-theme="dark"] .v171-mobile-buy small{color:var(--muted)}
html[data-tibile-theme="dark"] .v171-mobile-buy b{color:var(--text)}
html[data-tibile-theme="dark"] .v173-trust{background:var(--surface);border-color:var(--border)}
html[data-tibile-theme="dark"] .v173-trust-head h2{color:var(--text)}
html[data-tibile-theme="dark"] .v173-trust-head p{color:var(--muted)}
html[data-tibile-theme="dark"] .v173-trust-item{background:var(--surface-2);border-color:var(--border)}
html[data-tibile-theme="dark"] .v173-trust-item b{color:var(--text)}
html[data-tibile-theme="dark"] .v173-trust-item small{color:var(--muted)}
html[data-tibile-theme="dark"] .v173-trust-icon{background:var(--surface);color:var(--primary)}
html[data-tibile-theme="dark"] .v173-trust-icon.star{background:var(--surface);color:#e0ac2b}

/* Blog thumbnail fallback: a clean code-drawn tile instead of a bare "TIBILE" text box. */
.blog-thumb span[aria-hidden]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef4ff,#f8fbff);color:#3559c9;font-weight:800;letter-spacing:.06em;font-size:15px}
html[data-tibile-theme="dark"] .blog-thumb span[aria-hidden]{background:linear-gradient(135deg,var(--surface-2),var(--surface));color:var(--primary)}