/* ===== Theme 1 (full) ===== */
:root{ color-scheme: light; }

/* Host */
.tm1-wrap{
  --tm1-sticky-top:0px;
  --tm1-cats-h:60px;
  --tm1-radius:14px;
  --tm1-shadow:0 10px 30px rgba(2,6,23,.06);
  --tm1-border:1px solid #e8edf4;
  --tm1-muted:#64748b;
  --tm1-ink:#0f172a;

  max-width:1120px;
  margin:0 auto;
  padding:16px 16px 40px;
  color:var(--tm1-ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
  line-height:1.5;
  overflow: visible !important;
}
.tm1-host-auto{ height:auto!important; min-height:0!important; }
.tm1-wrap *{ box-sizing:border-box; }
.tm1-wrap img{ display:block; max-width:100%; height:auto; }
.tm1-wrap a{ color:inherit; text-decoration:none; }

/* Headings + sections */
.tm1-title{ font-size:clamp(22px,2.6vw,28px); font-weight:800; margin:4px 0 10px; }
.tm1-section{
  scroll-margin-top:calc(var(--tm1-sticky-top) + var(--tm1-cats-h) + 14px);
  margin-top:12px; margin-bottom:26px;
}
.tm1-section.is-hidden{ display:none!important; }
.tm1-h{ display:flex; align-items:flex-end; gap:10px; margin:0 2px 8px; }
.tm1-count{ font-size:12px; color:var(--tm1-muted); font-weight:600; margin-bottom:2px; }

/* ===== Toolbar ===== */
.tm1-toolbar{ display:flex; justify-content:flex-end; gap:10px; margin:2px 0 8px; }
.tm1-sel{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e6ecf5; border-radius:12px;
  padding:6px 10px; box-shadow:0 6px 20px rgba(2,6,23,.06);
}
.tm1-sel .tm1-ico{ color:#64748b; display:inline-flex; }
.tm1-select{ appearance:none; border:none; background:transparent; font-weight:800; color:#0f172a; padding:0 18px 0 2px; cursor:pointer; }
.tm1-caret{ margin-inline-start:-14px; color:#64748b; pointer-events:none; }

/* ===== Categories ===== */
.tm1-cats{
  position:relative;
  z-index:10;
  margin:10px 0 18px;
  padding:2px 0 3px;
  overflow:visible;
}
.tm1-cats-placeholder{
  display:none;
  width:100%;
}

/* Rail: 2 rows (row 1 pills, row 2 arrows) */
.tm1-cats-rail{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items:center;
  row-gap:6px;
}

/* Scrolling pills row */
.tm1-cats-inner{
  grid-column:1 / -1; grid-row:1;
  display:flex; align-items:center; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:6px 16px; border-radius:18px;
  background:#fff; border:var(--tm1-border); box-shadow:var(--tm1-shadow);
  scroll-behavior:auto;
}

/* ===== Scroll buttons ===== */
.tm1-cat-btn{
  position: static !important;
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #0f172a;
  border: 1px solid #e6ecf5;
  box-shadow: 0 12px 34px rgba(2,6,23,.14);
  transition: none; padding: 0;
}
.tm1-cat-btn:hover{ transform: none; }
.tm1-cat-btn.is-disabled{ opacity: .35; pointer-events: none; }
.tm1-cat-prev{ grid-row:2; grid-column:1; justify-self:start; margin-inline-start:6px; }
.tm1-cat-next{ grid-row:2; grid-column:2; justify-self:end; margin-inline-end:6px; }

/* RTL arrows positions */
.tm1-wrap[dir="rtl"] .tm1-cat-prev{ grid-column:2; justify-self:end; margin-inline-end:6px; margin-inline-start:0; }
.tm1-wrap[dir="rtl"] .tm1-cat-next{ grid-column:1; justify-self:start; margin-inline-start:6px; margin-inline-end:0; }

/* ===== Category pills ===== */
.tm1-cat-pill{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:var(--tm1-border); border-radius:32px;
  padding:10px 14px; transition:all .2s ease;
  box-shadow:0 2px 12px rgba(2,6,23,.04); cursor:pointer;
}
.tm1-cat-pill:hover{ box-shadow:0 6px 18px rgba(2,6,23,.08); }
.tm1-cat-pill.is-active{ border-color:#c7d7ff; box-shadow:0 10px 30px rgba(30,64,175,.12); }
.tm1-pill-all{ background:#f7f9ff; border-style:dashed; }
.tm1-cat-thumb{ width:64px; height:44px; border-radius:12px; object-fit:cover; border:1px solid #eef2f7; }
.tm1-cat-name{ font-weight:800; font-size:15px; white-space:nowrap; }

/* ===== RTL pills row (visual start at right) ===== */
.is-rtl .tm1-cats-inner{ direction: rtl; flex-direction: row; justify-content: flex-start; }
.is-rtl .tm1-pill-all{ order:0; }

/* ===== Grid / cards ===== */
.tm1-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:980px){ .tm1-grid{ grid-template-columns:1fr 1fr; } }

.tm1-card{
  position:relative;
  display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:stretch;
  background:#fff; border-radius:18px; border:var(--tm1-border); box-shadow:var(--tm1-shadow);
  padding:14px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:default;
}
.tm1-card:hover{ transform:none; border-color:rgba(226,232,240,.95); box-shadow:var(--tm1-shadow); }
@media (max-width:599px){ .tm1-card{ grid-template-columns:1fr; } }

.tm1-card-media{
  position: relative !important; /* needed for badge */
  height:220px; border-radius:14px; overflow:hidden;
  border:1px solid #eef2f7; background:#f6f8fb;
}
.tm1-card-media img{ width:100%; height:100%; object-fit:cover; }

.tm1-card-body{ display:flex; flex-direction:column; gap:10px; }
.tm1-card-title{ display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; margin:2px 0 2px; }
.tm1-card-desc{ color:var(--tm1-muted); font-size:14px; }
.tm1-card-meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
.tm1-add-to-cart{
  border:1px solid rgba(239,68,68,.20)!important;
  background:#ef4444!important;
  color:#fff!important;
  padding:8px 15px!important;
  border-radius:999px!important;
  cursor:pointer!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:0 10px 22px rgba(239,68,68,.22)!important;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease!important;
}
.tm1-add-to-cart:hover{ background:#dc2626!important; opacity:1!important; transform:translateY(-1px); box-shadow:0 14px 28px rgba(239,68,68,.28)!important; }
.tm1-add-to-cart:focus{ outline:none!important; box-shadow:0 10px 22px rgba(239,68,68,.22)!important; }
.tm1-price{ font-weight:900; color:#0b3b91; }

/* Interaction polish: remove browser blue tap/focus selection inside the menu only. */
.tm1-wrap :where(a, button, [role="button"], [tabindex], input[type="button"], input[type="submit"]),
#ezm-addons-modal :where(a, button, [role="button"], [tabindex], input[type="button"], input[type="submit"], .ezm-am-qty, .ezm-am-qty-btn, .ezm-am-option){
  -webkit-tap-highlight-color:transparent!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  -moz-user-select:none!important;
  user-select:none!important;
  touch-action:manipulation;
}

.tm1-wrap :where(a, button, [role="button"], [tabindex]):focus,
.tm1-wrap :where(a, button, [role="button"], [tabindex]):active,
#ezm-addons-modal :where(a, button, [role="button"], [tabindex]):focus,
#ezm-addons-modal :where(a, button, [role="button"], [tabindex]):active{
  outline:none!important;
  -moz-outline-style:none!important;
}

.tm1-wrap ::selection,
#ezm-addons-modal ::selection{
  background:transparent!important;
}

/* A11y: keep a clean custom focus only for keyboard navigation. */
.tm1-wrap :where(a,button,[tabindex]):focus-visible,
#ezm-addons-modal :where(a,button,[tabindex]):focus-visible{
  outline:2px solid rgba(239,68,68,.35)!important;
  outline-offset:3px;
  border-radius:10px;
}
.tm1-cat-pill, .tm1-cats-inner a{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; cursor:pointer;
}

/* Mobile */
@media (max-width:768px){
  .tm1-wrap{ padding:10px 10px 28px; }
  .tm1-cat-pill{ padding:8px 10px; gap:8px; }
  .tm1-cat-thumb{ width:48px; height:34px; }
  .tm1-cat-name{ font-size:14px; }
  .tm1-title{ font-size:22px; margin-top:6px; }
  .tm1-section{ margin-top:8px; margin-bottom:18px; }
  .tm1-card{ padding:10px; gap:12px; }
  .tm1-card-media{ height:200px; }
  .tm1-card-title{ font-size:16px; }
  .tm1-card-desc{ font-size:13px; }
  .tm1-cat-btn{ width:30px; height:30px; box-shadow:0 4px 12px rgba(2,6,23,.10); }
}

/* RTL text align */
.is-rtl .tm1-title,
.is-rtl .tm1-count,
.is-rtl .tm1-card-title,
.is-rtl .tm1-card-desc,
.is-rtl .tm1-price{ text-align:right; }

.tm1-cat-btn:disabled{ opacity:.35; pointer-events:none; }

/* Toolbar at right */
.tm1-toolbar{
  display: block; text-align: right; margin: 2px 0 8px;
}
.tm1-toolbar .tm1-sel{
  display: inline-flex; vertical-align: middle; margin-inline-start: 8px;
}
@media (max-width: 768px){
  .tm1-toolbar{ text-align: right; }
  .tm1-toolbar .tm1-sel{ margin-inline-start: 6px; }
}

/* ===== Best Seller badge (new) ===== */
.tm1-card .tm1-card-media .tm1-badge-bestseller{
  position: absolute !important;
  inset-block-start: 10px;        /* top */
  inset-inline-start: 10px;       /* left */
  z-index: 3;

  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tm1-ribbon, #cfa602);
  color:#fff; font-weight:900; font-size:12px; line-height:1;
  text-transform: uppercase;
  padding:6px 10px;
  border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  pointer-events:none;
}
.is-rtl .tm1-card .tm1-card-media .tm1-badge-bestseller{
  inset-inline-start:auto; inset-inline-end:10px;
}
@media (max-width:768px){
  .tm1-card .tm1-card-media .tm1-badge-bestseller{
    inset-block-start:8px; inset-inline-start:8px;
    padding:5px 9px; font-size:11px;
  }
  .is-rtl .tm1-card .tm1-card-media .tm1-badge-bestseller{
    inset-inline-end:8px;
  }
}


/* Category UX fixes */
.tm1-cats-inner{ scrollbar-width:none; }
.tm1-cats-inner::-webkit-scrollbar{ display:none; }
.tm1-cat-btn{ cursor:pointer; }
.tm1-cat-btn:disabled,
.tm1-cat-btn.is-disabled{ cursor:default; opacity:.35; pointer-events:none; }
@media (max-width:768px){
  .tm1-cats{ top:8px; }
}


/* Category filter mode: sticky category bar without jumpy/fixed behavior. */
.tm1-cats,
.tm1-cats.is-fixed,
.tm1-cats.is-floating{
  position:sticky!important;
  top:8px!important;
  left:auto!important;
  right:auto!important;
  width:auto!important;
  transform:none!important;
  z-index:80!important;
  background:transparent!important;
}
.admin-bar .tm1-cats{ top:40px!important; }
.tm1-cats-placeholder{ display:none!important; height:0!important; }
.tm1-section.is-hidden{ display:none!important; }
.tm1-wrap[data-active-cat]:not([data-active-cat="all"]) .tm1-section:not(.is-hidden){ margin-top:10px; }
@media (max-width:768px){ .tm1-cats{ top:6px!important; } }


/* Smooth smart image loading for Theme 1 cards */
.tm1-card-media.tm1-lazy-box{
  background:#f4f7fb;
  isolation:isolate;
}
.tm1-card-media.tm1-lazy-box::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(110deg,#f3f6fb 8%,#e9eef6 18%,#f3f6fb 33%);
  background-size:200% 100%;
  animation:tm1LazyShimmer 1.15s linear infinite;
  opacity:1;
  transition:opacity .28s ease;
  pointer-events:none;
}
.tm1-card-media.tm1-lazy-box.is-loaded::before,
.tm1-card-media.tm1-lazy-box.is-error::before{
  opacity:0;
  animation:none;
}
.tm1-card-media .tm1-lazy-img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .28s ease, transform .36s ease;
  will-change:opacity, transform;
}
.tm1-card-media.is-loaded .tm1-lazy-img{
  opacity:1;
  transform:scale(1);
}
.tm1-card-media.is-error{
  background:#f8fafc;
}
@keyframes tm1LazyShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion:reduce){
  .tm1-card-media.tm1-lazy-box::before{animation:none;}
  .tm1-card-media .tm1-lazy-img{transition:none;transform:none;}
}