/* Design tokens are set as CSS custom properties on :root by _ThemeStyle.cshtml,
   generated live from the admin-editable SiteSettings row. Everything below
   consumes those variables instead of hardcoded colors, so a color change in
   the dashboard repaints the whole site instantly with no rebuild. */

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background: var(--wts-bg);
  color: var(--wts-text);
  font-family: var(--wts-font-en, 'Plus Jakarta Sans'), var(--wts-font-ar, 'Cairo'), system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html[dir="rtl"] body {
  font-family: var(--wts-font-ar, 'Cairo'), var(--wts-font-en, 'Plus Jakarta Sans'), system-ui, sans-serif;
}

main { flex: 1 0 auto; }

a { color: var(--wts-primary); text-decoration: none; }
a:hover { color: var(--wts-accent); }

.container-wts {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Navbar ---------- */
.wts-navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--wts-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent);
}

.wts-navbar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* padding-block only (not the padding shorthand) -- this element also
     carries .container-wts for its left/right padding, and a full
     "padding: Yrem 0" shorthand here would win that cascade (two classes
     beats one) and silently zero the horizontal padding back out, which is
     exactly what was pinning the logo flush against the screen edge on a
     narrow phone with no room to spare. */
  padding-block: 0.85rem;
}

.wts-search-bar-inner { padding-block: 0.85rem; border-top: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent); }
.wts-search-bar-inner .input-group-text { background: var(--wts-surface); border-color: color-mix(in srgb, var(--wts-text) 15%, transparent); }
.wts-search-bar-inner input { border-color: color-mix(in srgb, var(--wts-text) 15%, transparent); }

.wts-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--wts-text);
}
.wts-brand img { height: 36px; width: auto; border-radius: 8px; }
/* The navbar/footer brand row is a fixed-height, compact strip — the same
   "site.name" click-to-style key is also used on the big logo banner, which
   has real room to grow, but a large Size override here has nowhere to go
   and wraps the row onto multiple lines (confirmed: caused an 11px page
   overflow and a 3x-taller navbar on mobile). Pin it to the row's own base
   size regardless of that override; the banner instance is unaffected since
   it's a different element outside .wts-brand. */
.wts-brand .wts-styleable {
  font-size: 1.25rem !important;
  text-align: start !important;
}

.wts-nav-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-weight: 600;
  font-size: 0.95rem;
}

@media (min-width: 900px) {
  .wts-nav-links { display: flex; }
}

.wts-nav-links a { color: var(--wts-text); opacity: 0.85; }
.wts-nav-links a:hover { opacity: 1; color: var(--wts-primary); }

.wts-nav-actions { display: flex; align-items: center; gap: 0.6rem; }

.wts-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wts-text) 8%, transparent);
  color: var(--wts-text);
  position: relative;
  border: none;
  cursor: pointer;
}
.wts-icon-btn:hover { background: color-mix(in srgb, var(--wts-primary) 25%, transparent); color: var(--wts-text); }

.wts-cart-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: var(--wts-accent);
  color: #111;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.wts-lang-btn {
  border: 1px solid color-mix(in srgb, var(--wts-text) 25%, transparent);
  background: transparent;
  color: var(--wts-text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.wts-mobile-toggle {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--wts-text);
  font-size: 1.5rem;
}

/* At full size, lang + cart + search + login + hamburger (5 icons, the
   default when nothing's been individually hidden) plus a site name don't
   all fit on a narrow phone — confirmed: 14px overflow with exactly that
   combination, then a first pass here brought it down but not fully to
   zero (still 9px over on a 375px phone even with a short 9-character
   name like "Mishmisha"). Shrinking each element further, with real
   margin this time rather than tuning to just barely clear one specific
   name, reclaims enough room without needing to hide anything. */
@media (max-width: 480px) {
  .wts-nav-actions { gap: 0.2rem; }
  .wts-icon-btn { width: 33px; height: 33px; }
  .wts-lang-btn { padding: 0.3rem 0.45rem; font-size: 0.75rem; }
  .wts-mobile-toggle { font-size: 1.2rem; padding: 0 0.2rem; }
}
@media (min-width: 900px) { .wts-mobile-toggle { display: none; } }

/* Language switch moves into the hamburger menu itself instead of sitting
   as its own icon in the top row -- one less thing competing for space on
   a narrow screen, and it's exactly where a visitor already goes to find
   "Home / Shop / About / ..." so it's not a harder-to-find. Same breakpoint
   the hamburger button itself uses (900px), so there's no width range where
   either both or neither version shows. */
