/* ── PRODUCTS SECTION ────────────────────────────────────── */
    .products-section {
      max-width: 1440px;
      margin: 0 auto;
      padding: 14px 0px 0px;
    }

    /* toolbar */
    .toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      gap: 14px;
      /* margin-bottom: 28px; */
      padding: 16px 22px;
      background: var(--white);
      border: 1px solid var(--border2);
      border-radius: var(--rad-lg);
      /* box-shadow: var(--shadow); */
      flex-wrap: wrap;
    }
    .tb-left {display: flex;align-items: center;gap: 12px;flex: 1;min-width: 180px;}
    .tb-title {
      font-family: 'Outfit', serif;
      font-size: 22px;
      font-weight: 600;
    }
    .tb-count {
      background: var(--blue-dim); color: var(--blue);
      padding: 2px 11px; border-radius: 100px;
      font-size: 12px; font-weight: 600;
      border: 1px solid var(--border);
    }
    .tb-right { display: flex; align-items: center; gap: 10px; }
    .btn-shuffle {
      display: flex;
      align-items: center;
      gap: 6px;
      /* background: var(--blue-dim); */
      border: 1px solid var(--blue-deep);
      color: var(--blue-deep);
      padding: 7px 16px;
      border-radius: var(--radius);
      font-size: 12px;
      font-weight: 600;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .btn-shuffle:hover {
        background: var(--blue);
        color: #fff; 
        border-color: var(--blue);
    }
    .btn-shuffle svg {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        transition: transform 0.4s; 
    }
    .btn-shuffle:hover svg { 
        transform: rotate3d(1, 0, 0, 180deg); 
    }

    .sort-sel {
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 8px 34px 8px 13px;
      border-radius: var(--radius);
      font-size: 12px;
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 11px center;
      transition: border-color .2s;
    }
    .sort-sel:focus { border-color: var(--blue); }

    .view-btns { display: flex; gap: 4px; }
    .vbtn {
      width: 34px; height: 34px; border-radius: var(--radius);
      border: 1px solid var(--border2);
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .vbtn:hover, .vbtn.on {border-color: var(--blue-deep);color: var(--blue-deep);background: var(--blue-dim);}
    .vbtn svg { width: 14px; height: 14px; fill: currentColor; }

    /* grid */
   .products-grid {
       margin: 0 auto 75px auto;
       display: grid;
       max-width: 1435px;
       padding: 10px;
       grid-template-columns: repeat(5, 1fr);
       contain: layout paint;
       gap: 10px;
   }
   @media (max-width: 1200px) {
       .products-grid {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   @media (max-width: 900px) {
       .products-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }
   @media (max-width: 600px) {
       .products-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

    /* card */
    .pcard {
      background: var(--white);
      border: 1px solid var(--border2);
      border-radius: var(--rad-lg);
      overflow: hidden;
      transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1), border-color 0.3s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      content-visibility: auto;
      contain: layout paint style;
      contain-intrinsic-size: 380px;
      isolation: isolate;
    }
     .pcard::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s cubic-bezier(.4,0,.2,1);
    }
    .pcard:hover::after {
      opacity: 1;
    }
    .pcard:hover {
      box-shadow: var(--shadow-hv);
      border-color: var(--border);
      transform: translateY(-5px);
    }
    .pcard:hover .pimg e { will-change: transform; transform: scale(1.2) translateZ(0); }
    .pcard:hover .pactions { opacity: 1; transform: translateY(0); }

    .pimg-wrap {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      background: var(--white);
      flex-shrink: 0;
    }
    .pimg {
      content-visibility: auto;
      color: var(--text);
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 72px;
      transform: none !important;
      transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    }
    .pimg img {
      content-visibility: auto;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      decoding: auto;
    }
    .pimg e {
      transition: transform 0.4s cubic-bezier(.4,0,.2,1);
    }
    .pbadges {
      position: absolute; top: 12px; left: 12px;
      display: flex; flex-direction: column; gap: 5px;
    }
    .bpill {
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 9px;
      font-family: 'poppins';
      font-weight: 600;
      letter-spacing: .7px;
      text-transform: uppercase;
    }
    .bhot  {background: var(--bg);border: 1px solid var(--red);color: var(--red22);}
    .bnew  {background: var(--bg);border: 1px solid var(--blue);color: var(--blue22);}
    .bsale {display: none;background: var(--bg);border: 1px solid var(--green);color: var(--green22);}

    .pwish-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--bg);
      border: 1px solid var(--border2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border 0.2s, background 0.2s;
      /*backdrop-filter: blur(4px);*/
    }
    .pwish-btn:hover, .pwish-btn.on {background: var(--surface-2);border-color: var(--red);}
    .pwish-btn svg { 
        width: 14px; height: 14px; fill: none; 
        stroke: var(--muted); stroke-width: 2; 
        transition: stroke 0.2s, fill 0.2s; 
    }
    .pwish-btn.on svg { stroke: var(--red); fill: var(--red); }

    .pactions {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 14px;
      /* background: linear-gradient(transparent, rgba(235,242,255,.97)); */
      opacity: 0;
      transform: translateY(8px);
      transition: transform 0.3s, opacity 0.3s;
      display: flex;
      gap: 8px;
    }
    .btn-ac {
      flex: 1;
      background: var(--blue11);
      border: 1px solid var(--blue);
      color: #fff;
      padding: 10px;
      border-radius: var(--radius);
      font-weight: 600;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background .15s;
    }
    .btn-ac:hover { background: var(--blue2); }
    .btn-ac svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; }
    .btn-qv {
      width: 38px;
      height: 38px;
      background: var(--bg);
      border-radius: var(--radius);
      border: 1px solid var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--black);
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .btn-qv:hover {border-color: var(--blue);color: var(--blue);}
    .btn-qv svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

    .is-scrolling .pcard:hover {
      box-shadow: none;
    }
    .is-scrolling .pcard:hover .pimg {
      transform: none;
    }
    .is-scrolling .pcard:hover .pactions {
      opacity: 0;
      transform: translateY(8px);
    }

    .pinfo {padding: 10px;flex: 1;display: flex;flex-direction: column;}
    .pcat  { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
    .pname {font-weight: 500;font-family: 'poppins';font-size: 14px;line-height: 1.4;margin-bottom: 8px;flex: 1;}
    .prating { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
    .pstars { color: #F59E0B; font-size: 11px; letter-spacing: 1px; }
    .prcnt  { font-size: 11px; color: var(--muted); }
    .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .pprice {font-family: 'Outfit', serif;font-size: 19px;font-weight: 500;color: var(--blue);}
    .pold   { font-size: 12px; color: var(--muted); text-decoration: line-through; }
    .pdisc  {font-size: 10px;font-weight: 700;color: var(--green22);border: 1px solid var(--green);font-family: 'poppins';letter-spacing: 1px;background: var(--bg);padding: 2px 7px;border-radius: 4px;margin-left: auto;}
    .pfship {
      font-size: 11px; color: var(--green);
      margin-top: 7px; display: flex; align-items: center; gap: 4px;
    }
    .pfship svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

    /* list-view overrides */
    .products-grid.lv .pcard    { flex-direction: row; }
    .products-grid.lv .pimg-wrap { width: 200px; aspect-ratio: auto; flex-shrink: 0; }
    .products-grid.lv .pactions  { position: static; opacity: 1; transform: none; background: none; padding: 0; margin-top: 14px; }
    .products-grid.lv .pinfo     { padding: 24px; }

    /* empty state */
    .empty {
      grid-column: 1/-1; text-align: center; padding: 80px 20px;
    }
    .empty-ico { font-size: 60px; margin-bottom: 18px; }
    .empty h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px; margin-bottom: 10px;
    }
    .empty p { color: var(--muted); }
    .btn-clear {
      color: var(--blue); background: none; border: none;
      cursor: pointer; font-size: 14px; text-decoration: underline;
    }

    .pLoadingTxt {
      background: rgba(255,255,255,0.5);
      border: 1px solid var(--border);
      /* color: var(--blue); */
      padding: 5px 15px;
      border-radius: 150px;
      /* box-shadow: 0px 0px 50px
      rgb(25 100 255 / 20%); */
    }
    .pLoading {
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      top: -65px;
    }

    @media (max-width: 615px) {
        .tb-left { justify-content: center }
    }