/* =============================================================
 * Shale Experts Store — modern theme
 * One stylesheet replacing the legacy screen.css + products.css.
 * Shopify-like layout: clean white surface, high-contrast dark nav,
 * rigid product-card grid, brand-accent pricing + CTAs.
 * ============================================================= */

/* ---- Design tokens ---- */
:root {
  --c-bg:          #ffffff;
  --c-surface:     #f7f7f8;
  --c-surface-alt: #fafafa;
  --c-border:      #e5e7eb;
  --c-border-str:  #d1d5db;

  --c-text:        #1f2937;
  --c-text-mute:   #6b7280;
  --c-text-faint:  #9ca3af;

  --c-brand:       #d72f22;
  --c-brand-dark:  #b91c1c;
  --c-accent:      #c84f2e;

  --c-dark:        #111827;
  --c-dark-2:      #1f2937;

  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;

  --shadow-1: 0 1px 2px rgba(17,24,39,0.05);
  --shadow-2: 0 4px 10px rgba(17,24,39,0.08);

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;

  --container-max: 1200px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--c-brand);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--c-brand-dark); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5 { margin: 0 0 var(--s-3); color: var(--c-dark); line-height: 1.25; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p  { margin: 0 0 var(--s-3); }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-4) 0; }

/* Fix legacy horizontal-overflow traps set by the old wrapper width */
.wrapper {
  width: auto !important;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
body.large-img { background: var(--c-bg); }
.outer-wrapper {
  width: auto;
  max-width: none;
  margin: 0;
}

/* ---- Header (shared main-header organism) ---- */
header.products {
  --c-account-menu-mobile-top: max(112px, calc(env(safe-area-inset-top) + 104px));
  --c-account-menu-mobile-max-height: calc(100vh - 128px);
  color: #fff;
  min-height: 0;
  padding: 0;
  margin-bottom: 0;
}
header.products .se-main-header {
  box-shadow: 0 10px 28px rgba(2,16,30,0.18);
}
header.products .se-main-header__inner.wrapper {
  width: min(calc(100% - 32px), var(--container-max)) !important;
}
header.products .se-header-search {
  width: min(36vw, 400px);
  min-width: 230px;
}

/* ---- Nav bar (high-contrast, dark on white) ---- */
nav {
  background: #fff !important;
  border-bottom: 1px solid var(--c-border);
  padding: 0 !important;
}
nav ul {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
nav ul::before, nav ul::after { content: none; display: none; }
nav ul li {
  float: none;
  list-style: none;
  border: 0 !important;
  position: relative;
}
nav ul li a,
nav ul li a:link,
nav ul li a:visited {
  display: inline-block;
  color: var(--c-text) !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 -2px 0 transparent;
}
nav ul li a:hover {
  color: var(--c-brand) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--c-brand) !important;
}
nav ul li.viewcart {
  margin-left: auto;
  float: none;
}
nav ul li.viewcart a {
  color: var(--c-brand) !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
nav ul li.viewcart a:hover {
  color: var(--c-brand-dark) !important;
  box-shadow: none !important;
}

/* ---- Page container ---- */
#content {
  background: var(--c-bg);
  padding: var(--s-5) 0;
  min-height: 60vh;
}
.content, .content.clearfix {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: block;
}
/* Two-column layout only when there's actually a sidebar in the content. */
.content.store-products,
.content:has(> .prod-sidebar) {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
}
.content-wrapper {
  max-width: none;
  margin: 0;
  padding: var(--s-5) var(--s-4);
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--c-text-mute);
  background: transparent;
  border: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.breadcrumbs a { color: var(--c-text-mute); }
.breadcrumbs a:hover { color: var(--c-brand); }
.breadcrumbs span,
.breadcrumbs .breadcrumb_separator {
  color: var(--c-text-faint);
  margin: 0 6px;
}

/* ---- Sidebar ---- */
.prod-sidebar {
  flex: 0 0 220px;
  width: 220px;
  padding: 0;
  background: transparent;
  border: 0;
}
.prod-sidebar .vertmenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prod-sidebar .vertmenu > li {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
}
.prod-sidebar .section-heading,
.prod-sidebar .vertmenu > li:first-child,
.prod-sidebar .vertmenu > li:has(> strong) {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--c-text-faint);
  padding: 18px 8px 6px !important;
}
.prod-sidebar .section-heading.play-heading {
  margin-top: var(--s-3);
}
.prod-sidebar .vertmenu li strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-faint);
  font-weight: 700;
}
.prod-sidebar .section-rule,
.prod-sidebar .vertmenu hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 4px 0 6px;
  height: 0;
  padding: 0;
}
.prod-sidebar .vertmenu a {
  display: block;
  padding: 7px 10px;
  color: var(--c-text);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  text-transform: none !important;
}
.prod-sidebar .vertmenu a:hover {
  background: var(--c-surface);
  color: var(--c-brand);
}
.prod-sidebar .vertmenu li.selected_nav a,
.prod-sidebar .vertmenu li.selected_nav {
  background: var(--c-brand);
  color: #fff !important;
  text-shadow: none;
}
.prod-sidebar .vertmenu li.selected_nav a {
  color: #fff !important;
}
.prod-sidebar .vertmenu li.viewcart a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-brand);
  font-weight: 600;
  margin-top: var(--s-2);
  background: #fff8f6;
  border: 1px solid rgba(215,47,34,0.18);
}
.prod-sidebar .vertmenu li.viewcart .count_product {
  position: static;
  display: inline;
  margin: 0;
  padding: 0;
  height: auto;
  font-size: 13px;
  color: var(--c-text-mute);
  font-weight: 500;
}

