/* DR Shop Engine - 쇼핑몰(상품그리드) 스타일. 쇼핑몰 페이지([drshop_products]/[drshop_campaigns])와
   상품 상세 페이지(관련 상품 그리드가 이 파일의 카드 스타일을 재사용)에서만 로드. */

/* 테마 Additional CSS의 .st-page-body{max-width:820px}는 블로그 등 읽기용 텍스트 페이지 전용 폭 제한.
   쇼핑몰은 그리드 레이아웃이 필요해 이 제한이 있으면 카드가 불필요하게 좁아짐 -
   :has()로 상품그리드가 들어있는 경우에만 폭 제한을 풀어줌(다른 텍스트 페이지 폭은 그대로 유지). */
.st-page-body:has(.drshop-products-grid) { max-width: none; }

/* 진짜 원인: 테마 Additional CSS의 .st-home{max-width:1180px;margin:0 auto}가 <main>에 적용됨.
   .site-content가 flex-direction:column 컨테이너라 cross-axis(가로)의 margin:auto는 align-items:stretch를
   무시하고 콘텐츠 크기로 줄어든 뒤 가운데 정렬시켜버림 - 쇼핑 관련 페이지는 margin auto를 없애 전체 폭을 채움. */
.st-home:has(.drshop-products-grid) {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* 가장 바깥 GeneratePress 컨테이너(#page.grid-container)가 기본 1200px로 고정되어 있어,
   위 두 규칙으로 안쪽 폭을 풀어도 결국 1200px 안에 갇혀 있었음 - PC에서 쇼핑몰 화면이 좁고
   답답해 보인다는 피드백에 따라 쇼핑 관련 페이지는 바깥 컨테이너 자체를 더 넓게 확장. */
.grid-container:has(.drshop-products-grid) { max-width: 1600px; }

.drshop-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 24px 0;
}
@media (min-width: 1400px) {
    .drshop-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .drshop-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.drshop-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e0e4d5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(47, 74, 55, 0.06);
    transition: box-shadow .15s ease, transform .15s ease;
}
.drshop-product-card:hover { box-shadow: 0 10px 26px rgba(47, 74, 55, 0.12); transform: translateY(-2px); }
.drshop-product-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #f5f6f0;
}
.drshop-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.drshop-thumb-placeholder { display: block; width: 100%; height: 100%; background: #eef0e6; }
.drshop-badge-soldout, .drshop-badge-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
.drshop-badge-soldout { background: #8a8f7f; }
.drshop-badge-sale { background: #a1573a; }
.drshop-product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}
.drshop-product-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.95rem * 1.4 * 2);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.drshop-product-title a { color: #2f2d26; text-decoration: none; }
.drshop-product-price {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.drshop-product-discount { color: #a1573a; font-weight: 800; font-size: 1rem; }
.drshop-product-price-final { color: #2f2d26; font-weight: 800; font-size: 1.05rem; }
.drshop-product-price-original { color: #a3a794; font-weight: 400; font-size: 0.85rem; text-decoration: line-through; }
.drshop-product-actions { display: flex; gap: 8px; margin-top: 12px; }
.drshop-product-actions .drshop-add-to-cart,
.drshop-product-actions .drshop-buy-now { flex: 1; min-width: 0; padding: 10px 4px; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 페이지네이션 */
.drshop-pagination { display: flex; justify-content: center; gap: 6px; margin: 32px 0 12px; flex-wrap: wrap; }
.drshop-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e4d5;
    border-radius: 8px;
    background: #fff;
    color: #2f2d26;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.drshop-pagination a.page-numbers:hover { border-color: #2f4a37; color: #2f4a37; }
.drshop-pagination .page-numbers.current { background: #2f4a37; border-color: #2f4a37; color: #fff; }
.drshop-pagination .page-numbers.dots { border: none; background: none; }

/* 기획전/캠페인 배너 스트립 */
.drshop-campaign-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 20px 0 32px;
}
.drshop-campaign-card {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(47, 74, 55, 0.08);
    aspect-ratio: 4/3;
}
.drshop-campaign-card img { width: 100%; height: 100%; object-fit: cover; }
.drshop-campaign-badge {
    position: absolute; top: 10px; left: 10px;
    background: #a1573a; color: #fff; font-size: 0.72rem; font-weight: 800;
    padding: 4px 10px; border-radius: 20px;
}
.drshop-campaign-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff; font-weight: 700; font-size: 0.95rem;
}

/* 검색/카테고리 필터 (쇼핑몰 목록) */
.drshop-shop-filters { display: flex; gap: 12px; margin: 16px 0 24px; flex-wrap: wrap; }
.drshop-shop-filters input, .drshop-shop-filters select {
    padding: 10px 14px; border: 1px solid #e0e4d5; border-radius: 8px; font-size: 0.95rem;
}
.drshop-shop-filters input[type=text] { flex: 1; min-width: 200px; }
.drshop-shop-filters button {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #2f4a37; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; font-weight: 700;
}