.wts-lang-btn-mobile {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--wts-text); text-decoration: none;
  padding-top: 0.4rem; margin-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--wts-text) 12%, transparent);
}
@media (max-width: 899.98px) { .wts-lang-btn-desktop-only { display: none; } }
@media (min-width: 900px) { .wts-lang-btn-mobile { display: none; } }

/* ---------- Buttons ---------- */
.btn-wts-primary {
  /* Button-only 10% darkening of --wts-primary (not the variable itself,
     so hero art/accents/etc. stay the actual brand color) — white text on
     the raw brand pink measures ~2.85:1 contrast, under WCAG AA's 3.0
     minimum for bold button text; darkened it clears ~3.5:1. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--wts-primary) 90%, black), color-mix(in srgb, var(--wts-primary) 60%, var(--wts-accent)));
  color: #fff;
  border: none;
  border-radius: var(--wts-radius, 12px);
  padding: 0.75rem 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--wts-primary) 30%, transparent);
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn-wts-primary:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--wts-primary) 40%, transparent); }
.btn-wts-primary:active { transform: translateY(0); }

.btn-wts-outline {
  background: transparent;
  color: var(--wts-text);
  border: 1.5px solid color-mix(in srgb, var(--wts-text) 30%, transparent);
  border-radius: var(--wts-radius, 12px);
  padding: 0.7rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.btn-wts-outline:hover { border-color: var(--wts-primary); color: var(--wts-primary); background: color-mix(in srgb, var(--wts-primary) 6%, transparent); }

/* ---------- Hero ---------- */
.wts-hero {
  padding: 4.5rem 0 3.5rem;
  text-align: center;
}
@media (min-width: 900px) {
  .wts-hero { padding: 7rem 0 5rem; text-align: start; }
  .wts-hero .inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
}

.wts-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.wts-hero p.lead {
  font-size: 1.15rem;
  opacity: 0.8;
  max-width: 46ch;
  margin: 0 auto 2rem;
}
@media (min-width: 900px) { .wts-hero p.lead { margin-inline: 0; } }

.wts-hero-art {
  border-radius: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--wts-primary) 35%, var(--wts-surface)), var(--wts-surface));
  aspect-ratio: 4 / 3;
  /* Below 900px this was `display:none` outright, so a shop that uploaded a
     hero image lost it for every phone visitor — the majority of traffic.
     Show it on mobile too, just capped shorter so it doesn't push the CTA
     button below the fold. */
  display: block;
  max-height: 46vh;
  margin-top: 2rem;
}
@media (min-width: 900px) { .wts-hero-art { max-height: none; margin-top: 0; } }

/* Hero layout variants — Settings → Homepage → "Hero layout". Default
   ("split") is the grid rule above; these override it for the other
   choices rather than duplicating the whole section. */
.wts-hero-centered .inner { text-align: center; }
@media (min-width: 900px) {
  .wts-hero-centered .inner { display: block; }
  .wts-hero-centered .wts-hero-art { max-width: 560px; margin: 2rem auto 0; }
  .wts-hero-centered p.lead { margin-inline: auto; }
}

@media (min-width: 900px) {
  .wts-hero-reverse .inner > div:first-child { order: 2; }
  .wts-hero-reverse .wts-hero-art { order: 1; }
}