/* ---- Product grid + card (uniform) ---- */
.prod-main {
  flex: 1 1 auto;
  min-width: 0;
}
#Featured-Item { margin-bottom: var(--s-5); }
.featured {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}
.featured img { width: 100%; display: block; }
.item_wrapper2 {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 40px 20px 20px !important;
  height: auto !important;
}
.item_wrapper2 h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.item_wrapper2 h4 a { color: #fff; }

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
  align-items: stretch;
  width: 100%;
}
.product {
  --store-product-title-slot: 51px;
  --store-product-desc-slot: 57px;
  width: auto !important;
  min-height: 380px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  float: none !important;
  height: auto;
  position: relative;
}
.product:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--c-border-str);
  transform: translateY(-2px);
}
.product .product-img {
  background: var(--c-surface);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
}
.product .product-img a {
  display: block;
  width: 100%;
  height: 100%;
}
.product .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}
.product .product-img img[src$="no_image.jpeg"] {
  object-fit: contain;
  padding: var(--s-5);
  background: #fff;
}
.product .product-name {
  padding: var(--s-3) var(--s-3) 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-dark);
  margin: 0 0 6px;
  min-height: var(--store-product-title-slot);
  height: var(--store-product-title-slot);
  max-height: var(--store-product-title-slot);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: inherit;
}
.product .product-name a {
  color: var(--c-dark);
}
.product .product-name a:hover { color: var(--c-brand); }
.product .product-desc {
  padding: 0 var(--s-3);
  font-size: 13px;
  color: var(--c-text-mute);
  line-height: 1.45;
  min-height: var(--store-product-desc-slot);
  height: var(--store-product-desc-slot);
  max-height: var(--store-product-desc-slot);
  margin: 0 0 var(--s-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}
.product .product-price {
  padding: var(--s-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-dark);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: auto 0 0;
  min-height: 50px;
  width: auto !important;
  float: none !important;
  position: static !important;
  flex: 0 0 auto;
}
.product .product-price strong {
  font-weight: 500;
  color: var(--c-text-mute);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.product .product-price .blue {
  color: var(--c-brand);
  font-size: 16px;
  font-weight: 700;
}
.product .product-price.product-price--fill {
  flex-direction: column;
  align-items: flex-start;
}

input.add2cart {
  cursor: pointer;
  padding: 8px 14px;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--c-brand);
  border-radius: var(--r);
  transition: background 0.15s ease;
  margin: 0 var(--s-3) var(--s-3);
  align-self: stretch;
  position: static !important;
  float: none !important;
}
.product input.add2cart {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
}
input.add2cart:hover { background: var(--c-brand-dark); }

/* ---- Whole-card click target ---- */
/* The cover link stretches across the entire card. Real anchors and the
   add-to-cart button sit above it via position + z-index so they keep
   their own click behavior. */
.product--linked .product-cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: inherit;
}
.product--linked .product-cover-link:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: -2px;
}
.product--linked .product-img,
.product--linked .product-name,
.product--linked .product-desc,
.product--linked .product-price,
.product--linked input.add2cart {
  position: relative;
  z-index: 2;
}
.product--linked .product-img a,
.product--linked .product-name a {
  position: relative;
  z-index: 2;
}

