/* ocex-shop.css -- OCEX extension shop only (shop.ocex.eu, mod-602): home page blocks.
   Built by shop_front_build.py from ocex-home.css, linked by the ocex_shop_front OCMOD. */

/* === OCEX shop home page (mod-602): hero banner, number band, trust strip. Markup lives in the HTML Content modules of the Home layout
   (tools\shop_home.py). Colours come from the theme variables, so the dark theme (data-ocex-theme="dark") follows without extra rules. === */
.oh-hero { display: flex; align-items: center; gap: 32px; margin: 20px 0 34px; padding: 40px 44px; border-radius: 12px; background: #1b1e21; color: #fff; overflow: hidden; }
.oh-hero__text { flex: 1 1 54%; min-width: 0; }
.oh-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8fbfbf; }
.oh-hero h1 { margin: 0 0 14px; font-size: 38px; line-height: 1.15; font-weight: 500; color: #fff; }
.oh-lead { margin: 0 0 24px; max-width: 34em; font-size: 17px; line-height: 1.55; color: #cfd6d8; }
.oh-cta .btn { margin: 0 10px 8px 0; }
.oh-hero .btn-primary { background: var(--dide); border-color: var(--dide); color: #fff; }
.oh-hero .btn-primary:hover, .oh-hero .btn-primary:focus { background: var(--ahov); border-color: var(--ahov); color: #fff; }
.oh-hero .btn-default { background: transparent; border-color: #5b6468; color: #fff; }
.oh-hero .btn-default:hover, .oh-hero .btn-default:focus { background: #2a2f33; border-color: #8a9498; color: #fff; }
.oh-hero__tiles { flex: 0 1 42%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.oh-hero__tiles img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.oh-hero__tiles img:nth-child(n+4) { transform: translateX(14px); }
.oh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0; padding: 28px 12px; background: var(--awhi); border-radius: 12px; text-align: center; }
.oh-stat__n { display: block; font-size: 40px; line-height: 1.1; font-weight: 500; color: var(--dide); font-variant-numeric: tabular-nums; }
.oh-stat__l { display: block; margin-top: 6px; font-size: 14px; opacity: .75; }
.oh-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 36px; padding: 24px 28px; border: 1px solid var(--lide); border-radius: 12px; }
.oh-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.oh-trust__item i { flex: 0 0 auto; width: 28px; text-align: center; font-size: 26px; line-height: 1.1; color: var(--dide); }
.oh-trust__item strong { display: block; margin-bottom: 2px; font-weight: 500; }
.oh-trust__item span { display: block; font-size: 14px; line-height: 1.45; opacity: .8; }
@media (max-width: 991px) { .oh-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .oh-hero { padding: 26px 20px; margin-bottom: 26px; }
  .oh-hero h1 { font-size: 28px; }
  .oh-lead { font-size: 16px; }
  .oh-hero__tiles { display: none; }
  .oh-stats { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .oh-stat__n { font-size: 32px; }
}
@media (max-width: 575px) { .oh-trust { grid-template-columns: 1fr; padding: 20px; } }
/* ocex-shots.css -- mod-602 / #305: the "intro screens" of a module's product page on shop.ocex.eu (pictures + captions + try-it buttons).
   Used by tools\shop_screens.py (markup) and appended to ocex-shop.css by tools\shop_front_build.py. */
.ocex-shot{margin:14px 0 18px}
.ocex-shot img{display:block;max-width:100%;height:auto;border:1px solid #d9e2e2;border-radius:6px;background:#fff}
.ocex-shot figcaption{margin-top:6px;font-size:13px;color:#5d6f6f;line-height:1.4}
.ocex-shot--hero img{box-shadow:0 2px 10px rgba(20,40,40,.10)}
.ocex-ba__row{display:flex;flex-wrap:wrap;gap:12px}
.ocex-ba__cell{position:relative;flex:1 1 280px;min-width:0}
.ocex-ba--stack .ocex-ba__cell{flex:1 1 100%}
.ocex-ba__pill{position:absolute;left:8px;top:8px;z-index:1;padding:2px 10px;border-radius:999px;background:#5d6f6f;color:#fff;font-size:12px;font-weight:700;line-height:20px}
.ocex-ba__pill--after{background:#128c8c}
.ocex-shots{display:block}
.ocex-try{margin:14px 0 6px}
.ocex-try .btn{margin:0 8px 8px 0}