.wts-hero-imagefull { position: relative; background-color: var(--wts-surface); }
.wts-hero-imagefull::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.wts-hero-imagefull .inner { position: relative; z-index: 1; text-align: center; }
.wts-hero-imagefull .inner h1, .wts-hero-imagefull .inner p.lead { color: #fff; }
.wts-hero-imagefull p.lead { opacity: 0.92; margin-inline: auto; }
@media (min-width: 900px) { .wts-hero-imagefull .inner { display: block; } }

.wts-logo-banner {
  background: var(--wts-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  min-height: clamp(220px, 36vh, 380px);
  padding: 2.5rem 1.5rem;
}
/* max-height in vh, not %: this section's own height comes from min-height
   (clamp(220px, 36vh, 380px)), which is an indefinite height for percentage
   resolution purposes — max-height:min(55%,180px) silently computed to
   "none" (the percentage couldn't resolve), so the uploaded logo rendered at
   its full native resolution and stretched the whole banner to match. vh
   always resolves regardless of the parent's own sizing. */
.wts-logo-banner img { max-height: clamp(100px, 20vh, 180px); max-width: 90%; width: auto; object-fit: contain; }
.wts-logo-banner .wts-logo-banner-wordmark {
  /* Base look before any click-to-style override (see .wts-styleable) —
     that system applies its own inline font-weight/size/align/color once an
     admin has actually styled this element, taking over from these defaults. */
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  text-align: center;
}
.wts-logo-banner .wts-logo-banner-hours {
  font-weight: 600;
  opacity: 0.92;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- Click-to-style (design-mode.js), admin-only ---------- */
.wts-design-toggle {
  position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: 1050;
  background: #1a1a1a; color: #fff; border: none; border-radius: 999px;
  padding: 0.7rem 1.1rem; font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
}
.wts-design-toggle.active { background: var(--wts-primary, #ec6fa3); }
body.wts-design-mode .wts-styleable {
  outline: 1px dashed color-mix(in srgb, var(--wts-primary, #ec6fa3) 60%, transparent);
  outline-offset: 2px; cursor: pointer; border-radius: 2px;
}
body.wts-design-mode .wts-styleable:hover { outline-style: solid; }
.wts-styleable-selected { outline: 2px solid var(--wts-primary, #ec6fa3) !important; outline-offset: 2px; }

/* Hidden-from-visitors text: gone entirely for real visitors; in design mode
   it stays visible but faded + red-dashed, so an admin can still find and
   un-hide it — a hard display:none with no design-mode escape hatch would be
   a one-way trip once nothing on the live page still points to it. */
.wts-styleable[data-hidden="true"] { display: none; }
body.wts-design-mode .wts-styleable[data-hidden="true"] {
  display: inline-block; opacity: 0.4; outline: 2px dashed #dc3545;
}
body.wts-design-mode .wts-cat-tile .wts-styleable[data-hidden="true"] { display: block; }

.wts-design-popover {
  position: absolute; z-index: 1060; background: #fff; color: #1a1a1a;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.25); padding: 0.9rem;
  width: 290px; font-size: 0.85rem;
}
.wts-design-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.wts-design-row:last-of-type { margin-bottom: 0; }
.wts-design-row label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.wts-design-label { opacity: 0.6; min-width: 42px; flex-shrink: 0; }
.wts-design-row-wrap { flex-wrap: wrap; }
.wts-d-font {
  flex: 1 1 100%; border: 1px solid #ddd; background: #f7f7f7; border-radius: 6px;
  padding: 0.35rem 0.5rem; font-size: 0.8rem; max-width: 100%;
}
.wts-design-sizes { display: flex; gap: 0.3rem; flex: 1; }
.wts-design-sizes button {
  flex: 1; border: 1px solid #ddd; background: #f7f7f7; border-radius: 6px;
  padding: 0.3rem 0; cursor: pointer; font-size: 0.8rem;
}
.wts-design-sizes button:hover { background: #eee; }
.wts-design-sizes button.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.wts-d-color-reset {
  border: 1px solid #ddd; background: #f7f7f7; border-radius: 6px;
  padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.75rem;
}
.wts-design-saved { display: block; margin-top: 0.5rem; color: #2e7d32; font-weight: 600; opacity: 0; transition: opacity .2s; }
.wts-design-hidden-note {
  background: #fdecea; color: #b3261e; border-radius: 6px; padding: 0.5rem 0.6rem;
  font-size: 0.75rem; margin-bottom: 0.6rem; line-height: 1.4;
}
.wts-d-hide-toggle {
  width: 100%; border: 1px solid #ddd; background: #f7f7f7; border-radius: 6px;
  padding: 0.45rem 0; cursor: pointer; font-size: 0.8rem; font-weight: 600;
}
.wts-d-hide-toggle:hover { background: #eee; }

/* ---------- Cart line, small screens ----------
   Desktop keeps the single-row layout untouched. Below 576px the fixed-width
   price + qty + remove no longer fit alongside the thumbnail/name on one
   line, so they wrap onto their own row instead of overflowing the card. */
@media (max-width: 576px) {
  .wts-cart-line { flex-wrap: wrap; row-gap: 0.6rem; }
  .wts-cart-line .wts-cart-info { flex: 1 1 calc(100% - 90px - 1rem); }
  .wts-cart-line .wts-cart-qty-form { order: 3; flex: 1 1 auto; }
  .wts-cart-line .wts-cart-price { order: 4; flex: 0 0 auto; width: auto !important; margin-inline-start: auto; }
  .wts-cart-line .wts-cart-remove-form { order: 5; }
}

/* ---------- Section headings ---------- */
.wts-section { padding: 3.5rem 0; }
.wts-section h2 {
  font-size: 1.85rem;
  font-weight: 800;
  margin-bottom: 1.75rem;
}

.wts-cat-tile .wts-styleable { display: block; }

/* ---------- Template grid & cards ---------- */
.wts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
}

.wts-card {
  background: var(--wts-surface);
  border-radius: calc(var(--wts-radius, 12px) + 6px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent);
  transition: transform .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.wts-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--wts-primary) 45%, transparent); }

.wts-card-thumb {
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--wts-primary) 18%, var(--wts-surface));
  background-size: cover;
  background-position: center;
}

/* Product image style — Settings → Storefront → Product image style.
   Aspect ratio and shape are independent axes that multiply into many more
   combinations than either offers alone. */
.wts-thumb-aspect-landscape { aspect-ratio: 16 / 10; }
.wts-thumb-aspect-wide { aspect-ratio: 16 / 9; }
.wts-thumb-aspect-square { aspect-ratio: 1 / 1; }
.wts-thumb-aspect-portrait { aspect-ratio: 3 / 4; }
.wts-thumb-aspect-tall { aspect-ratio: 2 / 3; }

.wts-thumb-shape-sharp { border-radius: 0; }
.wts-thumb-shape-soft { border-radius: 8px; }
.wts-thumb-shape-rounded { border-radius: var(--wts-radius, 14px); }
.wts-thumb-shape-very-rounded { border-radius: 28px; }
.wts-thumb-shape-pill-top { border-radius: 28px 28px 0 0; }

.wts-card-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.wts-card-body h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.wts-card-body p { font-size: 0.9rem; opacity: 0.75; margin: 0; flex: 1; }

.wts-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem; }
.wts-price { font-size: 1.2rem; font-weight: 800; color: var(--wts-primary); }
.wts-price-compare { font-size: 0.85rem; opacity: 0.55; text-decoration: line-through; }

.wts-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--wts-accent) 30%, transparent);
  color: var(--wts-text);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  width: fit-content;
}

/* ---------- Category chips ---------- */
.wts-chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
/* Wrapping is fine once there's enough width for several rows to look
   intentional, but on a phone it often leaves an odd 1-2-chip orphan row
   and reads as "scattered". Below that width, chips go single-row and
   scroll horizontally instead -- same pattern as a mobile filter bar. */
@media (max-width: 768px) {
  .wts-chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.35rem; margin-bottom: 1.5rem; }
  .wts-chip { flex: 0 0 auto; white-space: nowrap; }
}
.wts-chip {
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.88rem;
  border: 1.5px solid color-mix(in srgb, var(--wts-text) 15%, transparent);
  color: var(--wts-text);
  background: transparent;
}
.wts-chip.active, .wts-chip:hover {
  background: var(--wts-primary);
  border-color: var(--wts-primary);
  color: #fff;
}

/* ---------- Forms / cards ---------- */
.wts-panel {
  background: var(--wts-surface);
  border: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent);
  border-radius: calc(var(--wts-radius, 12px) + 6px);
  padding: 1.75rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--wts-text) 4%, transparent);
}
.wts-panel h2, .wts-panel h3 { letter-spacing: -0.01em; }