/* ---- Search "no results" ---- */
.se-search-results {
  float: none;
  padding: var(--s-3) 0;
  color: var(--c-text-mute);
  font-size: 14px;
  width: 100%;
}
.se-search-results u { text-decoration: none; font-weight: 600; color: var(--c-dark); }

.se-empty-state {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-text-mute);
}

/* ---- Pagination ---- */
.se-pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: var(--s-5) 0 0;
  float: none;
}

/* ---- Cart table ---- */
.se-section-title {
  margin: 0 0 var(--s-4);
  font-size: 22px;
  font-weight: 600;
  border-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.se-section-title i { color: var(--c-brand); }
.se-cart-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
  float: none !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.se-cart-actions .or-label {
  margin: 0 !important;
  color: var(--c-text-mute);
  font-size: 13px;
}
.se-cart-actions .guest-checkout {
  color: var(--c-brand) !important;
  font-size: 14px !important;
  font-weight: 600;
  margin-left: 0 !important;
}

.se-cart-wrap {
  width: auto;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
  max-width: 100%;
}
.se-cart-wrap table { border-collapse: collapse; width: 100%; }
.se-cart-wrap thead tr { background: var(--c-surface); }
.se-cart-wrap thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-mute);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
.se-cart-wrap tbody td {
  padding: 16px 14px;
  border-top: 1px solid var(--c-border);
  border-bottom: 0;
  vertical-align: middle;
  font-size: 14px;
}
.se-cart-wrap .col-img    { width: 120px; }
.se-cart-wrap .col-img img { border-radius: var(--r); max-height: 80px; object-fit: cover; }
.se-cart-wrap .col-desc   { font-weight: 600; color: var(--c-dark); }
.se-cart-wrap .col-price  { text-align: right; font-variant-numeric: tabular-nums; }
.se-cart-wrap .col-qty    { text-align: center; width: 140px; }
.se-cart-wrap .col-qty .qty-input {
  display: inline-block;
  width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--c-border-str);
  border-radius: var(--r);
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.se-cart-wrap .col-total  { text-align: right; width: 120px; font-weight: 600; border-right: 0; font-variant-numeric: tabular-nums; }
.se-cart-wrap .row-summary td {
  text-align: right;
  padding: 14px;
  font-size: 13px;
  color: var(--c-text-mute);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-alt);
}
.se-cart-wrap .row-total td {
  text-align: right;
  padding: 16px 14px;
  background: var(--c-surface);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-dark);
  border-top: 1px solid var(--c-border);
}

.se-cart-page {
  padding: var(--s-4) var(--s-4) var(--s-5);
}
.se-cart-page .breadcrumbs {
  margin: 0 0 var(--s-4);
}
.se-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.se-cart-header .se-section-title {
  margin: 0;
}
.se-cart-wrap .col-qty .qty-update {
  background: var(--c-brand);
  color: #fff;
  border: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.se-cart-wrap .col-qty .qty-update:hover { background: var(--c-brand-dark); }
.se-cart-wrap .col-qty .remove-x {
  color: var(--c-text-mute);
  font-size: 12px;
  text-decoration: none;
}
.se-cart-wrap .col-qty .remove-x:hover { color: #c00; }
.se-cart-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--c-text-mute);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  margin: var(--s-4) 0;
}
.se-cart-empty p { margin: 0 0 var(--s-3); font-size: 16px; }
.se-cart-footer {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-5);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.se-cart-continue {
  font-size: 14px !important;
  color: var(--c-brand) !important;
  font-weight: 500;
  margin: 0 !important;
}
a.continue-shop:hover { background: transparent; color: var(--c-brand-dark) !important; }

