/* --- Variables (tweak to match theme) --- */
:root{
  --lpm-green:#34b566;        /* active tab */
  --lpm-tab-bg:#ffffff;
  --lpm-tab-shadow:0 8px 22px rgba(0,0,0,.06);
  --lpm-muted:#f6f7f9;
  --lpm-pill-bg:#f1f5f9;
  --lpm-text:#111827;
  --lpm-subtle:#6b7280;
  --lpm-radius-lg:18px;
  --lpm-radius-pill:999px;
}

/* --- Tabs Wrapper --- */
.lpm-tabs{width:100%}

/* --- Tab Bar: single line + horizontal scroll --- */
.lpm-tabbar{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:nowrap;                 /* keep in one line */
  overflow-x:auto;                  /* scroll if too many */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch; /* smooth on iOS */
  padding:10px 14px;
  background:var(--lpm-tab-bg);
  border-radius:16px;
  box-shadow:var(--lpm-tab-shadow);
  scroll-snap-type:x mandatory;     /* optional snap */
}

/* hide scrollbar (keeps accessibility – still scrollable) */
.lpm-tabbar::-webkit-scrollbar{height:8px}
.lpm-tabbar::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:8px}
@supports (scrollbar-width: thin){
  .lpm-tabbar{scrollbar-width:thin; scrollbar-color:#e5e7eb transparent;}
}

/* --- Tab Button: no wrapping + snap --- */
.lpm-tabbtn{
  flex:0 0 auto;                    /* don't shrink */
  white-space:nowrap;               /* keep on one line */
  border:0;
  background:var(--lpm-tab-bg);
  color:#111;
  font-weight:700;
  padding:14px 22px;
  border-radius:16px;
  cursor:pointer;
  box-shadow:var(--lpm-tab-shadow);
  transition:transform .2s ease, background .2s ease, color .2s ease;
  scroll-snap-align:center;         /* optional snap */
}
.lpm-tabbtn:hover{transform:translateY(-1px)}
.lpm-tabbtn.is-active{
  background:var(--lpm-green);
  color:#fff;
}

/* --- Panes --- */
.lpm-pane{display:none}
.lpm-pane.is-active{display:block}

/* --- Two-column grid like your layout --- */
.lpm-grid{
  display:grid;
  gap:18px;
  align-items:start;
  margin-top:6px;
}
.lpm-grid.two-col{grid-template-columns:1fr 1fr}
.lpm-grid.one-col{grid-template-columns:1fr}

/* --- Rows with title + price pills --- */
.lpm-col{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lpm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--lpm-muted);
  border-radius:var(--lpm-radius-lg);
  padding:10px 14px;
}
.lpm-title{
  color:var(--lpm-text);
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lpm-price{
  background:var(--lpm-pill-bg);
  padding:6px 14px;
  border-radius:var(--lpm-radius-pill);
  font-weight:700;
  /* IMPORTANT: let child elements control colors */
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Sub-rows look (optional, lighter line like screenshot) */
.lpm-row.is-sub{background:#f9fafb}

/* Center tabs on wide screens (optional) */
@media (min-width: 1024px){
  .lpm-tabbar{justify-content:center}
}

/* ================================
   Price styling (force through themes)
   ================================ */

/* reset links inside price pills, if any theme injects <a> */
.lpm-price a{
  color:inherit !important;
  text-decoration:none !important;
  font-weight:inherit !important;
}

/* Regular (struck-through) price */
.lpm-grid .lpm-row .lpm-price s{
  color:#888 !important;                 /* grey for regular price */
  font-weight:400 !important;
  text-decoration:line-through !important;
  text-decoration-thickness:auto !important;
  text-decoration-color:#888 !important; /* make the strike grey too */
  margin-right:0 !important;             /* gap is handled by .lpm-price */
}

/* Sale price */
.lpm-grid .lpm-row .lpm-price .lpm-sale{
  color:#d00 !important;                 /* red */
  font-weight:800 !important;            /* bold */
  font-size:1.1em !important;            /* slightly larger */
}

/* Save badge (if used) */
.lpm-grid .lpm-row .lpm-price .lpm-save{
  background:#34b566;
  color:#fff !important;
  font-size:.75em;
  font-weight:700;
  padding:2px 6px;
  border-radius:6px;
  line-height:1;
}