body {
  background:
    radial-gradient(circle at 8% -15%, rgba(42, 158, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15, 74, 216, 0.12), transparent 32%),
    linear-gradient(180deg, #f9fbff 0%, #edf2fa 100%);
}
.brandbg {
  background:
    radial-gradient(circle at 8% -15%, rgba(42, 158, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15, 74, 216, 0.12), transparent 32%),
    linear-gradient(180deg, #f9fbff 0%, #edf2fa 100%);
}
.bg-brand-new{
  background:
    radial-gradient(circle at 8% -15%, rgba(42, 158, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15, 74, 216, 0.12), transparent 32%),
    linear-gradient(180deg, #f9fbff 0%, #edf2fa 100%);
}
.halfscreen {
  min-height:50vh;
}
.thirdscreen {
  min-height:33vh;
}
.quarterscreen {
  min-height:25vh;
}
:root {
  --bg: #edf2fa;
}

body {
  background:
    radial-gradient(circle at 8% -15%, rgba(42, 158, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(15, 74, 216, 0.12), transparent 32%),
    linear-gradient(180deg, #f9fbff 0%, var(--bg) 100%);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-btn {
     position: relative;
     padding: 10px 22px;
     font-size: 15px;
     font-weight: 500;
     color: #6b7280;
     border-radius: 9999px;
     border: 1.5px solid transparent;
     background: transparent;
     cursor: pointer;
     transition: color 0.2s, border-color 0.2s, background 0.2s;
     white-space: nowrap;
   }
   .tab-btn:hover { color: #fff; background-color:rgb(42 158 255); }
   .tab-btn.active {
     color: #fff;
     border-color: #0f4ad8;
     background: #0f4ad8;
     box-shadow: 0 1px 6px rgb(15, 74, 216);
   }

   .tab-panel { display: none; }
   .tab-panel.active { display: flex; }

   .stat-card {
     background: rgba(255,255,255,0.96);
     backdrop-filter: blur(8px);
     border-radius: 16px;
     padding: 20px 24px;
     box-shadow: 0 8px 32px rgba(0,0,0,0.12);
     min-width: 230px;
   }

   .trend-up { font-size: 13px; font-weight: 600; }
   .trend-neutral { color: #3b82f6; font-size: 13px; font-weight: 600; }

   .img-container {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
   }
   .img-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.5s ease;
   }
   .img-container:hover img { transform: scale(1.02); }
   .overlay-card {
     position: absolute;
     bottom: 24px;
     left: 24px;
   }

   .feature-bullet { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
   .bullet-dot {
     width: 7px; height: 7px; border-radius: 50%;
     background: #2563eb; margin-top: 7px; flex-shrink: 0;
   }

   .content-area { animation: fadeUp 0.35s ease forwards; }
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: translateY(0); }
   }

   .get-started-btn {
     display: inline-block;
     background: #2563eb;
     color: #fff;
     font-weight: 600;
     font-size: 15px;
     padding: 13px 28px;
     border-radius: 9999px;
     border: none;
     cursor: pointer;
     transition: background 0.2s, transform 0.15s;
     text-decoration: none;
   }
   .get-started-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
   .get-started-btn:active { transform: translateY(0); }

   .section-wrapper {
     max-width: 1100px;
     margin: 0 auto;
     padding: 60px 24px 80px;
   }
   .product-card { background: #aaa; position: relative; overflow: hidden; }

    .product-img-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3/4;
    }

    .product-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
    }

    /* .product-card:hover .product-img-wrap img { transform: scale(1.04); } */

    .badge {
      position: absolute;
      top: 14px; left: 14px;
      font-family: 'Jost', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      background: #fff;
      color: #1a1a1a;
    }

    .quick-view-wrap {
      position: absolute;
      background-color:white;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .quick-view-text {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #1a1a1a;
      white-space: nowrap;
    }

    .wishlist-btn {
      width: 30px; height: 30px;
      border: 1px solid #c5c3be;
      background: transparent;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .wishlist-btn:hover { background: #fff; }
    .wishlist-btn svg { width: 14px; height: 14px; stroke: #1a1a1a; fill: none; }

    .product-card:hover .quick-view-wrap { opacity: 1; }

    .product-info {
      padding: 14px 0 18px;
    }

    .product-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .product-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: #1a1a1a;
    }

    .product-category {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #888;
      margin-top: 3px;
    }

    .price-block {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      transition: opacity 0.2s;
    }

    .price { font-size: 14px; font-weight: 400; color: #1a1a1a; }
    .price-original { font-size: 13px; color: #aaa; text-decoration: line-through; }

    .add-to-cart-btn {
      /* display: none; */
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 7px 14px;
      border: 1px solid #1a1a1a;
      /* background: black; */
      color: #1a1a1a;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    .add-to-cart-btn:hover { background: #000; color: #fff; }

    .product-card:hover .price-block { display: none; }
    .product-card:hover .add-to-cart-btn { display: inline-block; }

    .divider { border: none; border-top: 1px solid #dddbd7; margin: 0; }

    .sort-select {
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      letter-spacing: 0.06em;
      border: 1px solid #c5c3be;
      background: transparent;
      padding: 6px 28px 6px 10px;
      color: #1a1a1a;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .sort-select:focus { outline: none; }

    @media (max-width: 640px) {
      .product-name { font-size: 15px; }
    }

   @media (max-width: 768px) {
     .tab-btn { font-size: 13px; padding: 8px 14px; }
     .overlay-card { bottom: 12px; left: 12px; }
     .stat-card { min-width: 190px; padding: 14px 16px; }
   }

   /* Card */
    .product-card {
      background: var(--apple-gray);
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      transition: box-shadow 0.35s cubic-bezier(.22,.68,0,1.2), transform 0.35s cubic-bezier(.22,.68,0,1.2);
      cursor: pointer;
    }
    .product-card:hover {
      box-shadow: 0 20px 60px rgba(0,0,0,0.12);
      transform: translateY(-4px);
    }

    /* Image zoom */
    .product-img-wrap {
      overflow: hidden;
    }
    .product-img-wrap img {
      transition: transform 0.55s cubic-bezier(.22,.68,0,1.2);
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .product-card:hover .product-img-wrap img {
      /* transform: scale(1.06); */
    }

    /* Price → Add to Cart transition */
    .price-block {
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .cart-block {
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* Add to Cart button */
    .add-to-cart-btn {
      background: black;
      color: #fff;
      border: none;
      border-radius: 980px;
      padding: 10px 24px;
      font-size: 0.75rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease;
      letter-spacing: 0.01em;
    }
    .add-to-cart-btn:hover {
      background: #0077ed;
      /* transform: scale(1.04); */
    }
    /* .add-to-cart-btn:active {
      transform: scale(0.97);
    } */

    /* Quick View */
    .quick-view-badge {
      position: absolute;
      bottom: 130px;
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 980px;
      padding: 7px 18px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--apple-text);
      letter-spacing: 0.02em;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .product-card:hover .quick-view-badge {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    /* Color dots */
    .color-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.12);
      display: inline-block;
      cursor: pointer;
      transition: transform 0.15s ease;
    }
    .color-dot:hover { transform: scale(1.25); }
    .color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,0.35); }

    /* Pagination dots */
    .page-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #c9c9cb;
      transition: background 0.2s;
    }
    .page-dot.active { background: #1d1d1f; }

    /* Engraving label */
    .engraving-label {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--apple-orange);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    /* Badge pills */
    .badge-new {
      background: #000;
      color: #fff;
    }
    .badge-sale {
      background: #34c759;
      color: #fff;
    }
    .badge-pill {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 980px;
    }

    /* Cart notification */
    .cart-notification {
      position: fixed;
      bottom: 28px;
      right: 28px;
      background: #1d1d1f;
      color: #fff;
      padding: 14px 22px;
      border-radius: 14px;
      font-size: 0.82rem;
      font-weight: 500;
      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
      transform: translateY(80px);
      opacity: 0;
      transition: all 0.4s cubic-bezier(.22,.68,0,1.2);
      z-index: 9999;
      pointer-events: none;
    }
    .cart-notification.show {
      transform: translateY(0);
      opacity: 1;
    }

    .carousel-hide-scrollbar {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .carousel-hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .carousel-btn {
      width: 42px;
      height: 42px;
      border-radius: 9999px;
      background: white;
      border: 1px solid #e5e7eb;
      color: #1d1d1f;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
      transition: all 0.2s ease;
    }

    .carousel-btn:hover {
      background: #0f4ad8;
      color: white;
      border-color: #0f4ad8;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .quick-view-badge { bottom: 110px; }
    }

h2.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.filter-section{margin-bottom:6px}
.filter-label{font-size:11px;font-weight:500;color:var(--color-text-tertiary);letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px 2px}
.filter-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-chip{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;width:72px}
.chip-icon{width:52px;height:52px;border-radius:50%;background:var(--color-background-secondary);border:.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.chip-icon svg{width:22px;height:22px;fill:none;stroke:var(--color-text-secondary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.chip-label{font-size:11px;color:var(--color-text-secondary);text-align:center;line-height:1.3;transition:color .15s}
.filter-chip.active .chip-icon{background:#E6F1FB;border-color:#185FA5}
.filter-chip.active .chip-icon svg{stroke:#185FA5}
.filter-chip.active .chip-label{color:#185FA5;font-weight:500}
.filter-chip:hover:not(.active) .chip-icon{border-color:var(--color-border-secondary);background:var(--color-background-primary)}
.divider{height:.5px;background:var(--color-border-tertiary);margin:12px 0}
@media(prefers-color-scheme:dark){
.filter-chip.active .chip-icon{background:#042C53;border-color:#378ADD}
.filter-chip.active .chip-icon svg{stroke:#85B7EB}
.filter-chip.active .chip-label{color:#85B7EB}
}