.form-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form-control, .form-select {
  background: color-mix(in srgb, var(--wts-bg) 60%, var(--wts-surface));
  border: 1.5px solid color-mix(in srgb, var(--wts-text) 15%, transparent);
  color: var(--wts-text);
  border-radius: max(6px, calc(var(--wts-radius, 12px) - 2px));
  padding: 0.65rem 0.9rem;
}
.form-control:focus, .form-select:focus {
  background: color-mix(in srgb, var(--wts-bg) 60%, var(--wts-surface));
  color: var(--wts-text);
  border-color: var(--wts-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wts-primary) 25%, transparent);
}

/* Bootstrap's default checkbox/radio is a white box with a barely-visible
   border — invisible until checked on any light-themed instance (white-ish
   surface behind a white-ish box). Themed the same way .form-control is
   above so the border always has real contrast against this site's own
   colors, whatever they're set to. */
.form-check-input {
  background-color: color-mix(in srgb, var(--wts-bg) 60%, var(--wts-surface));
  border: 1.5px solid color-mix(in srgb, var(--wts-text) 40%, transparent);
}
.form-check-input:checked {
  background-color: var(--wts-primary);
  border-color: var(--wts-primary);
}
.form-check-input:focus {
  border-color: var(--wts-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wts-primary) 25%, transparent);
}

