/* ===== Page basics ===== */
:root{
  --border:#e5e7eb;
  --radius-md:14px;
  --shadow-card:0 1px 8px rgba(0,0,0,.06);
  --ink:#111;
}
.page-wrap{max-width:1080px;margin:auto;padding:24px}
.breadcrumb{font-size:14px;color:#666;margin:8px 0 16px}
.breadcrumb a{color:inherit;text-decoration:none}
.page-title{font-size:clamp(22px,2.4vw,30px);margin:6px 0 10px}
.page-sub{color:#666;margin-bottom:14px}

/* ===== Category hub cards (products.html) ===== */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.cat-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden;display:block;text-decoration:none;color:inherit;border:1px solid var(--border)}
.cat-card figure{aspect-ratio:4/3;overflow:hidden;margin:0}
.cat-card img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card h3{font-size:18px;padding:10px 12px}

/* ===== Product list grid (category pages) ===== */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(min-width:640px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:900px){ .product-grid{grid-template-columns:repeat(4,1fr)} }

.product-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}

/* === Image frame: single source of truth === */
#productGrid .product-card .img-wrap{
  aspect-ratio:1/1;              /* สี่เหลี่ยมจัตุรัสคงที่ */
  position:relative;
  background:#fff;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:10px;                   /* กันชนรอบภาพ */
  box-sizing:border-box;
}
#productGrid .product-card .img-wrap>img{
  width:100%;height:100%;
  object-fit:cover;               /* ค่าเริ่มต้นครอปพอดีกรอบ */
  object-position:center;
  display:block;
}

/* แนวตั้งชัดเจนหรือกว้างจัด → แสดงเต็ม ไม่ครอป (JS จะเติม class) */
#productGrid .product-card.is-portrait .img-wrap>img,
#productGrid .product-card.is-wide .img-wrap>img{
  object-fit:contain !important;
}
#productGrid .product-card.is-portrait .img-wrap,
#productGrid .product-card.is-wide .img-wrap{
  padding:12px;
}

/* เคสเฉพาะหมวดกระเป๋าเดินทาง: บังคับไม่ครอปเสมอ */
html[data-category="travel-bags"] #productGrid .product-card .img-wrap{
  padding:14px;
}
html[data-category="travel-bags"] #productGrid .product-card .img-wrap>img{
  object-fit:contain !important;
  object-position:center !important;
}

/* ===== Meta ===== */
.product-meta{padding:12px}
.product-name{font-weight:500;color:var(--ink)}
#productGrid .product-card .name{min-height:2.2em;display:block}
#productGrid .product-card .price{min-height:1.2em;color:#6b7280;font-size:14px}

/* ===== Skeleton / loading ===== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.products-grid.loading{position:relative}
.products-grid.loading:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f2f2f2 0,#fafafa 50%,#f2f2f2 100%);
  background-size:200% 100%;animation:shimmer 1.2s linear infinite;opacity:.6
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(90deg,#eee,#f6f7f8,#eee);background-size:200% 100%;animation:skl 1.2s linear infinite;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.skel-card{height:170px}
.skel-prod{height:200px}
@keyframes skl{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Lightbox dialog (fallback) ===== */
dialog#lightbox{border:none;border-radius:12px;padding:0;max-width:min(96vw,1080px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.lightbox-head{display:flex;justify-content:flex-end;gap:8px;padding:8px}
.lightbox-head button{border:1px solid #ddd;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.lightbox-body img{display:block;max-width:100%;height:auto}
/* ====== FIX: Product Hub thumbnails ====== */
.akk-hub .akk-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.akk-hub .akk-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;
}
.akk-hub .akk-thumb{
  position:relative;aspect-ratio:4/3;overflow:hidden; /* กรอบคงที่ */
}
.akk-hub .akk-thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;                     /* เติมเต็มกรอบแบบไม่ยืดเพี้ยน */
}

