/* Omnite base · SECTION COMPONENTS. Native rebuild; no WoodMart/RevSlider/WPBakery assets.
   RTL-first via logical properties; responsive 360px-up. Tokens come from tokens.css. */

.omx section.omx-hero,
.omx-cat, .omx-grid { margin-block: 28px; }

/* ── Header ───────────────────────────────────────────── */
.omx-header { background: var(--omx-header-bg); border-block-end: 1px solid var(--omx-border); }
.omx-header.is-sticky { position: sticky; inset-block-start: 0; z-index: 900; }
.omx-header.is-scrolled { box-shadow: var(--omx-shadow-sm); }
.omx-header__bar { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.omx-header__logo { font-weight: 800; font-size: 22px; color: var(--omx-primary); white-space: nowrap; }
.omx-header__logo img { max-height: 42px; width: auto; }
.omx-header__search { flex: 1; display: flex; align-items: center; background: var(--omx-surface);
    border: 1px solid var(--omx-border); border-radius: 999px; padding-inline: 6px 4px; max-width: 520px; }
.omx-header__search input { flex: 1; border: 0; background: transparent; padding: 10px 14px; font: inherit; color: var(--omx-ink); outline: none; }
.omx-header__search button { border: 0; background: var(--omx-primary); color: #fff; width: 38px; height: 38px;
    border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.omx-header__nav { display: flex; gap: 18px; align-items: center; }
.omx-header__nav a { font-weight: 600; font-size: 15px; color: var(--omx-ink); padding-block: 6px; }
.omx-header__nav a:hover { color: var(--omx-primary); }
.omx-header__icons { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.omx-header__icons .omx-ic { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center;
    position: relative; color: var(--omx-ink); font-size: 20px; }
.omx-header__icons .omx-ic:hover { background: var(--omx-surface); color: var(--omx-primary); }
.omx-header__icons .theme-cart-count, .omx-header__icons .theme-wishlist-count {
    position: absolute; inset-block-start: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--omx-accent); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; }
.omx-header__burger { display: none; border: 0; background: transparent; color: var(--omx-ink); cursor: pointer; padding: 6px; }

/* ── Hero ─────────────────────────────────────────────── */
.omx-hero__viewport { position: relative; overflow: hidden; border-radius: var(--omx-radius);
    max-width: var(--omx-container); margin-inline: auto; }
.omx-hero__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.omx-hero__slide { position: relative; flex: 0 0 100%; min-height: var(--omx-hero-h, 480px);
    background-size: cover; background-position: center; display: flex; align-items: center; }
.omx-hero__slide--center { justify-content: center; text-align: center; }
.omx-hero__slide--end { justify-content: flex-end; text-align: end; }
.omx-hero__inner { color: #fff; padding: 32px clamp(20px, 5vw, 64px); max-width: 620px; }
.omx-hero__title { font-size: clamp(26px, 4vw, 48px); font-weight: 800; margin: 0 0 12px; line-height: 1.15; }
.omx-hero__sub { font-size: clamp(15px, 1.6vw, 19px); margin: 0 0 22px; opacity: .92; }
.omx-hero__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); width: 44px; height: 44px;
    border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--omx-ink); cursor: pointer;
    display: grid; place-items: center; z-index: 3; }
