:root {
    --color-primary:     #AF694F;
    --color-dark-1:      #1d1d1d;
    --color-dark-2:      #4a4a4a;
    --color-mid-1:       #888888;
    --color-light-3:     #e0e0e0;
    --color-brand-red:   #e53935;
    --color-brand-red-3: #fdecea;
    --color-brand-red-4: #b71c1c;
  }

  /* ── Swiper nav: slide in from sides on card hover ── */
  .product-card-image .swiper-button-prev,
  .product-card-image .swiper-button-next {
    width: auto !important; height: auto !important;
    background: #fff; padding: 8px;
    top: 50%; transform: translateY(-50%);
    border: 1px solid transparent;
    transition: border-color 0.15s, translate 0.15s;
    margin-top: 0;
  }
  .product-card-image .swiper-button-prev { left: 0; translate: -100% 0; }
  .product-card-image .swiper-button-next { right: 0; translate: 100% 0; }
  .product-card-image .swiper-button-prev::after,
  .product-card-image .swiper-button-next::after { display: none; }
  .product-card-image:hover .swiper-button-prev,
  .product-card-image:hover .swiper-button-next { translate: 0 0; }
  .product-card-image .swiper-button-prev:hover,
  .product-card-image .swiper-button-next:hover { border-color: var(--color-primary); }

  /* ── Swiper pagination ── */
  .product-card-image .swiper-pagination { bottom: 6px !important; }
  .product-card-image .swiper-pagination-bullet { background: #fff; opacity: 1; width: 6px; height: 6px; }
  .product-card-image .swiper-pagination-bullet-active { background: var(--color-primary); }
  .product-card-image .swiper-pagination { opacity: 0; transition: opacity 0.15s; }
  .product-card-image:hover .swiper-pagination { opacity: 1; }

  /* ── Cart button: hidden above, slides down on hover ── */
  .btn-cart-slide {
    margin-top: calc(-100% - 6px);
    transition: margin-top 0.15s ease;
    z-index: -1;
  }
  .product-card-image:hover .btn-cart-slide { margin-top: 0; z-index: 1; }
  @media (pointer: coarse) { .btn-cart-slide { margin-top: 0; z-index: 1; } }

  /* ── Color swatch: outline when radio is checked ── */
  .color-swatch-wrap:has(input:checked) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 9999px;
  }
  /* ── Color label: fade in when checked ── */
  .color-label-text { opacity: 0; transition: opacity 0.5s; }
  .color-item:has(input:checked) .color-label-text { opacity: 1; }

  /* ── Hidden color swipers ── */
  .productCardSwiper[hidden] { display: none !important; }

  /* ── Product image area height ── */
  .product-img-area { height: 235px; }
  @media (min-width: 1024px) { 
    .product-img-area { 
      /* height: 380px;  */
      height: 480px;
    } }

  /* ── Swiper fills image area ── */
  .product-img-area .swiper,
  .product-img-area .swiper-wrapper,
  .product-img-area .swiper-slide { height: 100%; width: 100%; }
  .product-img-area .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ── Size pill toggle ── */
  .size-pill {
    border: 1px solid #e0e0e0;
    color: #4a4a4a; font-size: 12px;
    padding: 4px 10px; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none; display: inline-block;
  }
  .size-pill-label input:checked ~ .size-pill {
    border-color: #1d1d1d; background: #1d1d1d; color: #fff;
  }

  /* ── Color filter swatches (sidebar) ── */
  .color-filter-dot {
    display: inline-block; width: 22px; height: 22px;
    border-radius: 9999px; border: 2px solid transparent;
    cursor: pointer; outline: 2px solid transparent; outline-offset: 2px;
    transition: outline 0.12s;
  }
  .color-filter-label input:checked ~ .color-filter-dot { outline-color: #AF694F; }
  .color-filter-dot:hover { outline-color: #bbb; }

  /* ── Dual price range slider ── */
  .price-slider-wrap { position: relative; height: 20px; }
  .price-slider-track {
    position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 1px; background: #c0c0c0;
  }
  .price-slider-fill {
    position: absolute; top: 0; height: 1px; background: #1d1d1d;
  }
  .price-range-input {
    -webkit-appearance: none; appearance: none;
    position: absolute; left: 0; width: 100%;
    top: 50%; transform: translateY(-50%);
    height: 1px; background: transparent;
    pointer-events: none; margin: 0; padding: 0;
  }
  .price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 11px; height: 11px; border-radius: 50%;
    background: #1d1d1d; border: none; box-shadow: none;
    cursor: pointer; pointer-events: all;
  }
  .price-range-input::-moz-range-thumb {
    width: 11px; height: 11px; border-radius: 50%;
    background: #1d1d1d; border: none; box-shadow: none;
    cursor: pointer; pointer-events: all;
  }

  /* Details +/- icon toggle  */
  details .icon-plus  { display: flex; }
  details .icon-minus { display: none; }
  details[open] .icon-plus  { display: none; }
  details[open] .icon-minus { display: flex; }

 /* Primary button  */
  .btn-primary {
    color: #000000;
    padding: 12px 24px; font-size: 13px; font-weight: 500;
    border: 2px solid var(--color-primary); cursor: pointer; display: block;
    width: 100%; text-align: center; transition: background 0.15s;
  }
  .btn-primary:hover { border: 2px solid #d77f5e; }

 /* Offcanvas dialog  */
  dialog.offcanvas {
    position: fixed; inset: 0; margin: 0;
    width: 100%; max-width: 360px;
    height: 100dvh; max-height: 100dvh;
    border: none; padding: 0; overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  dialog.offcanvas::backdrop { background: rgba(0,0,0,.4); }
  dialog:not([open]) { display: none; }

 /* Pagination active  */
  .page-btn-active {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
  }