/* ---------- Footer ---------- */
.wts-footer {
  border-top: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent);
  padding: 2.5rem 0;
  margin-top: 3rem;
  font-size: 0.9rem;
  opacity: 0.75;
}
.wts-footer .inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.wts-social { display: flex; gap: 0.6rem; }
.wts-social a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.wts-social a:hover { filter: brightness(1.1); }

/* Phone numbers, WhatsApp numbers, and mixed digit/text business hours
   are inherently left-to-right content -- inside an RTL page they'd
   otherwise get visually reordered by the browser's bidi algorithm
   (e.g. "+965 6611 3344" rendering as "3344 6611 965+"). unicode-bidi:
   isolate keeps the LTR run intact without disturbing the surrounding
   RTL text flow around it. */
.wts-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Floating socials ---------- */
.wts-float-socials {
  position: fixed;
  bottom: 1.25rem;
  inset-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 50;
  touch-action: none;
  cursor: grab;
}
.wts-float-socials.wts-dragging { cursor: grabbing; opacity: 0.85; }
.wts-float-socials a {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  -webkit-user-drag: none;
}

/* On phones, 3+ icons stacked in a column reach ~157px tall — a fixed
   element that size ends up parked over whatever content is scrolled
   underneath it (confirmed: it was covering category tiles). A row along
   the bottom edge instead keeps the same "always reachable" behavior with
   about a quarter of the vertical footprint. */
@media (max-width: 576px) {
  .wts-float-socials { flex-direction: row; bottom: 0.75rem; inset-inline-start: 0.75rem; gap: 0.5rem; }
  .wts-float-socials a { width: 40px; height: 40px; font-size: 1.05rem; }
}

/* ---------- Steps ---------- */
.wts-steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .wts-steps { grid-template-columns: repeat(3, 1fr); } }
.wts-step-num {
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--wts-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-bottom: 0.85rem;
}

/* ---------- Tables (admin) ---------- */
.wts-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.wts-table th, .wts-table td { padding: 0.75rem 0.9rem; text-align: start; border-bottom: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent); }
.wts-table th {
  opacity: 0.65; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom-width: 2px;
}
.wts-table tbody tr { transition: background-color .1s ease; }
.wts-table tbody tr:hover { background: color-mix(in srgb, var(--wts-text) 4%, transparent); }
.wts-table tbody tr:last-child td { border-bottom: none; }

/* Row action buttons (Edit/Delete etc.) — stacked bare <a>/<form> siblings
   with no shared container had inconsistent line-height/border box math
   between an <a> and a <button>, enough to overlap by a few px when they
   wrapped onto two lines. flex+gap makes the spacing explicit instead of
   relying on each element's own inline metrics lining up by luck. */
.wts-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.wts-row-actions form { display: flex; margin: 0; }