.omx-hero__nav--prev { inset-inline-start: 14px; }
.omx-hero__nav--next { inset-inline-end: 14px; }
.omx-hero__nav svg { transform: scaleX(1); }
.omx-hero__dots { position: absolute; inset-block-end: 14px; inset-inline: 0; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.omx-hero__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.omx-hero__dot.is-active { background: #fff; width: 24px; border-radius: 999px; }

/* ── Category strip ───────────────────────────────────── */
.omx-cat__grid { display: grid; grid-template-columns: repeat(var(--omx-cat-cols, 6), 1fr); gap: var(--omx-gap); }
.omx-cat__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px; border-radius: var(--omx-radius-sm); transition: background .12s ease; }
.omx-cat__item:hover { background: var(--omx-surface); }
.omx-cat__thumb { width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden; background: var(--omx-surface); border: 1px solid var(--omx-border); }
.omx-cat__thumb--circle { border-radius: 50%; }
.omx-cat__thumb--square { border-radius: var(--omx-radius-sm); }
.omx-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.omx-cat__ph { font-size: 30px; font-weight: 800; color: var(--omx-primary); }
.omx-cat__name { font-weight: 600; font-size: 14px; }
.omx-cat__count { font-size: 12px; color: var(--omx-ink-soft); }

/* ── Product grid ─────────────────────────────────────── */
.omx-grid__items { display: grid; grid-template-columns: repeat(var(--omx-grid-cols, 4), 1fr); gap: var(--omx-gap); }
.omx-card { background: var(--omx-bg); border: 1px solid var(--omx-border); border-radius: var(--omx-radius); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease; }
.omx-card:hover { transform: translateY(-4px); box-shadow: var(--omx-shadow); }
.omx-card__media { position: relative; aspect-ratio: 1/1; background: var(--omx-surface); display: block; }
.omx-card__media img { width: 100%; height: 100%; object-fit: cover; }
.omx-card__badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: var(--omx-accent); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; z-index: 2; }
.omx-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.omx-card__name { font-weight: 600; font-size: 14px; line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.omx-card__name:hover { color: var(--omx-primary); }
.omx-card__rating { font-size: 13px; color: #f5a623; min-height: 18px; }
.omx-card__price { display: flex; align-items: baseline; gap: 8px; }
.omx-price { font-weight: 800; font-size: 16px; color: var(--omx-primary); }
.omx-price--old { font-weight: 500; font-size: 13px; color: var(--omx-ink-faint); }
.omx-card__atc { margin-block-start: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; background: var(--omx-primary); color: #fff; font: inherit; font-weight: 600; padding: 10px 12px;
    border-radius: 999px; cursor: pointer; transition: filter .12s ease; }
.omx-card__atc:hover { filter: brightness(1.08); }

/* ── Footer ───────────────────────────────────────────── */
.omx-footer { background: var(--omx-footer-bg); color: var(--omx-footer-ink); margin-block-start: 40px; }
.omx-footer__top { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; padding-block: 44px; }
.omx-footer__logo { font-weight: 800; font-size: 22px; color: #fff; display: inline-block; margin-block-end: 12px; }
.omx-footer__about p { font-size: 14px; line-height: 1.8; margin: 0; color: #94a3b8; max-width: 42ch; }
.omx-footer__col h3 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.omx-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.omx-footer__col a { font-size: 14px; color: #cbd5e1; }
.omx-footer__col a:hover { color: #fff; }
.omx-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-block: 18px; border-block-start: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.omx-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.omx-pay { border-radius: 5px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .omx-cat__grid { grid-template-columns: repeat(min(var(--omx-cat-cols,6), 4), 1fr); }
    .omx-grid__items { grid-template-columns: repeat(min(var(--omx-grid-cols,4), 3), 1fr); }
}
@media (max-width: 768px) {
    .omx-header__burger { display: inline-grid; place-items: center; }
    .omx-header__nav { position: absolute; inset-block-start: 68px; inset-inline: 0; flex-direction: column; align-items: stretch;
        background: var(--omx-bg); border-block-end: 1px solid var(--omx-border); padding: 8px 16px; gap: 0; display: none; box-shadow: var(--omx-shadow-sm); z-index: 899; }
    .omx-header__nav.is-open { display: flex; }
    .omx-header__nav a { padding: 12px 0; border-block-end: 1px solid var(--omx-border); }
    .omx-header__search { order: 3; flex-basis: 100%; max-width: none; }
    .omx-cat__thumb { width: 72px; height: 72px; }
    .omx-cat__grid { grid-template-columns: repeat(3, 1fr); }
    .omx-grid__items { grid-template-columns: repeat(2, 1fr); }
    .omx-hero__inner { max-width: 100%; }
}
@media (max-width: 420px) {
    .omx-cat__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ M10 Phase 2.5 — batch sections ═══ */

/* Section title */
.omx-stitle{margin-block:26px;text-align:center}
.omx-stitle--start{text-align:start}.omx-stitle--end{text-align:end}
.omx-stitle__h{font-weight:800;margin:0 0 8px}
.omx-stitle--sm .omx-stitle__h{font-size:clamp(17px,2vw,21px)}
.omx-stitle--md .omx-stitle__h{font-size:clamp(20px,2.6vw,28px)}
.omx-stitle--lg .omx-stitle__h{font-size:clamp(24px,3.4vw,38px)}
.omx-stitle__divider{display:inline-block;width:64px;height:4px;border-radius:999px;background:var(--omx-primary);margin:6px auto}
.omx-stitle--start .omx-stitle__divider{margin-inline:0}
.omx-stitle__sub{color:var(--omx-ink-soft);margin:6px 0 0}

/* Text + image */
.omx-ti{margin-block:34px}
.omx-ti__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.omx-ti--img-end .omx-ti__media{order:2}
.omx-ti__media img,.omx-ti__ph{width:100%;border-radius:var(--omx-radius);aspect-ratio:4/3;object-fit:cover;background:var(--omx-surface);display:block}
.omx-ti__h{font-size:clamp(22px,3vw,34px);font-weight:800;margin:0 0 12px}
.omx-ti__text{color:var(--omx-ink-soft);line-height:1.9;margin-bottom:18px}

/* FAQ */
.omx-faq{margin-block:34px}
.omx-faq__wrap{max-width:820px;margin-inline:auto}
.omx-faq__list{display:flex;flex-direction:column;gap:10px}
.omx-faq__item{border:1px solid var(--omx-border);border-radius:var(--omx-radius-sm);background:#fff;overflow:hidden}
.omx-faq__q{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
.omx-faq__q::-webkit-details-marker{display:none}
.omx-faq__chev{width:10px;height:10px;border-inline-end:2px solid var(--omx-ink-soft);border-block-end:2px solid var(--omx-ink-soft);transform:rotate(45deg);transition:transform .2s}
.omx-faq__item[open] .omx-faq__chev{transform:rotate(-135deg)}
.omx-faq__a{padding:0 18px 16px;color:var(--omx-ink-soft);line-height:1.9}

/* Testimonials */
.omx-tst{margin-block:34px}
.omx-tst__wrap--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--omx-gap)}
.omx-tst__wrap--carousel{display:flex;gap:var(--omx-gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:8px}
.omx-tst__wrap--carousel .omx-tst__card{flex:0 0 min(320px,80%);scroll-snap-align:start}
.omx-tst__card{background:#fff;border:1px solid var(--omx-border);border-radius:var(--omx-radius);padding:20px;margin:0}
.omx-tst__stars{color:#f5a623;letter-spacing:2px;margin-bottom:10px}
.omx-tst__quote{margin:0 0 14px;line-height:1.9;color:var(--omx-ink)}
.omx-tst__who{display:flex;align-items:center;gap:12px}
.omx-tst__avatar{width:46px;height:46px;border-radius:50%;background:var(--omx-surface);display:grid;place-items:center;overflow:hidden;font-weight:800;color:var(--omx-primary)}
.omx-tst__avatar img{width:100%;height:100%;object-fit:cover}
.omx-tst__meta{display:flex;flex-direction:column}
.omx-tst__meta small{color:var(--omx-ink-faint)}

/* Video */
.omx-video{margin-block:34px}
.omx-video__frame{position:relative;width:100%;border-radius:var(--omx-radius);overflow:hidden;background:#000;max-width:980px;margin-inline:auto}
.omx-video__frame--16x9{aspect-ratio:16/9}.omx-video__frame--4x3{aspect-ratio:4/3}.omx-video__frame--1x1{aspect-ratio:1/1}
.omx-video__frame iframe,.omx-video__frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Brand logos */
.omx-brands{margin-block:34px}
.omx-brands__grid{display:grid;grid-template-columns:repeat(var(--omx-brand-cols,6),1fr);gap:var(--omx-gap);align-items:center}
.omx-brands__item{display:grid;place-items:center;padding:14px;background:#fff;border:1px solid var(--omx-border);border-radius:var(--omx-radius-sm);min-height:76px}
.omx-brands__item img{max-height:46px;width:auto;object-fit:contain;transition:filter .2s,opacity .2s}
.omx-brands.is-grayscale .omx-brands__item img{filter:grayscale(1);opacity:.7}
.omx-brands.is-grayscale .omx-brands__item:hover img{filter:none;opacity:1}

/* Offers + countdown */
.omx-oc{margin-block:30px}
.omx-oc__inner{border-radius:var(--omx-radius);padding:clamp(22px,4vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.omx-oc--accent .omx-oc__inner{background:linear-gradient(120deg,var(--omx-primary),color-mix(in srgb,var(--omx-primary) 60%,var(--omx-accent)));color:#fff}
.omx-oc--dark .omx-oc__inner{background:var(--omx-ink);color:#fff}
.omx-oc--light .omx-oc__inner{background:var(--omx-surface);color:var(--omx-ink);border:1px solid var(--omx-border)}
.omx-oc__h{font-size:clamp(22px,3vw,34px);font-weight:800;margin:0}
.omx-oc__sub{margin:0;opacity:.9}
.omx-oc__timer{display:flex;gap:10px}
.omx-oc__unit{display:flex;flex-direction:column;align-items:center;min-width:64px;background:rgba(255,255,255,.18);border-radius:12px;padding:10px 6px}
.omx-oc--light .omx-oc__unit{background:#fff}
.omx-oc__unit b{font-size:clamp(22px,3vw,32px);font-variant-numeric:tabular-nums;line-height:1}
.omx-oc__unit small{font-size:11px;opacity:.85;margin-top:4px}
.omx-oc.is-expired .omx-oc__timer[data-on-expire="hide"]{display:none}

/* Newsletter */
.omx-nl{margin-block:34px}
.omx-nl__box{background:var(--omx-surface);border:1px solid var(--omx-border);border-radius:var(--omx-radius);padding:clamp(24px,4vw,44px);text-align:center;max-width:720px;margin-inline:auto}
.omx-nl__h{font-size:clamp(20px,2.6vw,28px);font-weight:800;margin:0 0 8px}
.omx-nl__sub{color:var(--omx-ink-soft);margin:0 0 18px}
.omx-nl__form{display:flex;gap:10px;max-width:460px;margin-inline:auto}
.omx-nl__input{flex:1;border:1px solid var(--omx-border);border-radius:999px;padding:11px 18px;font:inherit;background:#fff}
.omx-nl__consent{font-size:12px;color:var(--omx-ink-faint);margin:12px 0 0}
.omx-nl__msg{margin:10px 0 0;font-weight:600;min-height:20px}

@media (max-width:768px){
  .omx-ti__grid{grid-template-columns:1fr}
  .omx-ti--img-end .omx-ti__media{order:0}
  .omx-brands__grid{grid-template-columns:repeat(3,1fr)}
  .omx-oc__timer{flex-wrap:wrap;justify-content:center}
  .omx-nl__form{flex-direction:column}
}