/* กันกฎทั่วเว็บที่อาจมี img{height:100%} มากดทับ */
.akk-hub img{height:auto;}

  /* ----- HOTFIX: จำกัดขนาดรูปเฉพาะใน #akk-hub ----- */
  #akk-hub .akk-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
  }
  #akk-hub .akk-card{
    background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;
  }
  #akk-hub .akk-thumb,
  #akk-hub .img-wrap{                /* รองรับทั้งคลาส thumb หรือ img-wrap */
    position:relative;
    aspect-ratio:4/3;                /* กรอบคงที่ */
    overflow:hidden;
  }
  #akk-hub .akk-thumb img,
  #akk-hub .img-wrap img,
  #akk-hub img{
    position:absolute; inset:0;
    width:100%; height:100% !important;
    object-fit:cover;
    display:block;
    max-width:100%;
  }
  /* Product grid image frame — ใช้ทุกหมวด */
#productGrid .img-wrap{aspect-ratio:1/1;position:relative;overflow:hidden;border-radius:14px}
#productGrid .img-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Product grid image frame — ทุกหมวด */
html[data-category] #productGrid .img-wrap{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  border-radius:14px;
}
html[data-category] #productGrid .img-wrap > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover !important; /* กันกฎอื่นมาทับ */
}
/* ===== HARD OVERRIDE: บังคับเฟรมรูปในหน้าหมวด ===== */
html[data-category] #productGrid li.product-card > a.card > .img-wrap{
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  display: block;
}

html[data-category] #productGrid li.product-card > a.card > .img-wrap > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* Product list grid (all category pages) */
#productGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px,1fr));
  gap:16px;
}
/* ===== Products hub: spacing & breathing room ===== */
#akk-hub{
  --section-gap-sm: 28px;                /* ระยะหมวดบนมือถือ */
  --section-gap-lg: 48px;                /* ระยะหมวดบนเดสก์ท็อป */
  --card-gap: 20px;                       /* ช่องว่างระหว่างการ์ด */
}

/* ช่องไฟระหว่างหมวด */
#akk-hub .akk-cat{
  margin: var(--section-gap-sm) 0;
}
#akk-hub .akk-cat + .akk-cat{
  /* หมวดถัดไปเว้นเยอะขึ้นเล็กน้อย */
  margin-top: clamp(32px, 5vw, var(--section-gap-lg));
  padding-top: 6px;
  border-top: 1px solid #eef1f3;         /* เส้นคั่นบาง ๆ */
}

/* หัวหมวดให้หายชิด */
#akk-hub .akk-cat-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;                    /* เว้นหัวกับกริด */
}

/* กริดการ์ดเว้นห่างขึ้น */
#akk-hub .akk-grid{ gap: var(--card-gap); }

/* เดสก์ท็อป: เว้นมากขึ้นอีกหน่อย */
@media (min-width: 900px){
  #akk-hub .akk-grid{ gap: 22px; }
  #akk-hub .akk-cat{ margin: var(--section-gap-lg) 0; }
}

/* การ์ดไม่ให้รู้สึกแน่นเกินไป */
#akk-hub .akk-card{ border-radius: 14px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
#akk-hub .akk-thumb{ padding: 6px; box-sizing:border-box; }  /* กันภาพไม่ชนขอบ */
#akk-hub .akk-thumb > img{ border-radius: 10px; }
.product-imgWrap {
  aspect-ratio: 4 / 3;     /* กรอบสัดส่วนเดียวกันทุกใบ */
  overflow: hidden;
}

.product-imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ครอป ไม่ยืด */
  display: block;
}
/* กรอบรูปให้เท่ากัน แล้วให้รูปแนวตั้งอยู่ในกรอบ */
.product-imgWrap {
  position: relative;
  aspect-ratio: 4 / 3;    /* กรอบมาตรฐาน */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;           /* กันรูปชิดขอบ */
}

.product-imgWrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* สำคัญ: แนวตั้งจะไม่โดนตัด */
  display: block;
}

/* ตัวหนังสือให้เล็กลงและกลาง */
.product-body {
  text-align: center;
}

.product-title {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-top: 8px;
}

.product-desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 4px;
}

.product-price {
  font-size: 0.78rem;
  margin-top: 4px;
  font-weight: 500;
}
/* กรอบรูป: ทำให้เป็นทรงที่เหมาะกับรูปแนวตั้งมากขึ้น */
.product-imgWrap {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  /* เดิม 3/4 สูงไปหน่อย → เอา 4/5 จะเตี้ยลงนิดนึง */
  aspect-ratio: 4 / 5;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-imgWrap img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}