.wts-status {
  display: inline-flex; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
}
.wts-status-pending { background: color-mix(in srgb, orange 25%, transparent); }
.wts-status-paid { background: color-mix(in srgb, #22c55e 25%, transparent); }
.wts-status-failed, .wts-status-cancelled { background: color-mix(in srgb, #ef4444 25%, transparent); }
.wts-status-refunded { background: color-mix(in srgb, #6b7280 30%, transparent); }

/* ---------- Admin shell ---------- */
.wts-admin-shell { display: flex; min-height: 100vh; background: var(--wts-bg); }
.wts-admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--wts-surface);
  border-inline-end: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent);
  padding: 1.5rem 1rem;
  display: none;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
@media (min-width: 900px) { .wts-admin-sidebar { display: flex; flex-direction: column; } }
.wts-admin-sidebar a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.85rem; border-radius: var(--wts-radius, 10px); color: var(--wts-text); opacity: 0.72; font-weight: 600;
  font-size: 0.92rem; margin-bottom: 0.1rem; border-inline-start: 3px solid transparent;
  transition: background-color .12s ease, opacity .12s ease, border-color .12s ease;
}
.wts-admin-sidebar a i { width: 1.1rem; text-align: center; opacity: 0.85; flex-shrink: 0; }
.wts-admin-sidebar a:hover { background: color-mix(in srgb, var(--wts-text) 6%, transparent); opacity: 1; }
.wts-admin-sidebar a.active {
  background: color-mix(in srgb, var(--wts-primary) 14%, transparent);
  border-inline-start-color: var(--wts-primary);
  color: var(--wts-primary);
  opacity: 1;
}
.wts-admin-sidebar hr { opacity: 0.5; }
.wts-admin-nav-group-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.45; font-weight: 800; padding: 0.9rem 0.85rem 0.3rem;
}
.wts-admin-nav-group-label:first-child { padding-top: 0.2rem; }
/* No overflow-x here on purpose — mixing overflow-x:auto with the default
   overflow-y:visible makes the browser silently convert overflow-y to auto
   too (CSS spec quirk), trapping any page taller than one viewport into an
   invisible inner scrollbar instead of letting it grow normally. Wide tables
   handle their own horizontal scroll locally (see the overflow-x:auto wrapper
   around every <table class="wts-table">) — min-width:0 is what actually
   lets this flex item shrink below its content's natural width so those
   local wrappers can do that clipping instead of blowing out the layout. */
.wts-admin-main { flex: 1; min-width: 0; padding: 1.75rem 1.25rem 3rem; max-width: 100%; }
@media (min-width: 900px) { .wts-admin-main { padding: 2.25rem 2.5rem 4rem; } }

.wts-filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  background: var(--wts-surface); border: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent);
  border-radius: calc(var(--wts-radius, 12px) + 4px); padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.wts-filter-bar select, .wts-filter-bar input[type="text"], .wts-filter-bar input[type="search"] {
  min-width: 150px; width: auto; padding: 0.45rem 0.75rem; font-size: 0.88rem;
}
.wts-filter-bar .wts-filter-clear { font-size: 0.85rem; opacity: 0.65; white-space: nowrap; background: none; border: none; color: var(--wts-text); cursor: pointer; }
.wts-filter-bar .wts-filter-clear:hover { opacity: 1; }

.wts-settings-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent); padding-bottom: 0.75rem; }
.wts-settings-tabs .nav-link {
  color: var(--wts-text); opacity: 0.7; font-weight: 700; font-size: 0.9rem;
  border: 1px solid transparent; border-radius: 999px; padding: 0.5rem 1.1rem;
  display: inline-flex; align-items: center; gap: 0.45rem; background: transparent;
  transition: background-color .12s ease, opacity .12s ease;
}
.wts-settings-tabs .nav-link:hover { opacity: 1; background: color-mix(in srgb, var(--wts-text) 6%, transparent); }
.wts-settings-tabs .nav-link.active { opacity: 1; color: #fff; background: var(--wts-primary); }
.wts-settings-tabs.wts-dimmed { opacity: 0.35; pointer-events: none; }

.wts-settings-search { position: relative; max-width: 480px; }
.wts-settings-search i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 0.9rem; opacity: 0.5; pointer-events: none; }
.wts-settings-search input { padding-inline-start: 2.5rem; }

/* Search mode forces every tab-pane visible at once (instead of only the
   one Bootstrap's .active class shows) so a search can match settings on
   any tab, not just the currently-open one. */
.tab-content.wts-search-mode .tab-pane { display: block !important; opacity: 1 !important; }
.wts-settings-search-label {
  font-weight: 700; font-size: 0.95rem; margin: 1.75rem 0 0.75rem;
  padding-top: 1.25rem; border-top: 1px dashed color-mix(in srgb, var(--wts-text) 15%, transparent);
  opacity: 0.7;
}
.tab-pane > .wts-settings-search-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.wts-stat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 2rem; }
.wts-stat-card {
  background: var(--wts-surface);
  border: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent);
  border-inline-start: 4px solid color-mix(in srgb, var(--wts-primary) 55%, transparent);
  border-radius: calc(var(--wts-radius, 12px) + 4px);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--wts-text) 4%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wts-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--wts-text) 8%, transparent); }
.wts-stat-card .label { font-size: 0.78rem; opacity: 0.65; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.wts-stat-card .value { font-size: 1.7rem; font-weight: 800; margin-top: 0.3rem; }

.wts-shortcut-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.wts-shortcut {
  background: var(--wts-surface);
  border: 1px solid color-mix(in srgb, var(--wts-text) 8%, transparent);
  border-radius: calc(var(--wts-radius, 12px) + 4px);
  padding: 1.25rem 0.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--wts-text); text-align: center; font-weight: 600; font-size: 0.85rem;
  transition: transform .15s ease, border-color .15s ease;
}
.wts-shortcut i { font-size: 1.5rem; color: var(--wts-primary); }
.wts-shortcut:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--wts-primary) 45%, transparent); color: var(--wts-text); }

