.product-grid .grid__item {
  padding-bottom: 1rem;
}

.product-grid.negative-margin {
  margin-bottom: -2rem;
}

@media screen and (min-width: 750px) {
  .product-grid .grid__item {
    padding-bottom: 3rem;
  }

  .product-grid.negative-margin {
    margin-bottom: -5rem;
  }

  .product-grid.negative-margin--small {
    margin-bottom: -1rem;
  }
}

/* =================================================═ */
/* SUÍLA 自訂：完美售完遮色片 ＋ 圖片內左上角 OUT OF STOCK  */
/* =================================================═ */

/* 1. 確保商品的圖片外框（card__inner）有定位基準，這樣遮色片和文字才不會亂跑 */
.product-grid .card__inner {
    position: relative !important;
}

/* 2. 在商品圖片上方，精準蓋上一層白霧感半透明遮色片（加強版） */
.card__inner .suila-sold-out-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.45) !important; /* 白色半透明，可微調 0.45 決定白霧濃度 */
    z-index: 2 !important; /* 確保在圖片上面，但低於文字 */
    pointer-events: none !important;
}


/* 3. 強制將 OUT OF STOCK 文字抓回圖片的左上角內部 */
.suila-sold-out-text {
    position: absolute !important;
    /* 相對於圖片主體定位 */
    top: 15px !important;       /* 距離圖片頂部 15 像素 */
    left: 15px !important;      /* 距離圖片左側 15 像素 */
    z-index: 4 !important;      /* 確保文字在遮色片最上方 */
    
    /* 橫向與區塊設定 */
    writing-mode: horizontal-tb !important;
    display: block !important;
    width: max-content !important;
    
    /* 字體視覺高級感調整 */
    color: #666666 !important;   /* 時髦深灰色字體 */
    font-size: 13px !important;   /* 字體大小 */
    font-weight: 500 !important;  /* 字體中等粗細 */
    letter-spacing: 1.5px !important; /* 高級感開闊字距 */
    line-height: 1 !important;
}

/* 4. 強制拔除系統原本可能殘留的舊緞帶外框與陰影 */
.card__badge-sold-out, .badge-ribbon, .badge--sold-out {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}