/* =========================
   Quickview
   ========================= */
.order-quickview{ position:fixed; inset:0; z-index:99999; }
.order-quickview__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.order-quickview__dialog{ position:relative; max-width:720px; margin:6vh auto; background:#fff; border-radius:12px; padding:20px; }
.order-quickview__close{ position:absolute; right:10px; top:8px; font-size:28px; background:transparent; border:0; cursor:pointer; }
.order-quickview__body img{ max-width:240px; width:100%; border-radius:10px; }
.order-quickview__grid{ display:grid; grid-template-columns:240px 1fr; gap:16px; }
@media (max-width:640px){ .order-quickview__grid{ grid-template-columns:1fr; } }
.order-quickview__price{ font-weight:700; margin:.25rem 0 1rem; }
.order-quickview__actions button{ padding:10px 14px; border-radius:10px; background:#111; color:#fff; border:0; cursor:pointer; }

/* =========================
   FiboSearch row + Add 버튼
   ========================= */
.dgwt-wcas-open .wcas-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; }
.dgwt-wcas-open .wcas-row > a.dgwt-wcas-suggestion{
  flex:1 1 auto; display:flex; align-items:center; gap:10px; text-decoration:none;
}
.dgwt-wcas-open .wcas-row .dgwt-wcas-si img{ width:42px; height:42px; object-fit:cover; border-radius:6px; }
.dgwt-wcas-open .wcas-row .dgwt-wcas-st-title{
  display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw;
}
.dgwt-wcas-open .wcas-add-wrap{ margin-left:auto; }
.wcas-add-btn{ border:1px solid #e5e7eb; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; }
.wcas-add-btn:hover{ border-color:#111; }

/* =========================
   사이드카트 수량 ± (콤팩트)
   ========================= */
.order-sidecart-qty-compact{ display:inline-flex; gap:6px; margin-left:8px; vertical-align:middle; }
.order-sidecart-qty-dec, .order-sidecart-qty-inc{
  width:24px; height:24px; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; line-height:1;
}

/* =========================
   Woo Products Grid (메인)
   #order-products 범위로 스코프 고정
   ========================= */

/* Woo 기본 before/after 제거 */
#order-products .products::before,
#order-products .products::after { content:none; display:none; }

/* 그리드 초기화 */
#order-products .products{
  display: grid;
  grid-auto-rows: auto;
  gap: 16px;
  margin: 0;
  padding: 0;
}

/* 카드 공통 */
#order-products .products li.product{
  float: none;
  width: auto;
  margin: 0;
  clear: none;
  list-style: none;
}

/* 카드 이미지 */
#order-products .products li.product a img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* 테마의 .columns-4 강제 폭 무력화 */
#order-products .products.columns-4 li.product,
#order-products .woocommerce.columns-4 .products li.product {
  width: auto !important;
}

/* 반응형 컬럼 수 (4/2/1) — !important로 확정 */
@media (min-width: 1025px){
  #order-products .products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px){
  #order-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/*
@media (max-width: 480px){
  #order-products .products { grid-template-columns: 1fr !important; }
}
*/

/* =========================
   페이지 전체 레이아웃 (.order-wrap)
   Desktop: sidebar | main | cart
   Mobile:  main → sidebar → cart
   ========================= */
.order-wrap{
  display:grid;
  grid-template-columns: 260px 1fr 320px;
  grid-template-areas: "sidebar main cart";
  gap: 24px;
  align-items: start;
}

.order-sidebar{ grid-area: sidebar; }
.order-main{ grid-area: main; min-width: 0; }  /* overflow 방지 */
.order-cart{ grid-area: cart; }

/* 모바일 재배치 (검색바는 .order-main 내부에서 자연스럽게 최상단) */
@media (max-width: 768px){
  .order-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar"
      "cart";
    gap: 16px;
  }
  .order-main .order-search{ margin-bottom: 10px; }
}

/* 검색바 컨테이너가 부모 폭을 꽉 채우도록 */
.order-main .order-search .dgwt-wcas-search-wrapp{ width: 100%; }


/* ===== 레이아웃 고정: .order-wrap를 화면 안(왼쪽 로고 영역)으로 강제 정렬 ===== */
html, body { overflow-x: hidden; } /* 우측으로 밀려난 요소로 인한 가로 스크롤 방지 */

.order-wrap{
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;      /* 필요 시 1100~1280 사이에서 조정 */
  margin: 0 auto;         /* 좌우 중앙 정렬 = 화면 안으로 귀속 */
  padding: 0 16px;        /* 좌우 여백 */
}

/* 그리드 칼럼이 폭을 넘기지 않도록 최소폭 제어 */
.order-sidebar, .order-main, .order-cart{ min-width: 0; }

/* 테마/페이지빌더의 남는 여백·사이드바 오프셋 제거 */
.order-wrap .container,
.order-wrap .site-content,
.order-wrap .content-area,
.order-wrap .entry-content{
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* 모바일일 때도 화면 안으로 정확히 정렬 */
@media (max-width: 768px){
  .order-wrap{ padding: 0 12px; }
}

/* 검색바가 부모 폭 100% 차도록 보강 (이미 있으나 한 번 더 안전장치) */
.order-main .order-search,
.order-main .order-search .dgwt-wcas-search-wrapp{ width: 100%; }

/* Woo 기본 columns 규칙이 폭을 강제하지 못하게 재확인 */
#order-products .products{ max-width: 100%; }
#order-products .products li.product{ width: auto !important; }