.wts-pay-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--wts-text) 18%, transparent);
  border-radius: 8px; padding: 0.3rem 0.65rem;
  font-size: 0.78rem; font-weight: 600; opacity: 0.85;
}

.wts-deal-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: color-mix(in srgb, #ef4444 25%, transparent);
  color: var(--wts-text); font-size: 0.75rem; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}

.wts-out-of-stock {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: color-mix(in srgb, var(--wts-text) 15%, transparent);
  color: var(--wts-text); font-size: 0.75rem; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}

/* ===== Category tiles — Settings > CategoryDisplayStyle picks one of these
   (or "chips", which reuses .wts-chip-row instead of this grid entirely).
   One shared markup (.wts-cat-tile: media + name) reskinned per style so
   _CategoryDisplay.cshtml never has to branch its HTML per style. ===== */
.wts-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.wts-cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--wts-text); text-align: center;
}
.wts-cat-tile-media {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--wts-radius, 14px);
  overflow: hidden; background: var(--wts-surface);
  border: 1px solid color-mix(in srgb, var(--wts-text) 10%, transparent);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform .15s ease, border-color .15s ease;
}
.wts-cat-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.wts-cat-tile-icon { font-size: 1.8rem; opacity: 0.4; }
.wts-cat-tile-name { font-weight: 700; font-size: 0.9rem; }
.wts-cat-tile:hover .wts-cat-tile-media { transform: translateY(-3px); border-color: color-mix(in srgb, var(--wts-primary) 45%, transparent); }
.wts-cat-tile.active .wts-cat-tile-media { border-color: var(--wts-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wts-primary) 30%, transparent); }

/* Top-sellers carousel — 3 stacked images crossfading in place */
.wts-cat-carousel { position: relative; width: 100%; height: 100%; }
.wts-cat-carousel img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.wts-cat-carousel img.active { opacity: 1; }

/* boxes — square cards, image on top */
.wts-cat-style-boxes .wts-cat-tile-media { aspect-ratio: 4 / 3; }

/* circles — round images, compact */
.wts-cat-style-circles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.wts-cat-style-circles .wts-cat-tile-media { border-radius: 50%; }
.wts-cat-style-circles .wts-cat-tile-name { font-size: 0.78rem; font-weight: 600; }

/* bigtiles — a strict 2-column grid of large, nearly-square image cards with
   bold overlaid text, the "Instagram story card" look many food/retail apps
   use for their category picker instead of a small chip row. */
.wts-cat-style-bigtiles { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.wts-cat-style-bigtiles .wts-cat-tile { position: relative; }
.wts-cat-style-bigtiles .wts-cat-tile-media { aspect-ratio: 4 / 5; border-radius: 20px; }
.wts-cat-style-bigtiles .wts-cat-tile-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.wts-cat-style-bigtiles .wts-cat-tile-name {
  position: absolute; bottom: 1rem; inset-inline: 1rem; text-align: start;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); z-index: 1;
  font-size: 1.15rem; font-weight: 800;
}
@media (min-width: 700px) {
  .wts-cat-style-bigtiles { grid-template-columns: repeat(3, 1fr); }
}

/* overlaybottom — full-bleed image, text over a bottom gradient */
.wts-cat-style-overlaybottom .wts-cat-tile { position: relative; }
.wts-cat-style-overlaybottom .wts-cat-tile-media { aspect-ratio: 3 / 4; }
.wts-cat-style-overlaybottom .wts-cat-tile-name {
  position: absolute; bottom: 0.75rem; inset-inline: 0.75rem; text-align: start;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); z-index: 1;
}
.wts-cat-style-overlaybottom .wts-cat-tile-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent 60%);
}

/* overlaycenter — full-bleed image, dark overlay, centered text */
.wts-cat-style-overlaycenter .wts-cat-tile { position: relative; }
.wts-cat-style-overlaycenter .wts-cat-tile-media { aspect-ratio: 1 / 1; }
.wts-cat-style-overlaycenter .wts-cat-tile-media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.wts-cat-style-overlaycenter .wts-cat-tile-name {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); z-index: 1; font-size: 1rem;
}

