/* 모바일에서 버튼 터치 반응 속도 올리기 */
button, a, input[type="submit"] {
    touch-action: manipulation;
}
/* 모바일에서 결제 관련 버튼 크게 만들기 */
@media screen and (max-width: 768px) {
    .woocommerce-checkout #place_order, 
    .single_add_to_cart_button,
    .wp-block-button__link {
        padding: 15px 20px !important; /* 버튼 위아래 여백 늘림 */
        font-size: 18px !important;    /* 글자 크기 키움 */
        width: 100% !important;        /* 화면에 꽉 차게 */
        border-radius: 8px !important; /* 모서리를 둥글게 */
    }
}
/* 클릭 시 생기는 회색 배경 제거 */
canvas, img, video, a, input, button, textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* 페이지 스크롤 부드럽게 */
html {
    scroll-behavior: smooth;
}
/* 이미지 선택 및 드래그 방지 */
img {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* 아이폰 입력창 포커스 시 확대 방지 */
@media screen and (max-width: 768px) {
    input[type="text"], input[type="number"], input[type="email"], textarea {
        font-size: 16px !important;
    }
}
/* 모든 클릭 가능한 요소에 대해 지연 시간 제거 및 터치 최적화 */
a, button, input, select, textarea, .button, .btn {
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
    cursor: pointer !important;
}

/* 텍스트 선택 방지로 인한 클릭 방해 제거 */
* {
    -webkit-tap-highlight-color: transparent !important;
}
/* 창이 넓어질 때 상품 레이아웃 깨짐 방지 */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

.woocommerce ul.products li.product {
    width: 22% !important; /* 창이 넓을 때 한 줄에 4개씩 고정 (원하는 개수에 따라 조정) */
    margin-right: 3% !important;
    min-width: 250px !important; /* 상품이 너무 작아지지 않게 최소 너비 설정 */
    float: none !important;
}

/* 상품 제목이 세로로 깨지는 현상 방지 */
.woocommerce ul.products li.product h2, 
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    word-break: keep-all !important;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 제목이 길면 2줄까지만 표시 */
    -webkit-box-orient: vertical;
}

/* 마지막 상품 마진 제거 */
.woocommerce ul.products li.product:nth-child(4n) {
    margin-right: 0 !important;
}