.store-list{ padding-top:.5rem; }
@media (max-width: 767px){
  main .container { padding-left: .5rem; padding-right: .5rem; }
  .store-product-card .ratio { margin-bottom: .5rem; }
  .store-list{ padding-left: .75rem; padding-right: .75rem; }
}
body {
  min-height: 100vh;
  background: var(--background);
  color: var(--text-color);
}

.visually-hidden-focusable:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.store-hero-img {
  max-width: 360px;
}

.store-product-card {
  border-radius: 1rem;
}

.store-product-media img { max-height: 100%; }
 .store-product-card .ratio img { padding: .25rem !important; }

/* When title is above, keep tight spacing around the image */
.store-product-card .card-body + .ratio img { padding-top: .25rem !important; }
.store-card-title { line-height: 1.2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1.125rem; font-weight:600; margin-bottom:.5rem; }
.store-card-title a { color: inherit; }

/* Ensure product titles are dark in Light theme */
[data-bs-theme='light'] .store-card-title { color: #0f172a; }
[data-bs-theme='light'] .store-card-title { color: #0f172a; }
[data-bs-theme='light'] .store-card-title a:link,
[data-bs-theme='light'] .store-card-title a:visited { color: #0f172a !important; }
[data-bs-theme='light'] .store-card-title a:hover,
[data-bs-theme='light'] .store-card-title a:focus { color: #0b1220 !important; }

@media (min-width: 992px){
  .store-card-title { font-size: 1.2rem; }
}
.store-card-desc{ display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.store-card-actions{ gap:.5rem !important; }
/* Uniform product thumbs: keep all cards aligned regardless of image ratio */
.store-product-card .store-product-thumb { background: var(--bs-secondary-bg); }
.store-product-card .store-product-thumb img { width:100%; height:100%; object-fit:cover; object-position:center; }
@media (min-width: 0){
  /* Ensure a consistent vertical footprint per card image across breakpoints */
  .store-product-card .store-product-thumb { aspect-ratio: 4 / 3; }
}
/* Center-stack action buttons vertically on product cards */
.store-card-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.5rem !important;
}
@media (min-width: 576px){
  .store-card-actions{ gap:.5rem !important; }
}

/* Product details panel polish */
.store-product-details .card-body{ padding:1.5rem 1.5rem 1.25rem; }
.store-product-details header{ text-align:left; }
.store-product-details .fs-4.fw-semibold{ margin-top:.25rem; }
.store-product-details .small.text-muted{ margin-bottom:.5rem; }
.store-product-details form .form-label{ margin-bottom:.25rem; }

/* Ensure product description text is left-aligned */
.store-product-details .store-product-description { text-align: left; }

/* Cart summary sticky on desktop */
@media (min-width: 992px){
  .cart-summary-sticky { position: sticky; top: 1rem; }
}

/* Cart summary sticky on desktop */
@media (min-width: 992px){
  .cart-summary-sticky { position: sticky; top: 1rem; }
}

/* Product details panel polish */
.store-product-details .card-body{ padding:1.5rem 1.5rem 1.25rem; }
.store-product-details header{ text-align:left; }
.store-product-details .fs-4.fw-semibold{ margin-top:.25rem; }
.store-product-details .small.text-muted{ margin-bottom:.5rem; }
.store-product-details form .form-label{ margin-bottom:.25rem; }

footer a.link-secondary {
  text-decoration: none;
}
footer a.link-secondary:hover {
  text-decoration: underline;
}

.store-flash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card img {
  object-fit: contain;
}

.store-product-card {
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--background-container, #ffffff), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--border-color, #e5e7eb), transparent 10%);
}
/* give cards a bit more breathing room */
.store-product-card .card-body{ padding-bottom:1.25rem; }

/* Store list full-width layout with comfortable max width */
.store-list{ max-width: 1600px; margin-left:auto; margin-right:auto; }
/* Ensure store-list content aligns the breadcrumb with grid */
.store-list > nav[aria-label="breadcrumb"]{ padding-left:0; padding-right:0; }
/* Ensure store-list content aligns the breadcrumb with grid */
.store-list > nav[aria-label="breadcrumb"]{ padding-left:0; padding-right:0; }

/* Store list full-width layout with comfortable max width */
.store-list{ max-width: 1600px; margin-left:auto; margin-right:auto; }
/* give cards a bit more breathing room */
.store-product-card .card-body{ padding-bottom:1.25rem; }

/* Admin shell centered wrapper */
.store-admin{ max-width: 1320px; margin-left:auto; margin-right:auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1400px){ .store-admin{ max-width: 1440px; } }
@media (min-width: 1600px){ .store-admin{ max-width: 1560px; } }
@media (min-width: 1900px){ .store-admin{ max-width: 1680px; } }

/* Ensure admin cards and tables fill available width, but remain centered */
.store-admin .card{ max-width: 100%; }
.store-admin .table-responsive{ overflow-x:auto; width:100%; display:block; overscroll-behavior-x: contain; }
/* Ensure the table can exceed the viewport width so horizontal scrolling is available */
.store-admin .table{ min-width: 720px; }
@media (min-width: 992px){ .store-admin .table{ min-width: 880px; } }
.store-admin .card .card-body{ padding-left:1.25rem; padding-right:1.25rem; }

/* Mobile: make admin tables horizontally scrollable without affecting vertical scroll */
@media (max-width: 991.98px){
  /* Momentum scrolling on iOS; force horizontal overflow on the wrapper */
  .store-admin .table-responsive{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
  /* Let the table grow to content so the wrapper must scroll */
  .store-admin .table-responsive > .table{ display: inline-table; width: auto; min-width: 640px; }
  /* Prevent most columns from wrapping so width exceeds viewport */
  .store-admin .table-responsive > .table th,
  .store-admin .table-responsive > .table td{ white-space: nowrap; }
  /* Allow first column (usually Name) to wrap for readability */
  .store-admin .table-responsive > .table th:first-child,
  .store-admin .table-responsive > .table td:first-child{ white-space: normal; }
  /* Keep most columns on one line so width doesn't collapse; allow first col (Name) to wrap */
  .store-admin .table-responsive > .table th,
  .store-admin .table-responsive > .table td{ white-space: nowrap; }
  .store-admin .table-responsive > .table th:first-child,
  .store-admin .table-responsive > .table td:first-child{ white-space: normal; min-width: 220px; }
  /* Give actions column a little minimum width so buttons don't wrap to two lines */
  .store-admin .table-responsive > .table th.text-end,
  .store-admin .table-responsive > .table td.text-end{ min-width: 180px; }
  .store-admin .table-responsive > .table td.text-end .btn-group{ flex-wrap: nowrap; gap: .25rem; }
  /* Fallback: if any ancestor clips, allow the page and main container to scroll horizontally */
  main, body, html{ overflow-x:auto; }
  /* Strong override for core-tokens background skins that set overflow-x:hidden on body */
  [data-bs-theme][data-bg-effect] body{ overflow-x: auto !important; }
  [data-bs-theme='light'][data-bg-effect='animate'] body,
  [data-bs-theme='dark'][data-bg-effect='animate'] body,
  [data-bs-theme='blue'][data-bg-effect='animate'] body{ overflow-x: auto !important; }
  /* Extra fallback: allow the admin shell itself to scroll horizontally */
  .store-admin{ overflow-x:auto; }
  /* Avoid clipping within cards so the scrollbar remains accessible */
  .store-admin .card{ overflow: visible; }
}

/* Admin header actions: wrap and stack on small screens */
.store-admin .card .d-flex.flex-wrap.gap-2{ align-items:center; }
@media (max-width: 575.98px){
  .store-admin{ padding-left:.75rem; padding-right:.75rem; }
  .store-admin .card .card-body{ padding-left:.9rem; padding-right:.9rem; }
  .store-admin .card .d-flex.flex-wrap.gap-2{ flex-direction: column; align-items: stretch; gap:.5rem; }
  .store-admin .card .d-flex.flex-wrap.gap-2 > .btn{ width: 100%; }
  .store-admin .card .d-flex.flex-wrap.gap-2 > *{ margin-right: 0 !important; }
}

/* Admin search row: make inputs and button full-width on small screens */
@media (max-width: 575.98px){
  .store-admin form.row.g-2.align-items-center .col-auto,
  .store-admin form.row.g-2.align-items-end .col-auto{ width:100%; flex: 0 0 100%; }
  .store-admin form.row.g-2.align-items-center .col-auto .form-control,
  .store-admin form.row.g-2.align-items-end .col-auto .form-control{ width:100%; }
  .store-admin form.row.g-2.align-items-center .col-auto .btn,
  .store-admin form.row.g-2.align-items-end .col-auto .btn{ width:100%; }
}

/* Breadcrumbs wrap on mobile inside admin */
@media (max-width: 575.98px){
  .store-admin nav[aria-label="breadcrumb"] .breadcrumb{ flex-wrap: wrap; }
}

/* Prevent long labels from forcing overflow */
.store-admin .card .d-flex.flex-wrap.gap-2 > .btn{ white-space:nowrap; max-width:100%; }
@media (min-width: 1200px) {
  .store-product-card {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .store-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  }
}

@media (max-width: 767px) {
  main .container { padding-left: .5rem; padding-right: .5rem; }
  .store-product-card .ratio { margin-bottom: .5rem; }
}

.store-sidebar .store-product-card .ratio img { padding: .25rem !important; }
@media (min-width: 992px) {
  .store-sidebar {
    max-width: 220px;
  }
}
.store-sidebar .link-light {
  text-decoration: none;
}
.store-sidebar .link-light:hover {
  text-decoration: underline;
}
.store-thumb {
  background: color-mix(in oklab, var(--background-container, #ffffff), transparent 88%);
}
.store-thumb img {
  width: 64px;
  height: 48px;
  object-fit: cover;
}
.store-thumb:focus-visible {
  outline: 2px solid rgba(59,130,246,0.6);
}
.store-category-badge {
  /* Base (theme-aware) */
  --cat-bg: color-mix(in oklab, var(--primary-color, #3b82f6), transparent 82%);
  --cat-border: color-mix(in oklab, var(--primary-color, #3b82f6), transparent 55%);
  --cat-fg: var(--primary-contrast, var(--navbar-link-color, var(--text-color, #0f172a)));
  background: var(--cat-bg);
  color: var(--cat-fg) !important;
  font-weight: 600;
  border-radius: 999px;
  border:1px solid var(--cat-border);
  padding:.2rem .6rem;
  text-decoration:none;
}

/* Theme-aware store badge (for in-cart indicators, etc.) */
.store-badge {
  --badge-bg: color-mix(in oklab, var(--primary-color, #3b82f6), transparent 85%);
  --badge-fg: var(--primary-contrast, var(--navbar-link-color, var(--text-color, #0f172a)));
  --badge-border: color-mix(in oklab, var(--primary-color, #3b82f6), transparent 65%);
  display:inline-block;
  padding:.2rem .6rem;
  border-radius:999px;
  font-weight:600;
  background: var(--badge-bg);
  color: var(--badge-fg) !important;
  border:1px solid var(--badge-border);
}
[data-bs-theme='light'] .store-badge{ --badge-fg: #0f172a; }
[data-bs-theme='dark'] .store-badge,
[data-bs-theme='blue'] .store-badge{ --badge-fg: #e5e7eb; }

/* Info-toned badge variant */
.store-badge-info{
  --badge-bg: color-mix(in oklab, var(--bs-info, #0dcaf0), transparent 82%);
  --badge-border: color-mix(in oklab, var(--bs-info, #0dcaf0), transparent 55%);
}
/* Light theme adjustments */
[data-bs-theme='light'] .store-category-badge{
  --cat-fg: #0f172a;
}
/* Dark/Blue theme adjustments for better contrast */
[data-bs-theme='dark'] .store-category-badge,
[data-bs-theme='blue'] .store-category-badge{
  --cat-fg: #e5e7eb;
}
/* Hover/focus polish */
.store-category-badge:where(:hover,:focus-visible){
  filter: saturate(110%);
  text-decoration: none;
}
.store-thumb {
  cursor: pointer;
}
.store-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .store-cart-thumb {
    width: 120px;
  }
}
.cart-item {
  border-radius: 1.25rem;
}
.cart-item .item-left {
  width: 100%;
  max-width: 460px; /* roomy left column on md+ */
  align-items: center; /* center image and controls horizontally */
}
@media (max-width: 767px) {
  .cart-item .item-left {
    max-width: 100%;
  }
}
.cart-thumb-wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto; /* center within left column */
  border-radius: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.cart-thumb-wrapper img {
  width: 100%;
  height: auto; /* natural aspect on md+ */
  display: block;
}
@media (max-width: 767px) {
  .cart-thumb-wrapper {
    width: 100%;
    max-width: none;
    aspect-ratio: 3 / 4; /* taller image area on phones */
  }
  .cart-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill the area so it’s not tiny */
  }
}
.form-width-sm {
  max-width: 120px;
}
.cart-qty-input {
  width: 6rem;
}
@media (max-width: 767px) {
  .cart-qty-input {
    width: 4.5rem;
    max-width: 4.5rem;
  }
}

/* Compact controls on mobile for cart item actions */
@media (max-width: 767px) {
  .cart-item form .btn { padding: .45rem .6rem; }
  .cart-item form .btn-group { gap: 0; }
  .cart-controls { justify-content: center !important; }
  .cart-controls .btn-group .btn { white-space: nowrap; }
  .cart-controls .btn-group { flex-wrap: nowrap; }
}

/* Reduce overall spacing in cart to shorten scroll */
.cart-item .card-body { padding: 1rem; }
.cart-item + .cart-item { margin-top: .5rem; }
.cart-controls { margin-top: .25rem; }

/* Prevent cart control row from extending beyond parent */
.cart-controls {
  max-width: 100%;
  overflow: hidden;
  justify-content: center; /* align under centered image on md+ */
}
.cart-controls .form-control {
  min-width: 0; /* allow flex shrink */
}
.cart-controls .btn-group {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  /* On small screens we already center via previous rules; keep compact layout */
}

/* Reduce overall spacing in cart to shorten scroll */
.cart-item .card-body { padding: 1rem; }
.cart-item + .cart-item { margin-top: .5rem; }
.cart-controls { margin-top: .25rem; }

/* Constrain PayPal buttons to their container to prevent overflow */
#paypal-button-container,
.paypal-button-container,
.paypal-buttons,
.paypal-button-layout-vertical,
.paypal-button-layout-horizontal {
  max-width: 100% !important;
  width: 100% !important;
}
/* Dark theme: wrap PayPal iframes with a light surface so internal white separators blend */
[data-bs-theme='dark'] #paypal-button-container,
[data-bs-theme='dark'] .paypal-button-container{
  background:#fff;
  border-radius:.5rem;
  padding:.5rem;
}
/* Dark theme: wrap PayPal iframes with a light surface so internal white separators blend */
[data-bs-theme='dark'] #paypal-button-container,
[data-bs-theme='dark'] .paypal-button-container{
  background:#fff;
  border-radius:.5rem;
  padding:.5rem;
}

/* Store button theming: align with left Nav menu buttons across themes */
.store-btn,
.store-btn.btn,
.store-btn .btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:1rem; line-height:1.25;
  font-weight:500;
  border-radius:.75rem;
  padding:.62rem .95rem;
  color:var(--navbar-link-color, var(--btn-text-color,#111827));
  /* Fallback (no color-mix support) */
  background: linear-gradient(160deg, rgba(59,130,246,0.22) 0%, rgba(59,130,246,0.12) 100%) !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--primary-color) 18%, var(--background-container) 82%) 0%,
      color-mix(in oklab, var(--primary-color) 6%, var(--background-container) 94%) 100%) !important;
  border:1px solid color-mix(in oklab, var(--primary-color) 55%, transparent 55%) !important;
  box-shadow:
    0 2px 4px -1px rgba(0,0,0,.16),
    0 3px 6px -2px color-mix(in oklab, var(--primary-color), transparent 80%),
    0 0 0 1px color-mix(in oklab, var(--primary-color) 35%, transparent 85%) !important;
  transition:background .45s, box-shadow .45s, transform .3s, color .3s, border-color .45s, filter .45s;
  backdrop-filter:saturate(140%) brightness(1.02);
  text-decoration:none;
}
.store-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  mix-blend-mode:overlay; opacity:.55; transition:opacity .45s;
}
.store-btn:where(:hover,:focus-visible){
  transform:translateY(-3px);
  /* Fallback (no color-mix support) */
  background: linear-gradient(155deg, rgba(59,130,246,0.30) 0%, rgba(59,130,246,0.16) 100%) !important;
  background:
    linear-gradient(155deg,
      color-mix(in oklab, var(--primary-color) 26%, var(--background-container) 74%) 0%,
      color-mix(in oklab, var(--primary-color) 10%, var(--background-container) 90%) 100%) !important;
  box-shadow:
    0 6px 16px -3px color-mix(in oklab, var(--primary-color), transparent 50%),
    0 3px 10px -2px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in oklab, var(--primary-color) 55%, transparent 70%) !important;
}
.store-btn:where(:hover,:focus-visible)::before{ opacity:.75; }
.store-btn:active{ transform:translateY(-1px); box-shadow:0 3px 8px -2px color-mix(in oklab, var(--primary-color), transparent 60%), 0 2px 4px rgba(0,0,0,.25) !important; }

/* Optional role variants map to same base for consistency */
.store-btn-primary{ color:var(--navbar-link-color, var(--btn-text-color,#111827)) !important; }
.store-btn-secondary{ color:var(--navbar-link-color, var(--btn-text-color,#111827)) !important; }

/* Danger variant mirrors nav danger button */
.store-btn-danger{
  --danger-color: var(--bs-danger,#dc3545);
  color:var(--danger-color)!important;
  /* Fallback (no color-mix support) */
  background: linear-gradient(160deg, rgba(220,53,69,0.22) 0%, rgba(220,53,69,0.12) 100%) !important;
  border:1px solid rgba(220,53,69,0.55) !important;
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--danger-color) 20%, var(--background-container) 80%) 0%,
    color-mix(in oklab, var(--danger-color) 6%, var(--background-container) 94%) 100%) !important;
  border:1px solid color-mix(in oklab, var(--danger-color) 70%, transparent) !important;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.16), 0 3px 6px -2px color-mix(in oklab, var(--danger-color), transparent 80%), 0 0 0 1px color-mix(in oklab, var(--danger-color) 35%, transparent 85%) !important;
}
.store-btn-danger:where(:hover,:focus-visible){
  transform:translateY(-3px);
  /* Fallback (no color-mix support) */
  background: linear-gradient(155deg, rgba(220,53,69,0.30) 0%, rgba(220,53,69,0.16) 100%) !important;
  background:linear-gradient(155deg,
    color-mix(in oklab, var(--danger-color) 32%, var(--background-container) 68%) 0%,
    color-mix(in oklab, var(--danger-color) 12%, var(--background-container) 88%) 100%) !important;
  box-shadow:0 6px 16px -3px color-mix(in oklab, var(--danger-color), transparent 50%), 0 3px 10px -2px rgba(0,0,0,.30), 0 0 0 1px color-mix(in oklab, var(--danger-color) 60%, transparent 65%) !important;
}

/* Disabled */
.store-btn:disabled,
.store-btn[disabled]{ opacity:.7; filter:saturate(.9) grayscale(.1); }

/* Theme tweaks */
[data-bs-theme='dark'] .store-btn,
[data-bs-theme='blue'] .store-btn { box-shadow:0 2px 3px -1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.35); }
[data-bs-theme='dark'] .store-btn:where(:hover,:focus-visible),
[data-bs-theme='blue'] .store-btn:where(:hover,:focus-visible) { box-shadow:0 4px 12px -3px color-mix(in oklab, var(--primary-color), transparent 40%), 0 2px 6px rgba(0,0,0,.55); }
/* Ensure outline buttons are readable in Light theme (text should not be white) */
[data-bs-theme='light'] .btn-outline-primary,
[data-bs-theme='light'] .btn-outline-secondary,
[data-bs-theme='light'] .btn-outline-success,
[data-bs-theme='light'] .btn-outline-danger,
[data-bs-theme='light'] .btn-outline-warning,
[data-bs-theme='light'] .btn-outline-info,
[data-bs-theme='light'] .btn-outline-dark {
  color: #0f172a; /* slate-900 */
  border-color: rgba(15,23,42,0.25);
  background-color: rgba(255,255,255,0.6);
}
[data-bs-theme='light'] .btn-outline-primary:hover,
[data-bs-theme='light'] .btn-outline-secondary:hover,
[data-bs-theme='light'] .btn-outline-success:hover,
[data-bs-theme='light'] .btn-outline-danger:hover,
[data-bs-theme='light'] .btn-outline-warning:hover,
[data-bs-theme='light'] .btn-outline-info:hover,
[data-bs-theme='light'] .btn-outline-dark:hover {
  color: #0b1220;
  background-color: rgba(255,255,255,0.85);
  border-color: rgba(15,23,42,0.35);
}

/* Lightweight toast for add-to-cart feedback */
.store-toast{
  position: fixed;
  /* Light theme adjustments */
  [data-bs-theme='light'] .store-category-badge{ --cat-fg: #0f172a; }
  /* Dark/Blue theme adjustments for better contrast */
  [data-bs-theme='dark'] .store-category-badge,
  [data-bs-theme='blue'] .store-category-badge{ --cat-fg: #e5e7eb; }
  /* Hover/focus polish */
  .store-category-badge:where(:hover,:focus-visible){ filter: saturate(110%); text-decoration: none; }
}
/* Store button theming: align with left Nav menu buttons across themes */
.store-btn,
.store-btn.btn,
.store-btn .btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:1rem; line-height:1.25;
  font-weight:500;
  border-radius:.75rem;
  padding:.62rem .95rem;
  color:var(--navbar-link-color, var(--btn-text-color,#111827));
  /* Fallback (no color-mix support) */
  background: linear-gradient(160deg, rgba(59,130,246,0.22) 0%, rgba(59,130,246,0.12) 100%) !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--primary-color) 18%, var(--background-container) 82%) 0%,
      color-mix(in oklab, var(--primary-color) 6%, var(--background-container) 94%) 100%) !important;
  border:1px solid color-mix(in oklab, var(--primary-color) 55%, transparent 55%) !important;
  box-shadow:
    0 2px 4px -1px rgba(0,0,0,.16),
    0 3px 6px -2px color-mix(in oklab, var(--primary-color), transparent 80%),
    0 0 0 1px color-mix(in oklab, var(--primary-color) 35%, transparent 85%) !important;
  transition:background .45s, box-shadow .45s, transform .3s, color .3s, border-color .45s, filter .45s;
  backdrop-filter:saturate(140%) brightness(1.02);
  text-decoration:none;
}
.store-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
  mix-blend-mode:overlay; opacity:.55; transition:opacity .45s;
}
.store-btn:where(:hover,:focus-visible){
  transform:translateY(-3px);
  /* Fallback (no color-mix support) */
  background: linear-gradient(155deg, rgba(59,130,246,0.30) 0%, rgba(59,130,246,0.16) 100%) !important;
  background:
    linear-gradient(155deg,
      color-mix(in oklab, var(--primary-color) 26%, var(--background-container) 74%) 0%,
      color-mix(in oklab, var(--primary-color) 10%, var(--background-container) 90%) 100%) !important;
  box-shadow:
    0 6px 16px -3px color-mix(in oklab, var(--primary-color), transparent 50%),
    0 3px 10px -2px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in oklab, var(--primary-color) 55%, transparent 70%) !important;
}
.store-btn:where(:hover,:focus-visible)::before{ opacity:.75; }
.store-btn:active{ transform:translateY(-1px); box-shadow:0 3px 8px -2px color-mix(in oklab, var(--primary-color), transparent 60%), 0 2px 4px rgba(0,0,0,.25) !important; }

/* Optional role variants map to same base for consistency */
.store-btn-primary{ color:var(--navbar-link-color, var(--btn-text-color,#111827)) !important; }
.store-btn-secondary{ color:var(--navbar-link-color, var(--btn-text-color,#111827)) !important; }

/* Danger variant mirrors nav danger button */
.store-btn-danger{
  --danger-color: var(--bs-danger,#dc3545);
  color:var(--danger-color)!important;
  /* Fallback (no color-mix support) */
  background: linear-gradient(160deg, rgba(220,53,69,0.22) 0%, rgba(220,53,69,0.12) 100%) !important;
  border:1px solid rgba(220,53,69,0.55) !important;
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--danger-color) 20%, var(--background-container) 80%) 0%,
    color-mix(in oklab, var(--danger-color) 6%, var(--background-container) 94%) 100%) !important;
  border:1px solid color-mix(in oklab, var(--danger-color) 70%, transparent) !important;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.16), 0 3px 6px -2px color-mix(in oklab, var(--danger-color), transparent 80%), 0 0 0 1px color-mix(in oklab, var(--danger-color) 35%, transparent 85%) !important;
}
.store-btn-danger:where(:hover,:focus-visible){
  transform:translateY(-3px);
  /* Fallback (no color-mix support) */
  background: linear-gradient(155deg, rgba(220,53,69,0.30) 0%, rgba(220,53,69,0.16) 100%) !important;
  background:linear-gradient(155deg,
    color-mix(in oklab, var(--danger-color) 32%, var(--background-container) 68%) 0%,
    color-mix(in oklab, var(--danger-color) 12%, var(--background-container) 88%) 100%) !important;
  box-shadow:0 6px 16px -3px color-mix(in oklab, var(--danger-color), transparent 50%), 0 3px 10px -2px rgba(0,0,0,.30), 0 0 0 1px color-mix(in oklab, var(--danger-color) 60%, transparent 65%) !important;
}

/* Disabled */
.store-btn:disabled,
.store-btn[disabled]{ opacity:.7; filter:saturate(.9) grayscale(.1); }

/* Theme tweaks */
[data-bs-theme='dark'] .store-btn,
[data-bs-theme='blue'] .store-btn { box-shadow:0 2px 3px -1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.35); }
[data-bs-theme='dark'] .store-btn:where(:hover,:focus-visible),
[data-bs-theme='blue'] .store-btn:where(:hover,:focus-visible) { box-shadow:0 4px 12px -3px color-mix(in oklab, var(--primary-color), transparent 40%), 0 2px 6px rgba(0,0,0,.55); }
.card .paypal-buttons iframe,
.card #paypal-button-container iframe {
  max-width: 100% !important;
}

/* Lightweight toast for add-to-cart feedback */
.store-toast{
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  position: fixed;
  font-size: 14px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.store-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Mobile compaction overrides */
@media (max-width: 575.98px){
  .store-list { padding-left: .5rem; padding-right: .5rem; padding-top: .25rem; }
  nav[aria-label="breadcrumb"] .breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  nav[aria-label="breadcrumb"] .breadcrumb .breadcrumb-item { display: inline; }
  .breadcrumb { margin-bottom: .25rem; }
  .store-product-card .card-body { padding-top: .75rem; padding-bottom: .75rem; }
  .store-product-card .ratio { margin-bottom: .5rem; }
  .store-filter-inline { gap: .5rem !important; }
  .store-category-select { min-width: 150px; }
  /* Compact buttons on very small screens */
  .store-btn, .store-btn.btn, .store-btn .btn { padding: .5rem .7rem; font-size: .95rem; }
}