/* outline — bordered pill row, small round icon + label side by side */
.wts-cat-style-outline { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wts-cat-style-outline .wts-cat-tile { flex-direction: row; justify-content: flex-start; gap: 0.65rem;
  border: 1px solid color-mix(in srgb, var(--wts-text) 15%, transparent); border-radius: 999px; padding: 0.4rem 1rem 0.4rem 0.4rem; }
.wts-cat-style-outline .wts-cat-tile-media { width: 40px; height: 40px; aspect-ratio: 1/1; border-radius: 50%; flex-shrink: 0; }
.wts-cat-style-outline .wts-cat-tile-name { font-size: 0.85rem; }

/* list — thumbnail + label, one per row */
.wts-cat-style-list { grid-template-columns: 1fr; max-width: 360px; gap: 0.5rem; }
.wts-cat-style-list .wts-cat-tile { flex-direction: row; justify-content: flex-start; gap: 0.75rem;
  padding: 0.5rem; border-radius: var(--wts-radius, 10px); }
.wts-cat-style-list .wts-cat-tile:hover { background: color-mix(in srgb, var(--wts-text) 6%, transparent); }
.wts-cat-style-list .wts-cat-tile-media { width: 52px; height: 52px; aspect-ratio: 1/1; flex-shrink: 0; }

/* largehero — big wide banners, 1-2 per row */
.wts-cat-style-largehero { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wts-cat-style-largehero .wts-cat-tile { position: relative; }
.wts-cat-style-largehero .wts-cat-tile-media { aspect-ratio: 16 / 9; }
.wts-cat-style-largehero .wts-cat-tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); }
.wts-cat-style-largehero .wts-cat-tile-name {
  position: absolute; bottom: 1rem; inset-inline: 1rem; text-align: start; font-size: 1.1rem;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); z-index: 1;
}

/* squircle — large soft-square images with shadow */
.wts-cat-style-squircle .wts-cat-tile-media { border-radius: 30%; box-shadow: 0 8px 20px rgba(0,0,0,.25); border: none; }

/* minimaltext — no image at all, just labels */
.wts-cat-style-minimaltext { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.wts-cat-style-minimaltext .wts-cat-tile-media { display: none; }
.wts-cat-style-minimaltext .wts-cat-tile { flex-direction: row; }
.wts-cat-style-minimaltext .wts-cat-tile-name { font-size: 1rem; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.wts-cat-style-minimaltext .wts-cat-tile:hover .wts-cat-tile-name,
.wts-cat-style-minimaltext .wts-cat-tile.active .wts-cat-tile-name { border-bottom-color: var(--wts-primary); color: var(--wts-primary); }

/* numbered — editorial numbered badge in the corner */
.wts-cat-style-numbered { counter-reset: wts-cat; }
.wts-cat-style-numbered .wts-cat-tile { counter-increment: wts-cat; }
.wts-cat-style-numbered .wts-cat-tile-media { aspect-ratio: 4 / 3; }
.wts-cat-style-numbered .wts-cat-tile-media::before {
  content: counter(wts-cat); position: absolute; top: 0.5rem; inset-inline-start: 0.5rem; z-index: 1;
  background: var(--wts-primary); color: #fff; font-weight: 800; font-size: 0.85rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* masonry — staggered heights via CSS columns */
.wts-cat-style-masonry { display: block; columns: 4 160px; column-gap: 1rem; }
.wts-cat-style-masonry .wts-cat-tile { display: inline-flex; width: 100%; margin-bottom: 1rem; break-inside: avoid; }
.wts-cat-style-masonry .wts-cat-tile-media { aspect-ratio: 3 / 4; }
.wts-cat-style-masonry .wts-cat-tile:nth-child(3n+1) .wts-cat-tile-media { aspect-ratio: 1 / 1; }
.wts-cat-style-masonry .wts-cat-tile:nth-child(3n+2) .wts-cat-tile-media { aspect-ratio: 4 / 5; }

@media print {
  .wts-navbar, .wts-footer, .wts-float-socials, .no-print { display: none !important; }
  .wts-admin-sidebar, #wtsAdminMobileNav, .wts-lang-btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .wts-panel { border: 1px solid #ccc !important; background: #fff !important; }
  .wts-admin-main { margin: 0 !important; padding: 0 !important; }
}

.wts-color-swatch {
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--wts-text) 20%, transparent);
  padding: 0; overflow: hidden;
}

.wts-color-preset-btn {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--wts-text) 15%, transparent);
  transition: transform .12s ease, border-color .12s ease;
}
.wts-color-preset-btn:hover { transform: scale(1.12); border-color: color-mix(in srgb, var(--wts-text) 40%, transparent); }