/* ============================================================
   DigiWorld premium catalog — desktop-first presentation layer
   Shared buyer catalog only. Product-detail and mobile layouts
   remain independent from this file.
   ============================================================ */

@keyframes catalog-hero-enter {
  from { opacity: 0; transform: translateY(18px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes catalog-card-enter {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes catalog-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .2); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

@keyframes catalog-button-sheen {
  from { transform: translateX(-160%) skewX(-20deg); }
  to { transform: translateX(420%) skewX(-20deg); }
}

@keyframes catalog-benefit-scroll-up {
  0%, 26% { opacity: 1; transform: translateY(0); }
  31%, 90% { opacity: 0; transform: translateY(-72%); }
  91% { opacity: 0; transform: translateY(72%); }
  100% { opacity: 1; transform: translateY(0); }
}

.catalog-hero,
.catalog-filter-title,
.catalog-results-count,
.catalog-category-name,
.catalog-category-count,
.card-category,
.card-btn.view-product {
  display: none;
}

.card-meta-row { display: contents; }

.catalog-card-benefit-item { display: none; }
.catalog-card-benefit-item:first-child { display: inline-flex; }
.catalog-filter-scrim { display: none; }

@media (min-width: 993px) {
  body:not(.dark-mode) {
    --catalog-ink: #132038;
    --catalog-muted: #68758a;
    --catalog-line: rgba(22, 47, 82, .1);
    --catalog-blue: #1e4f91;
    --catalog-blue-strong: #143c75;
    --catalog-surface: rgba(255, 255, 255, .94);
    background:
      radial-gradient(circle at 8% 16%, rgba(37, 99, 235, .055), transparent 27%),
      radial-gradient(circle at 94% 38%, rgba(245, 114, 36, .055), transparent 25%),
      #f7f8fb;
  }

  body .account-gradient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 76% 4%, rgba(37, 99, 235, .045), transparent 30%),
      radial-gradient(circle at 6% 74%, rgba(245, 114, 36, .04), transparent 26%);
  }

  .products-page-container {
    max-width: 1536px;
    margin: 28px auto 72px;
    padding: 0 28px;
    grid-template-columns: 272px minmax(0, 1fr);
    column-gap: 26px;
    row-gap: 26px;
  }

  .catalog-hero {
    position: relative;
    isolation: isolate;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: stretch;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid rgba(16, 38, 63, .2);
    border-radius: 24px;
    background: linear-gradient(105deg, #101b2b 0%, #13263d 58%, #183553 100%);
    box-shadow: 0 20px 48px rgba(20, 42, 72, .14), inset 0 1px 0 rgba(255, 255, 255, .07);
    animation: catalog-hero-enter .62s cubic-bezier(.16, 1, .3, 1) both;
  }

  .catalog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
    width: 74px;
    height: 3px;
    pointer-events: none;
    border-radius: 0 0 999px 999px;
    background: #f57224;
  }

  .catalog-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 29px 40px 28px;
  }

  .catalog-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 12px;
    color: rgba(210, 225, 242, .72);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .catalog-eyebrow-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f57224;
    color: #fff;
    font-size: .55rem;
    letter-spacing: 0;
  }

  .catalog-hero h2 {
    max-width: 690px;
    margin: 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.85rem, 2.2vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -.038em;
    line-height: 1.05;
  }

  .catalog-hero-copy > p {
    max-width: 660px;
    margin: 11px 0 0;
    color: rgba(225, 236, 250, .78);
    font-size: .85rem;
    font-weight: 450;
    line-height: 1.5;
  }

  .catalog-hero-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
    margin-top: 13px;
    color: rgba(210, 225, 242, .62);
    font-size: .66rem;
    font-weight: 650;
  }

  .catalog-hero-categories span { display: inline-flex; align-items: center; gap: 7px; }
  .catalog-hero-categories span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #f58a4b; }

  .catalog-proof-title {
    margin: 0 0 3px;
    color: rgba(210, 225, 242, .52);
    font-size: .59rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .catalog-hero-proof {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    margin: 20px 24px 20px 0;
    padding: 6px 0 6px 28px;
    border-left: 1px solid rgba(255, 255, 255, .13);
  }

  .catalog-proof-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .085);
  }

  .catalog-proof-item:last-child { border-bottom: 0; }

  .catalog-proof-icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(245, 138, 75, .3);
    border-radius: 8px;
    background: rgba(245, 114, 36, .1);
    color: #ff9c61;
    font-size: .7rem;
  }

  .catalog-proof-copy { display: grid; gap: 1px; }
  .catalog-proof-copy strong { color: #fff; font-size: .72rem; font-weight: 700; }
  .catalog-proof-copy span { color: rgba(219, 232, 249, .57); font-size: .62rem; line-height: 1.3; }

  .filter-sidebar {
    top: calc(var(--dw-sticky-header-offset, 120px) + 20px);
    max-height: calc(100vh - var(--dw-sticky-header-offset, 120px) - 40px);
    overflow: auto;
    padding: 18px 18px 20px;
    border: 1px solid var(--catalog-line) !important;
    border-radius: 23px !important;
    background: var(--catalog-surface) !important;
    box-shadow: 0 18px 48px rgba(30, 53, 82, .075), inset 0 1px 0 #fff !important;
    backdrop-filter: blur(18px) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 79, 145, .2) transparent;
  }

  .filter-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .46), rgba(245, 114, 36, .5), transparent);
  }

  .catalog-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 19px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(22, 47, 82, .08);
  }

  .catalog-filter-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--catalog-ink);
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
    font-weight: 750;
  }

  .catalog-filter-heading i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .085);
    color: var(--catalog-blue);
    font-size: .76rem;
  }

  .catalog-clear-filters {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(22, 47, 82, .09);
    border-radius: 10px;
    background: #fff;
    color: #7b8798;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
  }

  .catalog-clear-filters:hover {
    transform: rotate(-20deg);
    border-color: rgba(245, 114, 36, .25);
    background: #fff8f3;
    color: #e65d0b;
  }

  .filter-group { margin: 0 0 24px; }
  .filter-group:last-child { margin-bottom: 2px; }

  .filter-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 11px;
    color: #263650;
    font-family: 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .065em;
    text-transform: uppercase;
  }

  #category-filters { min-height: 214px; }

  .filter-group .category-label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    margin: 0;
    padding: 5px 8px;
    border-radius: 11px;
    color: #59677a;
    font-size: .8rem;
    font-weight: 600;
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }

  .filter-group .category-label:hover,
  .filter-group .category-label:has(input:checked) {
    color: var(--catalog-blue);
    background: linear-gradient(90deg, rgba(37, 99, 235, .075), rgba(37, 99, 235, .025));
    transform: translateX(2px);
  }

  .filter-group .category-label input[type='checkbox'] {
    appearance: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #cbd4e1;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .filter-group .category-label input[type='checkbox']::before {
    content: '\2713';
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    transform: scale(0);
    transition: transform .18s cubic-bezier(.16, 1, .3, 1);
  }

  .filter-group .category-label input[type='checkbox']:checked {
    border-color: var(--catalog-blue);
    background: linear-gradient(145deg, #2e6cb9, #1e4f91);
    box-shadow: 0 5px 12px rgba(30, 79, 145, .18);
  }

  .filter-group .category-label input[type='checkbox']:checked::before { transform: scale(1); }
  .catalog-category-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .catalog-category-count {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    background: rgba(30, 79, 145, .055);
    color: #7b8798;
    font-size: .67rem;
    font-weight: 750;
  }

  .price-filter {
    padding: 15px 14px 13px;
    border: 1px solid rgba(22, 47, 82, .075);
    border-radius: 15px;
    background: linear-gradient(145deg, #f8fbff, #fffaf6);
  }

  .price-filter input[type='range'] {
    height: 4px;
    margin: 5px 0 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #f57224);
  }

  .price-filter input[type='range']::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #f57224;
    box-shadow: 0 5px 13px rgba(245, 114, 36, .35);
  }

  .price-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    color: #718096;
    font-size: .72rem;
    font-weight: 650;
  }

  #price-value { color: var(--catalog-blue); font-size: .82rem; font-weight: 800; }

  .product-content-area { min-width: 0; }

  .products-header {
    min-height: 76px;
    margin: 0 0 20px;
    padding: 13px 15px 13px 22px;
    border: 1px solid var(--catalog-line);
    border-radius: 21px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 36px rgba(30, 53, 82, .06), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
  }

  .catalog-results-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
  }

  .catalog-results-summary::before {
    content: '';
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .1);
    animation: catalog-status-pulse 2.5s ease-in-out infinite;
  }

  #page-title {
    overflow: hidden;
    color: var(--catalog-ink);
    font-size: clamp(1.45rem, 1.7vw, 1.85rem);
    font-weight: 750;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-results-count {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(30, 79, 145, .08);
    border-radius: 9px;
    background: rgba(30, 79, 145, .055);
    color: #617088;
    font-size: .7rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .sort-trigger {
    min-height: 46px;
    padding: 0 15px;
    border: 1px solid rgba(22, 47, 82, .11);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #f8fafd);
    color: #263650;
    font-size: .79rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(30, 53, 82, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .sort-trigger::before {
    content: '\f160';
    color: var(--catalog-blue);
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
  }

  .sort-trigger:hover,
  .sort-trigger[aria-expanded='true'] {
    transform: translateY(-1px);
    border-color: rgba(30, 79, 145, .22);
    box-shadow: 0 10px 24px rgba(30, 79, 145, .09);
  }

  .sort-dropdown.vault-card {
    top: calc(100% + 10px);
    min-width: 226px;
    padding: 7px;
    border: 1px solid rgba(22, 47, 82, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 20px 48px rgba(23, 42, 68, .14);
  }

  .sort-option {
    padding: 11px 12px;
    border-radius: 10px;
    color: #5c697c;
    font-size: .78rem;
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }

  .sort-option:hover { transform: translateX(2px); background: rgba(30, 79, 145, .055); color: var(--catalog-blue); }
  .sort-option.active { background: linear-gradient(90deg, rgba(37, 99, 235, .095), rgba(245, 114, 36, .055)); color: var(--catalog-blue); }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .product-card,
  .skeleton-card {
    min-height: 500px;
    border: 1px solid rgba(22, 47, 82, .09);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 36px rgba(30, 53, 82, .065), inset 0 1px 0 #fff;
  }

  .product-card {
    isolation: isolate;
    opacity: 1;
    overflow: hidden;
    transform: translateZ(0);
    transition:
      transform .4s cubic-bezier(.16, 1, .3, 1),
      box-shadow .4s ease,
      border-color .35s ease;
  }

  .products-premium-ready .product-card:not(.catalog-card-visible) { opacity: 0; }
  .product-card.catalog-card-visible {
    animation: catalog-card-enter .58s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(min(var(--catalog-card-index, 0), 8) * 55ms);
  }

  .product-card::before {
    content: '';
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--catalog-pointer-x, 50%) var(--catalog-pointer-y, 0%), rgba(37, 99, 235, .1), transparent 48%);
    opacity: 0;
    transition: opacity .32s ease;
  }

  .product-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: rgba(30, 79, 145, .2);
    box-shadow: 0 26px 58px rgba(24, 48, 80, .14), 0 8px 22px rgba(245, 114, 36, .055);
  }

  .product-card:hover::before { opacity: 1; }

  .card-image-container {
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(22, 47, 82, .065);
    background:
      radial-gradient(circle at 82% 12%, rgba(37, 99, 235, .075), transparent 32%),
      radial-gradient(circle at 12% 88%, rgba(245, 114, 36, .06), transparent 30%),
      linear-gradient(145deg, #fbfcff, #fffaf6);
  }

  .card-image-container > a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.98) contrast(1.015);
    transform: scale(1);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
  }

  .product-card:hover .card-image { transform: scale(1.025); filter: saturate(1.04) contrast(1.02); }

  .quick-add-btn { display: none !important; }

  .card-wishlist-btn {
    top: 13px;
    right: 13px;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(22, 47, 82, .1);
    background: rgba(255, 255, 255, .86);
    color: #738096;
    box-shadow: 0 8px 20px rgba(30, 53, 82, .09);
    backdrop-filter: blur(14px);
  }

  .card-wishlist-btn:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(239, 68, 68, .18);
    background: #fff;
    color: #ef4444;
    box-shadow: 0 11px 24px rgba(239, 68, 68, .12);
  }

  .card-badge {
    top: 14px;
    left: 14px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    font-size: .64rem;
    letter-spacing: .075em;
    box-shadow: 0 8px 20px rgba(22, 33, 52, .13);
  }

  .card-content-wrapper {
    gap: 0;
    padding: 17px 19px 8px;
    background: transparent;
  }

  .card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
    margin-bottom: 10px;
  }

  .card-category {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: #627087;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .card-category::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--catalog-blue);
    box-shadow: 0 0 0 3px rgba(30, 79, 145, .08);
  }

  .tag-delivery {
    flex: 0 0 auto;
    gap: 5px;
    margin: 0;
    padding: 4px 7px;
    border: 0;
    border-radius: 8px;
    background: rgba(34, 197, 94, .075);
    color: #15803d;
    font-size: .66rem;
    font-weight: 750;
  }

  .tag-delivery i { color: #22c55e; font-size: .63rem; }

  .catalog-card-benefit {
    position: relative;
    display: block;
    flex: 0 0 116px;
    width: 116px;
    height: 27px;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    contain: layout paint;
  }

  .catalog-card-benefit-item,
  .catalog-card-benefit-item:first-child {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 7px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
    opacity: 0;
    font-size: .63rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    will-change: opacity, transform;
    animation: catalog-benefit-scroll-up 8.4s cubic-bezier(.22, 1, .36, 1) infinite both;
    animation-delay: var(--catalog-benefit-delay, 0s);
  }

  .catalog-card-benefit-item:nth-child(2) {
    animation-delay: calc(var(--catalog-benefit-delay, 0s) - 5.6s);
  }

  .catalog-card-benefit-item:nth-child(3) {
    animation-delay: calc(var(--catalog-benefit-delay, 0s) - 2.8s);
  }

  .catalog-card-benefit-item i {
    display: grid;
    place-items: center;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    font-size: .57rem;
  }

  .catalog-card-benefit-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .catalog-card-benefit-item--delivery {
    border-color: rgba(34, 197, 94, .1);
    background: linear-gradient(90deg, rgba(34, 197, 94, .1), rgba(240, 253, 244, .88));
    color: #15803d;
  }

  .catalog-card-benefit-item--delivery i { background: rgba(34, 197, 94, .12); color: #16a34a; }

  .catalog-card-benefit-item--genuine {
    border-color: rgba(37, 99, 235, .1);
    background: linear-gradient(90deg, rgba(37, 99, 235, .095), rgba(239, 246, 255, .88));
    color: #1d4ed8;
  }

  .catalog-card-benefit-item--genuine i { background: rgba(37, 99, 235, .11); color: #2563eb; }

  .catalog-card-benefit-item--support {
    border-color: rgba(124, 58, 237, .1);
    background: linear-gradient(90deg, rgba(124, 58, 237, .09), rgba(245, 243, 255, .9));
    color: #6d28d9;
  }

  .catalog-card-benefit-item--support i { background: rgba(124, 58, 237, .1); color: #7c3aed; }

  .product-name {
    min-height: 48px;
    margin: 0 0 10px;
    color: #17233a;
    font-size: .99rem;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.48;
  }

  .product-card:hover .product-name { color: #133f7b; }

  .product-rating {
    min-height: 23px;
    margin: 0 0 9px;
    font-size: .76rem;
  }

  .product-rating .review-count { color: #7d899b; font-size: .72rem; }

  .review-status-pill {
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: rgba(30, 79, 145, .05);
    color: #778397;
    font-size: .67rem;
  }

  .card-sold-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    margin-left: auto;
    padding: 4px 7px;
    border: 1px solid rgba(245, 114, 36, .1);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(245, 114, 36, .08), rgba(255, 247, 237, .82));
    color: #b94d0a;
    font-size: .65rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
  }

  .card-sold-count i { color: #f57224; font-size: .62rem; }

  .product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 39px;
    padding-top: 4px;
  }

  .product-price .current-price {
    color: #f36a18;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.035em;
  }

  .product-price .original-price { margin: 0; font-size: .75rem; }

  .card-buttons {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
    gap: 8px;
    margin-top: auto;
    padding: 10px 18px 18px;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }

  .card-btn {
    min-height: 44px;
    padding: 9px 11px;
    border-radius: 12px;
    font-size: .75rem;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  }

  .card-btn.view-product {
    display: inline-flex;
    border: 1px solid rgba(30, 79, 145, .13);
    background: linear-gradient(180deg, #fff, #f8fafd);
    color: var(--catalog-blue);
    box-shadow: 0 6px 14px rgba(30, 53, 82, .045);
  }

  .card-btn.view-product:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 79, 145, .26);
    background: rgba(37, 99, 235, .055);
    box-shadow: 0 10px 22px rgba(30, 79, 145, .09);
  }

  .card-btn.add-to-cart {
    background: linear-gradient(135deg, #ff8a00, #f57224 58%, #e75608);
    box-shadow: 0 8px 20px rgba(245, 114, 36, .23), inset 0 1px 0 rgba(255, 255, 255, .22);
  }

  .card-btn.add-to-cart::before {
    left: -80%;
    width: 28%;
    transition: none;
  }

  .product-card:hover .card-btn.add-to-cart::before { animation: catalog-button-sheen .75s .08s ease both; }

  .card-btn.add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 27px rgba(245, 114, 36, .34), inset 0 1px 0 rgba(255, 255, 255, .28);
  }

  .skeleton-card { overflow: hidden; }
  .skeleton-image {
    aspect-ratio: 1 / 1;
    background: linear-gradient(105deg, #f3f6fa 24%, #fff 42%, #f3f6fa 60%);
    background-size: 240% 100%;
  }
  .skeleton-content { min-height: 206px; padding: 20px; }

  .pagination {
    gap: 7px;
    margin-top: 30px;
  }

  .pagination button {
    min-width: 40px;
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid rgba(22, 47, 82, .1);
    border-radius: 11px;
    background: #fff;
    color: #54647a;
    box-shadow: 0 6px 16px rgba(30, 53, 82, .045);
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }

  .pagination button:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 79, 145, .22);
    color: var(--catalog-blue);
    box-shadow: 0 10px 22px rgba(30, 79, 145, .09);
  }

  .pagination button.active {
    border-color: transparent;
    background: linear-gradient(145deg, #2e6cb9, #1e4f91);
    color: #fff;
    box-shadow: 0 9px 22px rgba(30, 79, 145, .24);
  }
}

@media (min-width: 993px) and (max-width: 1240px) {
  .catalog-hero { grid-template-columns: 1fr 370px; }
  .catalog-hero-copy { padding: 30px; }
  .catalog-hero-proof { margin-right: 20px; padding-left: 22px; }
  .products-page-container { grid-template-columns: 250px minmax(0, 1fr); padding-inline: 20px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .catalog-hero { display: none; }

  body.products-page {
    background:
      radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .055), transparent 24rem),
      radial-gradient(circle at 96% 34%, rgba(245, 114, 36, .05), transparent 22rem),
      #f5f7fb;
  }

  body.products-page .account-gradient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 36rem);
  }

  .products-page-container {
    display: block;
    max-width: 820px;
    margin: 0 auto 64px;
    padding: 14px 18px calc(118px + env(safe-area-inset-bottom, 0px));
  }

  .product-content-area { min-width: 0; }

  .products-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'summary summary'
      'filters sort';
    gap: 11px 10px;
    margin: 0 0 14px;
    padding: 15px;
    border: 1px solid rgba(30, 53, 82, .085);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 13px 34px rgba(30, 53, 82, .075), inset 0 1px 0 #fff;
  }

  .catalog-results-summary {
    grid-area: summary;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
  }

  .catalog-results-summary::before {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .1);
  }

  #page-title {
    overflow: hidden;
    color: #17243a;
    font-size: 1.18rem;
    font-weight: 780;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-results-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(30, 79, 145, .08);
    border-radius: 8px;
    background: #f1f5fa;
    color: #66758b;
    font-size: .65rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .mobile-filter-toggle,
  .sort-trigger {
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(22, 47, 82, .1);
    border-radius: 13px;
    background: linear-gradient(180deg, #fff, #f8fafd);
    color: #263650;
    box-shadow: 0 5px 14px rgba(30, 53, 82, .045);
    font-size: .78rem;
    font-weight: 720;
  }

  .mobile-filter-toggle {
    grid-area: filters;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
  }

  .mobile-filter-toggle i,
  .sort-trigger::before { color: #1e5ca8; }

  .mobile-filter-toggle[data-active-count]:not([data-active-count='0'])::after {
    content: attr(data-active-count);
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f57224;
    color: #fff;
    font-size: .6rem;
    line-height: 1;
  }

  .sort-control { grid-area: sort; min-width: 0; }
  .sort-trigger { width: 100%; justify-content: center; }
  .sort-trigger::before {
    content: '\f160';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
  }
  .sort-trigger #sort-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sort-dropdown.vault-card {
    top: calc(100% + 8px);
    right: 0;
    min-width: min(224px, calc(100vw - 36px));
    padding: 7px;
    border: 1px solid rgba(22, 47, 82, .1);
    border-radius: 15px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 44px rgba(23, 42, 68, .17);
  }
  .sort-option { padding: 12px; font-size: .78rem; }

  .filter-sidebar,
  .products-page-container .filter-sidebar.vault-card {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10020;
    box-sizing: border-box;
    width: min(86vw, 340px);
    height: 100dvh;
    max-height: none;
    padding: max(18px, env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border: 0 !important;
    border-right: 1px solid rgba(22, 47, 82, .1) !important;
    border-radius: 0 24px 24px 0 !important;
    background: rgba(252, 253, 255, .98) !important;
    box-shadow: 24px 0 70px rgba(15, 23, 42, .2) !important;
    transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    backdrop-filter: blur(20px);
  }

  .filter-sidebar.open,
  .products-page-container .filter-sidebar.vault-card.open { transform: translateX(0); }
  body.mobile-filters-open { overflow: hidden; }

  .catalog-filter-scrim {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(9, 18, 33, .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    backdrop-filter: blur(3px);
  }

  body.mobile-filters-open .catalog-filter-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 10px;
  }
  .sidebar-header h3 { margin: 0; color: #17243a; font-size: 1.25rem; letter-spacing: -.03em; }
  .close-filters {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0 0 3px;
    border: 1px solid rgba(22, 47, 82, .09);
    border-radius: 13px;
    background: #f5f7fb;
    color: #627187;
    font-size: 1.7rem;
  }
  .catalog-filter-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(22, 47, 82, .08);
  }
  .catalog-filter-heading { display: none; }
  .catalog-clear-filters {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(245, 114, 36, .14);
    border-radius: 10px;
    background: #fff7f2;
    color: #d95a10;
  }
  .catalog-clear-filters::after { content: ' Reset'; margin-left: 5px; font-size: .72rem; font-weight: 700; }
  .filter-group h4 { color: #293950; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
  .filter-group .category-label {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 0 0 3px;
    padding: 4px 9px;
    border-radius: 11px;
    color: #536278;
    font-size: .84rem;
    font-weight: 650;
  }
  .filter-group .category-label.is-selected { background: #eef5ff; color: #1e5ca8; }
  .filter-group .category-label input[type='checkbox'] { width: 19px; height: 19px; margin: 0; }
  .price-filter {
    padding: 14px;
    border: 1px solid rgba(22, 47, 82, .08);
    border-radius: 15px;
    background: linear-gradient(145deg, #f7faff, #fff9f5);
  }

  body.dark-mode.products-page { background: #080d16; }
  body.dark-mode .products-header {
    border-color: rgba(148, 163, 184, .12);
    background: rgba(13, 22, 36, .94);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
  }
  body.dark-mode #page-title { color: #edf4ff; }
  body.dark-mode .catalog-results-count,
  body.dark-mode .mobile-filter-toggle,
  body.dark-mode .sort-trigger { border-color: rgba(148, 163, 184, .13); background: rgba(255, 255, 255, .05); color: #b7c4d6; }
  body.dark-mode .products-page-container .filter-sidebar.vault-card { background: rgba(10, 17, 28, .985) !important; border-right-color: rgba(148, 163, 184, .12) !important; }
  body.dark-mode .sidebar-header h3 { color: #edf4ff; }
  body.dark-mode .close-filters { border-color: rgba(148, 163, 184, .12); background: rgba(255, 255, 255, .05); color: #b7c4d6; }
  body.dark-mode .filter-group .category-label.is-selected { background: rgba(59, 130, 246, .12); color: #93c5fd; }
}

@media (max-width: 600px) {
  .products-page-container {
    margin-top: 0;
    padding: 12px 12px calc(116px + env(safe-area-inset-bottom, 0px));
  }

  .products-header { margin-bottom: 12px; padding: 13px; border-radius: 18px; }
  #page-title { font-size: 1.08rem; }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .product-card {
    min-width: 0;
    min-height: 366px;
    contain-intrinsic-size: 174px 366px;
    border: 1px solid rgba(22, 47, 82, .075);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(30, 53, 82, .075);
    transform: none !important;
  }

  .card-image-container {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-bottom: 1px solid rgba(22, 47, 82, .065);
    background: #f5f7fa;
  }
  .card-image-container > a { display: block; width: 100%; height: 100%; }
  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }

  .card-badge {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 51px);
    padding: 5px 8px;
    overflow: hidden;
    border-radius: 8px;
    font-size: .57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-wishlist-btn { top: 8px; right: 8px; width: 34px; height: 34px; }
  .quick-add-btn { display: none !important; }

  .card-content-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 10px 7px;
    background: #fff;
  }

  .tag-delivery,
  .catalog-card-benefit {
    width: auto;
    max-width: 100%;
    min-height: 23px;
    margin: 0 0 7px;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }
  .catalog-card-benefit-item,
  .catalog-card-benefit-item:first-child {
    position: static;
    display: none;
    min-height: 23px;
    padding: 0 7px;
    border: 1px solid rgba(34, 197, 94, .1);
    border-radius: 7px;
    background: #effaf2;
    color: #16813c;
    font-size: .58rem;
    font-weight: 750;
    line-height: 1;
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .catalog-card-benefit-item:first-child { display: inline-flex; }
  .catalog-card-benefit-item i { font-size: .55rem; }
  .catalog-card-benefit-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .product-name {
    min-height: 2.7em;
    margin: 0 0 6px;
    color: #17243a;
    font-size: .78rem;
    font-weight: 720;
    letter-spacing: -.015em;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .product-rating {
    display: flex;
    min-height: 27px;
    margin: 0 0 4px;
    gap: 2px;
    flex-wrap: wrap;
    align-content: center;
    font-size: .62rem;
  }
  .product-rating > i { font-size: .61rem; }
  .product-rating .review-count { margin-left: 2px; font-size: .61rem; }
  .review-status-pill {
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    gap: 4px;
    border-radius: 7px;
    font-size: .59rem;
  }
  .review-status-pill i { font-size: .59rem; }
  .review-status-text { min-width: 0; }
  .card-sold-count {
    min-height: 20px;
    margin-left: auto;
    padding: 3px 5px;
    gap: 3px;
    border-radius: 7px;
    font-size: .55rem;
  }
  .card-sold-count i { font-size: .52rem; }

  .product-price {
    display: flex;
    min-height: 31px;
    margin-top: auto;
    padding-top: 2px;
    gap: 5px;
    align-items: baseline;
    flex-wrap: wrap;
  }
  .product-price .current-price { font-size: 1.14rem; font-weight: 820; letter-spacing: -.035em; }
  .product-price .original-price { margin: 0; font-size: .61rem; }

  .products-page-container .product-card .card-buttons {
    display: block;
    margin: 0;
    padding: 0 10px 10px;
  }
  .products-page-container .product-card .card-btn.view-product { display: none; }
  .products-page-container .product-card .card-btn.add-to-cart {
    min-height: 43px;
    padding: 8px 7px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff8a00, #f57224 58%, #e75608);
    box-shadow: 0 7px 17px rgba(245, 114, 36, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: .7rem;
    letter-spacing: -.01em;
  }
  .card-btn.add-to-cart i { font-size: .69rem; }

  .skeleton-card { min-height: 366px; border-radius: 18px; }
  .skeleton-image { aspect-ratio: 1 / 1; }
  .skeleton-content { min-height: 170px; padding: 10px; }

  body.products-page #digix-chat-open-button.digix-whatsapp-fallback {
    right: 14px;
    bottom: calc(91px + env(safe-area-inset-bottom, 0px)) !important;
    width: 54px;
    min-width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }
  body.products-page #digix-chat-open-button.digix-whatsapp-fallback > i { width: auto; font-size: 26px; }
  body.products-page #digix-chat-open-button.digix-whatsapp-fallback .digix-whatsapp-fallback-copy { display: none; }

  body.dark-mode .product-card,
  body.dark-mode .card-content-wrapper { border-color: rgba(148, 163, 184, .1); background: #0d1624; }
  body.dark-mode .card-image-container { border-color: rgba(148, 163, 184, .08); background: #111d2d !important; }
  body.dark-mode .product-name { color: #edf4ff; }
}

@media (max-width: 359px) {
  .products-page-container { padding-inline: 9px; }
  .product-grid { gap: 8px; }
  .product-card { min-height: 348px; }
  .card-content-wrapper { padding-inline: 8px; }
  .product-name { font-size: .72rem; }
  .products-page-container .product-card .card-buttons { padding-inline: 8px; }
  .catalog-results-count { display: none; }
}

@media (min-width: 993px) {
  body.dark-mode {
    --catalog-ink: #e8eef8;
    --catalog-muted: #98a7bd;
    --catalog-line: rgba(148, 163, 184, .12);
    --catalog-blue: #7ab5ff;
    --catalog-blue-strong: #a4ceff;
    --catalog-surface: rgba(13, 22, 36, .92);
    background:
      radial-gradient(circle at 9% 16%, rgba(37, 99, 235, .09), transparent 28%),
      radial-gradient(circle at 93% 40%, rgba(245, 114, 36, .07), transparent 25%),
      #070b12;
  }

  body.dark-mode .filter-sidebar,
  body.dark-mode .products-header,
  body.dark-mode .product-card,
  body.dark-mode .skeleton-card {
    border-color: rgba(148, 163, 184, .11) !important;
    background: rgba(13, 22, 36, .9) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  }

  body.dark-mode .catalog-filter-heading,
  body.dark-mode #page-title,
  body.dark-mode .product-name { color: #edf4ff !important; }

  body.dark-mode .filter-group h4,
  body.dark-mode .filter-group .category-label { color: #9dadc3; }

  body.dark-mode .filter-group .category-label:hover,
  body.dark-mode .filter-group .category-label:has(input:checked) {
    color: #a8ccff;
    background: rgba(59, 130, 246, .1);
  }

  body.dark-mode .filter-group .category-label input[type='checkbox'],
  body.dark-mode .catalog-clear-filters,
  body.dark-mode .sort-trigger,
  body.dark-mode .card-btn.view-product,
  body.dark-mode .pagination button {
    border-color: rgba(148, 163, 184, .14);
    background: rgba(255, 255, 255, .045);
    color: #b8c5d8;
  }

  body.dark-mode .price-filter,
  body.dark-mode .card-image-container {
    border-color: rgba(148, 163, 184, .09);
    background:
      radial-gradient(circle at 82% 12%, rgba(59, 130, 246, .1), transparent 32%),
      radial-gradient(circle at 12% 88%, rgba(245, 114, 36, .07), transparent 30%),
      #0d1726 !important;
  }

  body.dark-mode .price-label,
  body.dark-mode .review-status-pill,
  body.dark-mode .catalog-results-count,
  body.dark-mode .catalog-category-count {
    border-color: rgba(148, 163, 184, .08);
    background: rgba(255, 255, 255, .045);
    color: #9dadc3;
  }

  body.dark-mode .card-category { color: #91a1b7; }
  body.dark-mode .tag-delivery { background: rgba(34, 197, 94, .1) !important; color: #71d992 !important; }
  body.dark-mode .catalog-card-benefit { background: transparent !important; }
  body.dark-mode .catalog-card-benefit-item--delivery { border-color: rgba(74, 222, 128, .13); background: rgba(34, 197, 94, .1); color: #86efac; }
  body.dark-mode .catalog-card-benefit-item--genuine { border-color: rgba(96, 165, 250, .14); background: rgba(37, 99, 235, .12); color: #93c5fd; }
  body.dark-mode .catalog-card-benefit-item--support { border-color: rgba(167, 139, 250, .14); background: rgba(124, 58, 237, .12); color: #c4b5fd; }
  body.dark-mode .card-sold-count { border-color: rgba(251, 146, 60, .15); background: rgba(245, 114, 36, .1); color: #fdba74; }
  body.dark-mode .product-card:hover { border-color: rgba(96, 165, 250, .24) !important; box-shadow: 0 28px 64px rgba(0,0,0,.42), 0 0 24px rgba(37,99,235,.07) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-hero,
  .catalog-results-summary::before,
  .product-card.catalog-card-visible,
  .product-card:hover .card-btn.add-to-cart::before,
  .catalog-card-benefit-item {
    animation: none !important;
  }

  .catalog-card-benefit-item { opacity: 0 !important; transform: none !important; }
  .catalog-card-benefit-item:first-child { opacity: 1 !important; }

  .product-card,
  .card-image,
  .catalog-proof-item,
  .filter-group .category-label,
  .sort-trigger,
  .card-btn,
  .pagination button {
    transition-duration: .01ms !important;
  }
}