input[type="button"].checkout,
.checkout,
input.checkout {
  cursor: pointer;
  padding: 12px 28px !important;
  background: var(--c-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: auto !important;
  margin: 0 !important;
  transition: background 0.15s ease;
}
input[type="button"].checkout:hover { background: var(--c-brand-dark) !important; }

/* ---- Remove-x (cart row) ---- */
.remove-x {
  width: 20px; height: 20px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text-mute);
  font-size: 12px !important;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  text-decoration: none !important;
}
.remove-x:hover { background: var(--c-brand); color: #fff; }

/* ---- Buttons on non-cart pages ---- */
button,
input[type="submit"] {
  cursor: pointer;
  font-family: inherit;
}

/* ---- Checkout + auth forms ---- */
.se-checkout-page,
.se-auth-page {
  background:
    radial-gradient(circle at top left, rgba(200,79,46,0.08), transparent 30%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
.se-checkout-page .wrapper,
.se-auth-page .wrapper {
  width: auto !important;
  max-width: var(--container-max);
  padding: 0 var(--s-4) !important;
}
.se-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--s-5);
  align-items: start;
}
.se-checkout-page .signup_left,
.se-checkout-page .signup_right,
.se-checkout-page .subscribe_right {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.se-checkout-card,
.se-payment-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
}
.se-checkout-page .checkout-head,
.se-payment-card .checkout-head {
  border: 0 !important;
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4) !important;
  padding: 0 0 var(--s-3) !important;
  color: var(--c-dark) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
.se-checkout-form fieldset {
  width: auto !important;
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-border-str) !important;
  border-radius: var(--r-lg) !important;
  background: var(--c-surface-alt);
}
.se-checkout-form legend {
  padding: 0 var(--s-2);
  color: var(--c-dark);
  font-size: 14px;
}
.se-checkout-form table,
.se-payment-card table {
  width: 100% !important;
  border: 0 !important;
  border-collapse: collapse;
}
.se-checkout-form tr,
.se-payment-card tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}
.se-checkout-form td,
.se-payment-card td {
  display: block;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}
.se-checkout-form label,
.se-payment-card label {
  color: var(--c-text);
  font-size: 13px !important;
  font-weight: 600;
}
.se-checkout-page input[type="text"],
.se-checkout-page input:not([type]),
.se-checkout-page input[type="password"],
.se-checkout-page input[type="email"],
.se-checkout-page select,
.se-checkout-page textarea,
.se-auth-card input[type="text"],
.se-auth-card input[type="password"] {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 40px;
  padding: 9px 11px !important;
  border: 1px solid var(--c-border-str) !important;
  border-radius: var(--r) !important;
  background: #fff !important;
  color: var(--c-text);
  font-size: 14px !important;
  line-height: 1.3 !important;
}
.se-checkout-page input[type="radio"],
.se-checkout-page input[type="checkbox"] {
  width: auto !important;
  margin: 0 5px 0 0 !important;
}
.se-checkout-page .select_input,
.se-checkout-page .select_country,
.se-checkout-page .select_province {
  width: 100% !important;
  height: auto !important;
}
.se-payment-card {
  position: sticky;
  top: var(--s-4);
}
.se-payment-card .payment-pane,
.se-payment-card .credit_card_fields,
.se-payment-card .column.fields {
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}
.se-payment-card .select-box.half {
  width: calc(50% - 8px) !important;
  display: inline-block;
}
.se-payment-card #security_code {
  max-width: 70px;
}
.se-cvv-hint {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-left: var(--s-2);
  color: var(--c-text-mute);
  font-size: 12px;
}
#payment_submit_button_credit_card,
.se-auth-card .form-submit {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin: var(--s-2) 0 0 !important;
  padding: 12px 22px !important;
  border: 0 !important;
  border-radius: var(--r) !important;
  background: var(--c-brand) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#payment_submit_button_credit_card:hover,
.se-auth-card .form-submit:hover {
  background: var(--c-brand-dark) !important;
}
.se-checkout-page .error,
.se-auth-card .error {
  margin: 0 0 var(--s-4) !important;
  padding: var(--s-3);
  border: 1px solid rgba(185,28,28,0.25);
  border-radius: var(--r);
  background: #fff5f5;
  color: var(--c-brand-dark);
  font-size: 13px;
}
.se-auth-page {
  min-height: 100vh;
  padding: var(--s-5);
}
.se-auth-page--modal {
  min-height: auto;
  padding: var(--s-3);
}
.se-auth-page--modal .se-auth-card {
  padding: var(--s-4);
  box-shadow: none;
  border: 0;
  max-width: 100%;
}
.se-auth-page--modal .se-auth-title {
  font-size: 20px;
  margin-bottom: var(--s-3);
}
.se-auth-page--modal .se-auth-form {
  gap: var(--s-2);
}
.se-auth-page--modal .se-auth-form label {
  font-size: 12px;
  margin-bottom: 2px;
}
.se-auth-page--modal .se-auth-form input[type="text"],
.se-auth-page--modal .se-auth-form input[type="email"],
.se-auth-page--modal .se-auth-form input[type="password"] {
  padding: 8px 10px;
  font-size: 14px;
}
.se-auth-page--modal .se-auth-actions {
  margin-top: var(--s-3);
}
.se-auth-page--modal .se-auth-actions .form-submit {
  padding: 9px 22px;
  font-size: 14px;
}
.se-auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.se-auth-page--full .se-auth-card {
  margin-top: var(--s-5);
}
.se-auth-kicker {
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.se-auth-title {
  margin: 0 0 var(--s-2);
  font-size: 26px;
  color: var(--c-dark);
}
.se-auth-copy {
  color: var(--c-text-mute);
  font-size: 14px;
  margin: 0 0 var(--s-4);
}
.se-auth-form {
  display: grid;
  gap: var(--s-3);
}
.se-auth-form label {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.se-auth-actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.se-auth-actions a {
  color: var(--c-brand);
  font-size: 13px;
  font-weight: 700;
}
.se-checkout-page footer.se-footer {
  width: calc(100% + (var(--s-4) * 2));
  margin-left: calc(var(--s-4) * -1);
  margin-right: calc(var(--s-4) * -1);
}
.se-checkout-page footer.se-footer .wrapper {
  padding: 0 var(--s-4) !important;
}

/* ---- Fancybox navigation tweaks (preserved from legacy) ---- */
.fancybox-margin { margin-right: 17px; }
.fancybox-nav { width: 60px; }
.fancybox-nav span { visibility: visible; opacity: 0.5; }
.fancybox-nav:hover span { opacity: 1; }
.fancybox-next { right: -60px; }
.fancybox-prev { left: -60px; }

/* ---- Footer ---- */
footer {
  background: var(--c-dark);
  color: #d1d5db;
  margin-top: 0;
  padding: var(--s-6) 0;
  clear: both;
}
footer .wrapper {
  padding: 0 var(--s-4) !important;
}
footer a { color: #fff; }
footer a:hover { color: #f0b56d; }

/* ---- Hide noise: legacy News Alerts banner on store pages ---- */
#EmailSignup { display: none !important; }

/* ---- Responsive ---- */
/* ---- Hamburger toggle (desktop: hidden) ---- */
.se-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin-right: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.se-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.se-drawer-open .se-menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.se-drawer-open .se-menu-toggle span:nth-child(2) {
  opacity: 0;
}
.se-drawer-open .se-menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop behind the slide-out drawer (mobile only). */
.se-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 90;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@media (max-width: 880px) {
  header.products .se-main-header__inner.wrapper {
    min-height: 88px;
  }
  header.products .se-header-search {
    width: 100%;
    min-width: 0;
  }

  /* Mobile: swap top-nav for a hamburger toggle that opens the drawer. */
  .se-menu-toggle { display: inline-block; }
  nav { display: none; }

  /* Lock body scroll while drawer is open. */
  .se-drawer-open,
  .se-drawer-open body { overflow: hidden; }

  .content, .content.clearfix {
    flex-direction: column;
    gap: var(--s-4);
  }

  /* The sidebar becomes an off-canvas slide-out drawer. */
  .prod-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: 320px;
    background: #fff;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-4) var(--s-3) var(--s-5);
    margin: 0;
    border-radius: 0;
  }
  .se-drawer-open .prod-sidebar {
    transform: translateX(0);
  }

  /* Reset the chip/horizontal-scroll styling — drawer uses the
     normal vertical menu shape, no weird pill-radius. */
  .prod-sidebar .vertmenu {
    display: block;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    border-bottom: 0;
  }
  .prod-sidebar .vertmenu > li { flex: none; }
  .prod-sidebar .vertmenu a {
    display: block;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--r);
    background: transparent;
    box-shadow: none;
    white-space: normal;
    font-size: 14px;
  }
  .prod-sidebar .vertmenu a:hover {
    background: var(--c-surface);
  }
  .prod-sidebar .section-heading,
  .prod-sidebar .play-heading {
    display: list-item !important;
    padding: var(--s-3) 12px var(--s-1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
    background: transparent !important;
    border: 0 !important;
  }
  .prod-sidebar .section-rule,
  .prod-sidebar .play-rule {
    display: list-item !important;
    height: 1px;
    margin: 4px 12px var(--s-2);
    background: var(--c-border);
    padding: 0;
    border: 0;
  }
  .prod-sidebar .play-item { display: list-item !important; }
  .prod-sidebar .vertmenu li.viewcart a {
    margin: var(--s-3) 0 0;
    padding: 12px 14px;
    background: #fff8f6;
    color: var(--c-brand) !important;
    border: 1px solid rgba(215,47,34,0.32);
    border-radius: var(--r);
    font-weight: 700;
  }

  .product-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
  .product { min-height: 320px; }

  .se-checkout-layout {
    grid-template-columns: 1fr;
  }
  .se-payment-card {
    position: static;
  }
  .se-checkout-form tr,
  .se-payment-card tr {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Hide backdrop above mobile breakpoint regardless of state. */
@media (min-width: 881px) {
  .se-drawer-backdrop { display: none; }
}

@media (max-width: 640px) {
  h1 { font-size: 22px; }
  .se-checkout-page .wrapper,
  .se-auth-page .wrapper {
    padding: 0 !important;
  }
  .se-checkout-card,
  .se-payment-card,
  .se-auth-card {
    padding: var(--s-4);
  }
  .se-auth-page {
    padding: var(--s-4);
  }
  .se-auth-actions {
    align-items: stretch;
  }
  .se-auth-card .form-submit {
    width: 100%;
  }
  .se-cart-wrap table, .se-cart-wrap thead, .se-cart-wrap tbody,
  .se-cart-wrap tr, .se-cart-wrap td, .se-cart-wrap th { display: block; }
  .se-cart-wrap thead { display: none; }
  .se-cart-wrap tbody td { padding: 8px 14px; border: 0; }
  .se-cart-wrap tbody tr {
    padding: var(--s-3) 0;
    border-top: 1px solid var(--c-border);
  }
  .se-cart-wrap .col-img { width: auto; }
  .se-cart-wrap .col-qty,
  .se-cart-wrap .col-price,
  .se-cart-wrap .col-total { text-align: left; width: auto; }
}

/* ---- Footer (modern) ---- */
.se-footer {
  background: var(--c-dark);
  color: #d1d5db;
  padding: var(--s-6) 0 var(--s-5);
  margin-top: var(--s-6);
  font-size: 14px;
}
.se-footer h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.se-footer a { color: #d1d5db; }
.se-footer a:hover { color: #f0b56d; }
.se-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
.se-footer-brand img { max-width: 180px; margin-bottom: var(--s-3); }
.se-footer-copy {
  color: var(--c-text-mute);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
}
.se-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.se-footer-col li { margin-bottom: 6px; font-size: 13px; }
.se-footer-social {
  display: flex;
  gap: var(--s-3);
}
.se-footer-social img {
  width: 24px;
  height: 24px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.se-footer-social a:hover img { opacity: 1; }

@media (max-width: 880px) {
  .se-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
}
@media (max-width: 640px) {
  .se-footer-grid { grid-template-columns: 1fr; }
}

/* _product_card wraps its .product div in a <form> for Add to Cart.
 * Use display: contents so the .product div participates in the
 * .product-list grid instead of the form. Browsers that don't
 * support display:contents fall back to a stretched form. */
.product-list > form {
  display: contents;
}
@supports not (display: contents) {
  .product-list > form {
    display: flex;
  }
  .product-list > form > .product {
    width: 100%;
  }
}

/* ---- Product detail page ---- */
.se-pd {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.se-pd-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 240px;
}
.se-pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.se-pd-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.se-pd-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: var(--c-dark);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.se-pd-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: var(--s-2) 0;
}
.se-pd-price--call {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  color: var(--c-text-mute);
}
.se-pd-price--call .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-faint);
}
.se-pd-price--call .value {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-dark);
}
.se-pd-price--call .phone {
  font-size: 18px;
  color: var(--c-brand);
  font-weight: 700;
}
.se-pd-qty {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.se-pd-qty label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-mute);
}
.se-pd-qty-input {
  width: 72px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-str);
  border-radius: var(--r);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.se-pd-cta {
  margin: var(--s-3) 0 0 !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
}
.se-pd-short {
  font-size: 14px;
  color: var(--c-text-mute);
  margin: var(--s-3) 0 0;
  line-height: 1.55;
}
.se-pd-desc {
  padding: var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text);
}
.se-pd-desc img { max-width: 100%; height: auto; }

@media (max-width: 760px) {
  .se-pd {
    grid-template-columns: 1fr;
  }
  .se-pd-title { font-size: 22px; }
  .se-pd-price { font-size: 26px; }
}

/* ---- Breadcrumbs (tame the <ul> the CI Breadcrumb library emits) ---- */
.breadcrumbs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumbs ul li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.breadcrumbs ul li + li::before {
  content: "/";
  color: var(--c-text-faint);
  margin-right: 2px;
}

/* ---------------------------------------------------------
 * Plan-comparison tables embedded in product_description.
 * HTML stored in DB uses <div class="tick">yes</div> cells —
 * hide the word, show a green check. .p_selected highlights
 * the "recommended" column with a subtle tint.
 * ------------------------------------------------------- */
.tick,
.cross {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.tick {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'><path d='M7.629 14.571 3.514 10.457l1.414-1.414 2.7 2.7 7.243-7.243 1.414 1.414z'/></svg>");
}
.cross {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'><path d='M15.707 5.707l-1.414-1.414L10 8.586 5.707 4.293 4.293 5.707 8.586 10l-4.293 4.293 1.414 1.414L10 11.414l4.293 4.293 1.414-1.414L11.414 10z'/></svg>");
}

/* Tables inside .se-pd-desc — the comparison matrix */
.se-pd-desc table,
.plans {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s-4) 0;
  font-size: 14px;
}
.se-pd-desc table thead th,
.plans thead th {
  font-weight: 600;
  color: var(--c-dark);
  background: var(--c-surface);
  padding: 12px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  white-space: nowrap;
}
.se-pd-desc table thead th.first,
.plans thead th.first {
  text-align: left;
  min-width: 280px;
}
.se-pd-desc table td,
.plans td {
  padding: 12px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.se-pd-desc table tr.under td,
.plans tr.under td { padding: 12px; }

.se-pd-desc table th.p_selected,
.se-pd-desc table td.p_selected,
.plans th.p_selected,
.plans td.p_selected {
  background: #fff7ed;
}

.se-pd-desc table td strong,
.plans td strong {
  color: var(--c-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.se-pd-desc table td ul,
.plans td ul {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--c-text-mute);
  font-size: 13px;
}

.plans_cat {
  font-weight: 700;
  font-size: 15px;
  padding: 10px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-mute);
}