/* =========================================================
   Gester (formerly OnPlay) CSS v3.0
   GESTA navy + gold court-jester theme
   Brand: #122140 (GESTA navy), #EAB308 (gold accent), White
   ========================================================= */

/* Google Fonts — Cinzel (display, regal jester feel),
   Inter (clean modern body, Latin), Sarabun (Thai body).
   display=swap so render isn't blocked while font downloads. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@400;500;600;700;800&family=Sarabun:wght@400;500;600;700&display=swap');

/* ---------- CSS Variables (Light) ---------- */
:root{
  /* brand — GESTA navy (shop-REQ-0049) */
  --onplay-primary: #122140;          /* GESTA navy */
  --onplay-primary-600: #0B1630;      /* darker hover/active */
  --onplay-primary-soft: #E8ECF4;     /* tint background */
  --onplay-primary-rgb: 18, 33, 64;  /* for rgba() */

  /* gold accent — premium / foil / featured / VIP */
  --gester-gold: #EAB308;             /* bright primary gold */
  --gester-gold-600: #CA8A04;         /* darker hover gold */
  --gester-gold-soft: #FEF3C7;        /* light tint */
  --gester-gold-rgb: 234, 179, 8;

  /* surface & text */
  --onplay-bg: #FFFFFF;
  --onplay-surface: #FFFFFF;
  --onplay-text: #0F172A;
  --onplay-muted: #6B7280;
  --onplay-border: #E5E7EB;

  /* status */
  --onplay-success: #22C55E;
  --onplay-warning: #F59E0B;
  --onplay-danger:  #EF4444;

  /* radii & shadows */
  --onplay-radius-12: 12px;
  --onplay-radius-16: 16px;
  --onplay-shadow-soft: 0 4px 16px rgba(15, 23, 42, .06);
  --bottom-bar: 0px;
  --topbar: 0px;
}

/* ---------- Dark Mode (opt-in: html[data-theme="dark"]) ---------- */
html[data-theme="dark"]{
  --onplay-bg: #0B1220;
  --onplay-surface: #0F172A;
  --onplay-text: #E5E7EB;
  --onplay-muted: #94A3B8;
  --onplay-border: #1F2937;
  --onplay-primary: #5FC9CB;          /* navy is unreadable on dark — GESTA teal, lightened */
  --onplay-primary-rgb: 95, 201, 203;
  --onplay-primary-soft: rgba(95, 201, 203, .15);
  --gester-gold-soft: rgba(234, 179, 8, .15);
  --onplay-shadow-soft: 0 4px 16px rgba(0,0,0,.25);
}

/* ---------- Base ---------- */
html, body{
  background: var(--onplay-bg);
  color: var(--onplay-text);
  /* Sarabun first for Thai text glyphs, Inter for Latin — both load
     from the Google Fonts @import at the top of this file. */
  font-family: 'Sarabun','Inter',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings — Cinzel gives the regal/jester court vibe.
   Apply selectively via .gester-display or to h1/h2 on hero areas. */
.gester-display,
.gester-brand-text{
  font-family: 'Cinzel','Sarabun',serif;
  font-weight: 700;
  letter-spacing: .02em;
}
a { color: var(--onplay-primary); text-decoration: none; }
a:hover { color: var(--onplay-primary-600); text-decoration: underline; }
a:focus { color: var(--onplay-primary-600); text-decoration: underline; }
.btn:focus { background-color: var(--onplay-primary-600);text-decoration: underline; }

/* Safe area (iOS) + space for bottom nav on mobile */
body{
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom));

}
@media (min-width:768px){
  body{ padding-bottom: 0; }
}

/* Mobile modal fix — the fixed bottom tabbar (.mobile-tabbar, ~56px
   tall + iOS safe-area inset) was clipping the footer of tall
   centered modals (e.g. the Add Address form on /account/my-profile/).
   The Save / Cancel buttons sat behind the tabbar with no way to
   scroll up to them.

   First attempt used padding-bottom on .modal — that only ADDED
   to the container size without shrinking the dialog's calc(100%).
   Switched to constraining the .modal container's `bottom` so the
   dialog's height calculation naturally accounts for the tabbar,
   and force modal-dialog-scrollable behaviour on every modal so
   tall forms scroll their body internally regardless of whether
   the template remembered to add the .modal-dialog-scrollable
   class. */
@media (max-width: 767.98px) {
  /* Brute-force scroll containment. Bootstrap's modal-dialog-scrollable
     class set the right rules but specificity on top of our other
     overrides + the form-wrapped header/body/footer structure on the
     Add Address modal meant the body wasn't getting the scrollbar.
     Set explicit max-heights with !important so any tall form
     (Address, Profile Edit, Refund, etc.) gets a guaranteed scroll
     area on mobile. */
  .modal {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  .modal-dialog {
    max-height: calc(100vh - 72px - env(safe-area-inset-bottom) - 20px) !important;
    height: auto !important;
    margin: 10px auto !important;
  }
  .modal-content {
    max-height: calc(100vh - 92px - env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Header + footer pin to top/bottom; body takes the slack and
     scrolls. flex-shrink:0 keeps them from collapsing under content. */
  .modal-header,
  .modal-footer {
    flex-shrink: 0 !important;
  }
  .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  /* Centered modals on mobile — anchor to top so tall forms can
     grow downward into the scroll area rather than pushing footer
     below the new bottom edge. */
  .modal-dialog-centered {
    align-items: flex-start !important;
  }
}

/* Focus states for accessibility */
:focus-visible{
  outline: 2px solid var(--onplay-primary);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.text-onplay    { color: var(--onplay-primary) !important; }
.bg-onplay-soft { background: var(--onplay-primary-soft) !important; }
.text-gold      { color: var(--gester-gold-600) !important; }
.bg-gold-soft   { background: var(--gester-gold-soft) !important; }
.muted          { color: var(--onplay-muted) !important; }
.border-default { border-color: var(--onplay-border) !important; }
.border-gold    { border-color: var(--gester-gold) !important; }
.rounded-12     { border-radius: var(--onplay-radius-12) !important; }
.rounded-16     { border-radius: var(--onplay-radius-16) !important; }
.shadow-soft    { box-shadow: var(--onplay-shadow-soft) !important; }

/* กันไม่ให้ content โดนทับ */
.div-content{
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom));
  padding-top: var(--topbar);
}

/* สไตล์แถบบน (ให้ดูเนียนเวลาลอย) */
.top-navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid #e5e7eb;
  z-index: 1045; /* มากกว่า content */
}

/* (ไม่บังคับ) ถ้าอยากมี spacer สำหรับ fallback */
#topbar-spacer{ height: var(--topbar); }

/* ถ้ามีแถบเมนูล่าง ให้ใส่คลาสนี้ใน navbar.html */
.mobile-tabbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  /* รองรับรอยบาก/ขอบโค้ง iPhone */
  padding-bottom: env(safe-area-inset-bottom);
  /* ตัวอย่างพื้นหลัง (ปรับตามธีม) */
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

/* กันเหนียว: ใส่ spacer จริง ๆ ไว้ท้ายหน้าด้วย (ดูข้อ 3) */
.bottom-safe {
  height: calc(var(--bottom-bar) + env(safe-area-inset-bottom));
}

/* ---------- Buttons ---------- */
/* make disabled buttons still visible, but not clickable.
   color must be forced too: btn-outline-secondary's text is the same
   gray as this background, which rendered the "สินค้าหมด" label
   invisible (gray-on-gray) on product cards. */
.btn:disabled{
  background-color: #6B7280 !important;
  color: #fff !important;
  border-color: #6B7280 !important;
}

.btn-onplay{
  background: var(--onplay-primary);
  color:#fff !important;
  border:none;
  border-radius: 8px;
  font-weight: 500;
  transition: all .2s ease;
}
.btn-onplay:hover{
  background: var(--onplay-primary-600);
  color:#fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--onplay-primary-rgb), .3);
}
.btn-onplay:active{ transform: translateY(0); box-shadow: none; }

/* Gold accent button — premium actions, foil/parallel highlights,
   featured promos. Use sparingly so the gold stays an attention-grab. */
.btn-gold{
  background: var(--gester-gold);
  color: #1F1300 !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all .2s ease;
}
.btn-gold:hover{
  background: var(--gester-gold-600);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--gester-gold-rgb), .35);
}
.btn-gold:active{ transform: translateY(0); box-shadow: none; }
.btn-outline-gold{
  background: transparent;
  color: var(--gester-gold-600) !important;
  border: 1px solid var(--gester-gold);
  border-radius: 8px;
  font-weight: 500;
  transition: all .2s ease;
}
.btn-outline-gold:hover{
  background: var(--gester-gold-soft);
  color: var(--gester-gold-600) !important;
}

/* Pre-Order button — amber/orange to distinguish from Add to Cart */
.btn-preorder{
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff !important; border: none; border-radius: 8px; font-weight: 500;
  transition: all .2s ease;
}
.btn-preorder:hover{
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff !important; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,.35);
}
.btn-preorder:active{ transform: translateY(0); box-shadow: none; }

.btn-onplay.is-loading{
  pointer-events: none;
  opacity: .75;
}
.btn-outline-onplay{
  background: transparent;
  color: var(--onplay-primary) !important;
  border:1px solid var(--onplay-primary);
}
.btn-outline-onplay:hover{
  background: var(--onplay-primary-soft);
  color: var(--onplay-primary-600) !important;
}

/* ---------- Top Navbar (Desktop) ---------- */
.onplay-topbar{
  background: var(--onplay-surface);
  box-shadow: var(--onplay-shadow-soft);
  /* Subtle gold bottom border — reads as the regal trim under the
     dark purple brand. Tiny detail but immediately reads as Gester. */
  border-bottom: 2px solid var(--gester-gold);
}
.onplay-topbar .nav-link{
  color: var(--onplay-text) !important;
  font-weight: 500;
  transition: color .15s ease;
}
.onplay-topbar .nav-link:hover,
.onplay-topbar .nav-link.active{
  color: var(--onplay-primary) !important;
}
.onplay-topbar .nav-link.active{
  font-weight: 600;
}
.onplay-brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.onplay-brand img.img-brand{ height: 50px; }
.onplay-brand span{
  color: var(--onplay-primary);
  font-weight: 700;
  font-family: 'Cinzel','Sarabun',serif;
  letter-spacing: .03em;
}

/* ---------- Bottom Navigation (Mobile) ---------- */
.onplay-bottom-nav{
  position: fixed; bottom:0; left:0; right:0; z-index:1030;
  background: var(--onplay-surface);
  border-top:1px solid var(--onplay-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.onplay-bottom-nav .bn-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.5rem 0; font-size:.8rem; text-decoration:none;
  color: var(--onplay-primary);
  flex:1;
}
.onplay-bottom-nav .bn-item i{ font-size:1.2rem; line-height:1; }
.onplay-bottom-nav .bn-item.active{
  color: var(--onplay-primary-600);
  font-weight:600;
}

/* ---------- Sections / Bars ---------- */
.section-bar{
  padding: .75rem 1rem;
  background: var(--onplay-surface);
  border-bottom: 1px solid var(--onplay-border);
}
.section-title{ margin:0; font-weight:700; }

/* ทำการ์ดเป็นคอลัมน์ และดัน footer ไปชิดล่าง */
@media (max-width: 767.98px){
  .card.onplay-card .card-title{
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* min-height: calc(1.25em * 3); */
  }
}


.card.onplay-card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--onplay-border);
  border-radius: var(--onplay-radius-12);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.onplay-card:hover{
  transform: translateY(-4px);
  /* Gester purple-tinted shadow on hover — subtle but consistent
     with the brand presence on every interactive surface. */
  box-shadow: 0 12px 32px rgba(var(--onplay-primary-rgb), .18);
  border-color: var(--onplay-primary);
}
.card.onplay-card .card-body{
  display: flex;
  flex-direction: column;
  padding: .75rem .625rem .5rem;
}
.card.onplay-card .card-footer{
  margin-top: auto;
  background: var(--onplay-surface);
  border-top: 1px solid var(--onplay-border);
  padding: .5rem .625rem;
}

/* ตัดชื่อสินค้าให้สูงเท่ากัน (2 บรรทัด) */
.card.onplay-card .card-title{
  font-size: .95rem;
  /* line-height: 1.25; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;           /* ตัดที่ 2 บรรทัด */
  line-clamp: 2;                   /* Standard property for compatibility */
  overflow: hidden;
 /* min-height: calc(1.25em * 2);     กันดีดกรณีมีบรรทัดเดียว */
}

/* เผื่อมีแถว meta ใต้ราคาให้สูงเท่ากันทุกใบ */
.card.onplay-card .meta{
  min-height: 1rem;                /* ปรับตามดีไซน์คุณ */
}

/* ทำให้รูปสูงเท่ากันทุกการ์ด (ออปชัน แต่ช่วยให้งานเนี้ยบ) */
.card.onplay-card .card-img-top{
  aspect-ratio: 1 / 1;             /* สี่เหลี่ยมจัตุรัส */
  object-fit: cover;
}

/* Badges on image corners */
.badge-top-left{
  position:absolute; top:.5rem; left:.5rem;
}
.badge-top-right{
  position:absolute; top:.5rem; right:.5rem;
}

/* ---------- Filter Chips ---------- */
.chip{
  /* display:inline-flex; align-items:center; gap:.25rem;
  padding:.375rem .625rem;
  border:1px solid var(--onplay-border);
  border-radius: 999px;
  cursor:pointer; user-select:none;
  font-size:.9rem; background: var(--onplay-surface); color: var(--onplay-text);
  transition: background .12s ease, border-color .12s ease, color .12s ease; */

  display:inline-flex; 
  align-items:center; 
  gap:.35rem; 
  padding:.2rem .6rem; 
  background:#f4fbfe; 
  border:1px solid var(--onplay-border); 
  border-radius:999px; 
  font-size:.8rem;
}
.chip:hover{ border-color: var(--onplay-primary); }
.chip:focus-within{ outline: 2px solid var(--onplay-primary); outline-offset: 2px; }
.chip input{ display:none; } /* we rely on :checked via server-state */
.chip-active{
  border-color: var(--onplay-primary);
  background: var(--onplay-primary-soft);
  color: var(--onplay-text);
}

/* ---------- Timeline (Orders) ---------- */
.timeline{ position:relative; margin-left: .75rem; }
.timeline:before{
  content:""; position:absolute; left:7px; top:0; bottom:0; width:2px; background: var(--onplay-border);
}
.timeline-item{ position:relative; display:flex; gap:.75rem; margin:.5rem 0 .75rem 0; }
.timeline-item .dot{
  width:14px; height:14px; background: var(--onplay-surface);
  border:2px solid var(--onplay-border);
  border-radius:50%; position:relative; z-index:1; margin-top:.2rem;
}
.timeline-item.done .dot{
  background: var(--onplay-primary);
  border-color: var(--onplay-primary);
}
.timeline-item .content{ margin-left:.25rem; }

/* ---------- Carousel tweaks ---------- */
.carousel-indicators [data-bs-target]{ background-color: var(--onplay-primary); }
.carousel-control-next-icon,
.carousel-control-prev-icon{ filter: invert(1) grayscale(100%); }

/* ---------- Offcanvas (Filter Sheet) ---------- */
.offcanvas.offcanvas-bottom{
  border-top-left-radius: var(--onplay-radius-16);
  border-top-right-radius: var(--onplay-radius-16);
  background: var(--onplay-surface);
}
.offcanvas .offcanvas-header{ border-bottom:1px solid var(--onplay-border); }

/* ---------- Forms / Search ---------- */
.form-control::placeholder{ color: var(--onplay-muted); }
.form-control:focus{
  border-color: var(--onplay-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--onplay-primary-rgb), .15);
}
.input-search{
  min-width: 260px;
}

/* ---------- Footer ---------- */
.site-footer{
  /* Gold top border — regal trim at the foot of every page. */
  border-top: 2px solid var(--gester-gold);
  background: linear-gradient(180deg, #F4F6FA 0%, #E8ECF4 100%);
  margin-top: 2rem;
}

/* ---------- Helpers for images ---------- */
.img-brand { height:40px; }

/* ---------- Small animations ---------- */
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive refinements ---------- */
@media (min-width:992px){
  .input-search{ min-width: 360px; }
}

/* ═══════ HERO CAROUSEL (LastStand-style) ═══════ */
.hero-section{ padding: .5rem 0 0; }
.hero-inner{
  border-radius: 1rem; overflow: hidden;
  background: linear-gradient(135deg, var(--onplay-primary-soft), #f0f9ff);
  border: 1px solid var(--onplay-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.hero-img{
  width: 100%; height: 46vw;
  object-fit: contain; object-position: center;
}
@media(min-width:640px){ .hero-img{ height: 380px; } }
@media(min-width:1024px){ .hero-img{ height: 460px; } }
@media(min-width:1280px){ .hero-img{ height: 520px; } }
.hero-indicators{ margin-bottom: .75rem; }
.hero-indicators button{
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: transparent; opacity: .7;
  transition: all .3s ease;
}
.hero-indicators button.active{
  background: var(--onplay-primary);
  border-color: var(--onplay-primary);
  opacity: 1; width: 28px; border-radius: 5px;
}
.carousel-control-prev, .carousel-control-next{
  width: 44px; height: 44px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border-radius: 50%;
  border: 1px solid var(--onplay-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; transition: opacity .3s ease, transform .2s ease;
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next{ opacity: 1; }
.carousel-control-prev:hover, .carousel-control-next:hover{ transform: translateY(-50%) scale(1.05); }
.carousel-control-prev:active, .carousel-control-next:active{ transform: translateY(-50%) scale(.95); }
.carousel-control-prev{ left: 10px; }
.carousel-control-next{ right: 10px; }
.carousel-control-prev-icon, .carousel-control-next-icon{
  width: 16px; height: 16px;
  filter: invert(0) !important;
}

/* ═══════ Section Headers ═══════ */
.section-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .5rem;
  /* Gester gradient underline — purple to gold reads as regal trim
     instead of a flat divider line. */
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, var(--onplay-primary) 0%, var(--gester-gold) 100%) 1;
}
.section-heading{
  margin: 0; font-weight: 700; font-size: 1.15rem;
  color: var(--onplay-text);
  /* Subtle Cinzel letter-spacing for the regal feel — body font
     stays for readability, just adds character. */
  letter-spacing: .01em;
}
.section-link{
  font-size: .85rem; font-weight: 600; color: var(--onplay-primary);
  text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
.section-link:hover{ color: var(--onplay-primary-600); text-decoration: none; }

/* ═══════ Category Tiles v2 ═══════ */
.cat-tile-v2{
  position: relative; overflow: hidden;
  border-radius: var(--onplay-radius-12);
  border: 1px solid var(--onplay-border);
  background: var(--onplay-surface);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-tile-v2:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: var(--onplay-primary);
}
.cat-tile-img{
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.cat-tile-v2:hover .cat-tile-img{ transform: scale(1.05); }
.cat-tile-placeholder{
  width: 100%; aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  background: var(--onplay-primary-soft);
}
.cat-tile-label{
  padding: .5rem .625rem;
  font-size: .8rem; font-weight: 600;
  color: var(--onplay-text);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════ Empty State ═══════ */
.empty-state{
  padding: 3rem 1.5rem; text-align: center;
  border: 2px dashed var(--onplay-border);
  border-radius: var(--onplay-radius-16);
  background: #fafcfe;
}

/* Legacy cat-tile compat */
.cat-tile{ aspect-ratio: 2 / 1; background: var(--onplay-surface); }
.cat-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
}
.cat-label{
  position:absolute; left:12px; bottom:10px;
  color:#fff; font-weight:700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cat-fallback{ width:100%; height:100%; min-height:110px; }

/* Quantity input ใน cart */
.input-group .form-control.js-item-qty{ padding-left: .25rem; padding-right: .25rem; }

/* คอนเทนเนอร์: ให้ตัดขึ้นบรรทัดใหม่ */
.onplay-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;     /* row-gap col-gap */
}

/* ปรับการ์ดให้ยืดหยุ่นและตัดบรรทัดได้ */
.cat-card{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  /* background: #fff; */
  border: 1px solid var(--onplay-border);
  border-radius: 12px;
  padding: .5rem .6rem;
  min-width: 110px;           /* ไม่แคบเกินไป */
  max-width: 140px;           /* กันยาวเกิน */
  box-shadow: var(--onplay-shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cat-chip{ /* ปุ่ม All ให้สูงใกล้เคียงการ์ด */
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--onplay-border);
   text-decoration: none; color: inherit;
  height: 56px; min-width: 80px;
}

.cat-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cat-card.active, .cat-chip.active{ border-color: var(--onplay-primary); box-shadow: 0 0 0 2px rgba(var(--onplay-primary-rgb), .15) inset; }

.cat-thumb{ width:90px;  border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cat-thumb img{ width:100%; height:100%; object-fit:cover; }
.cat-name{ font-size:.85rem; text-align:center; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }

/* บนจอแคบ ลด min-width เพื่อให้ wrap ง่ายขึ้น */
@media (max-width: 576px){
  .cat-card{ min-width: 88px; }
}

/* เฉพาะ Section ที่เป็นกริดสินค้า ให้เผื่อเพิ่มอีกนิดเพื่อไม่ให้ปุ่ม/เงาการ์ดชนขอบ */
.section-new-arrivals {
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom) + 16px);
}

/* ถ้ากริดมี container ที่เคยตั้ง overflow ไว้ ให้เปิดเป็น visible */
.section-new-arrivals,
.section-new-arrivals .container,
.section-new-arrivals .row {
  overflow: visible !important;
}

.img-payment-logo{ max-width: 150px;height:auto; margin-left:2px; }

.coin{
  max-width: 25px;
  margin-top: -2px;
}

.product-title{
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--onplay-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------- Product Card v2 ---------- */
.card-img-wrapper{ overflow: hidden; }
.card-img-wrapper .card-img-top{
  transition: transform .4s ease;
}
.card.onplay-card:hover .card-img-wrapper .card-img-top{
  transform: scale(1.06);
}
.product-price{
  font-size: 1.1rem; font-weight: 700;
  color: var(--onplay-primary);
}
.product-date{
  font-size: .65rem; color: var(--onplay-muted);
  white-space: nowrap;
}
.meta-badge{
  display: inline-block;
  font-size: .65rem; font-weight: 500;
  padding: .15rem .45rem;
  border-radius: 6px;
  background: #f1f5f9; color: #64748b;
  border: 1px solid #e2e8f0;
}
.meta-badge-lang{
  background: #dcfce7; color: #166534; border-color: #bbf7d0;
}

/* ═══════ Gester accent surfaces ═══════
   Brand-color presence beyond just primary buttons. Each entry
   below was a neutral / Bootstrap-default surface before; nudged
   to purple/gold so the Gester palette feels woven through the
   whole interface, not stamped only on CTAs. */

/* Stock countdown pill ("เหลือ 3") — was red, now amber/gold to
   feel "premium-low-supply" not "danger alert". Red was reading
   as a warning when the intent is "act now before it sells out". */
.stock-pill, .badge-stock, [class*="stock-warn"]{
  background: var(--gester-gold-soft) !important;
  color: var(--gester-gold-600) !important;
  border: 1px solid var(--gester-gold) !important;
}

/* "Cheapest" badge on the PDP Listings table — keep green for the
   semantic "good price" cue but add a gold gleam border for the
   visual link to the brand. */
.badge-cheapest{
  background: linear-gradient(135deg, var(--onplay-success) 0%, #16a34a 100%);
  color: #fff;
  border: 1px solid var(--gester-gold);
}

/* Foil / parallel / special card markers — pure gold accent.
   Use this for any "this is a rare/special version" surface. */
.badge-foil, .badge-parallel, .badge-premium{
  background: linear-gradient(135deg, var(--gester-gold) 0%, var(--gester-gold-600) 100%);
  color: #1F1300;
  font-weight: 700;
  border: none;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(var(--gester-gold-rgb), .3);
}

/* ---------- Nav Pills (Login/Auth) ---------- */
.nav-pills .nav-link{
  border-radius: 10px;
  color: var(--onplay-muted);
  transition: all .2s ease;
}
.nav-pills .nav-link.active{
  background: var(--onplay-primary);
  color: #fff;
}
.nav-pills .nav-link:not(.active):hover{
  background: var(--onplay-primary-soft);
  color: var(--onplay-primary);
}

/* ---------- Form Controls (Modern) ---------- */
.form-control-lg{
  border-radius: 10px;
  padding: .75rem 1rem;
  border: 1.5px solid var(--onplay-border);
}
.form-control-lg:focus{
  border-color: var(--onplay-primary);
  box-shadow: 0 0 0 3px rgba(var(--onplay-primary-rgb), .12);
}

/* ---------- Alert Styles ---------- */
.alert{
  border-radius: 10px;
  border: none;
}

/* ---------- Modal Modern ---------- */
.modal-content.rounded-16{ border-radius: 16px; overflow: hidden; }

/* ═══════ Profile Page ═══════ */
.profile-card{
  background: #fff; border: 1px solid var(--onplay-border);
  border-radius: var(--onplay-radius-16); overflow: hidden;
}
.profile-header-bg{
  height: 70px;
  /* Royal gradient — deep purple to even-deeper, with a subtle gold-tinted
     edge for the jester court vibe. */
  background: linear-gradient(135deg, var(--onplay-primary) 0%, #0B1630 100%);
}
@media(min-width:768px){ .profile-header-bg{ height: 90px; } }
.profile-header-content{
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 1.25rem 1.25rem;
  margin-top: -28px; position: relative;
  color: var(--onplay-text);
}
.profile-avatar{
  width: 72px; height: 72px; border-radius: 14px;
  object-fit: cover; border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.info-card{
  background: #fff; border: 1px solid var(--onplay-border);
  border-radius: var(--onplay-radius-16); padding: 1.25rem;
}
.info-card-title{
  font-weight: 700; font-size: .95rem; margin-bottom: .75rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--onplay-primary-soft);
}
.info-grid{ display: flex; flex-direction: column; gap: .75rem; }
.info-item{ display: flex; justify-content: space-between; align-items: center; }
.info-label{ font-size: .8rem; color: var(--onplay-muted); }
.info-value{ font-weight: 600; font-size: .9rem; }
.stat-box{
  background: #f8fafc; border-radius: 10px; padding: .75rem;
  text-align: center;
}
.stat-label{ font-size: .75rem; color: var(--onplay-muted); margin-bottom: .25rem; }
.address-card{
  border: 1px solid var(--onplay-border); border-radius: 12px;
  padding: .875rem; transition: border-color .15s ease;
}
.address-card:hover{ border-color: var(--onplay-primary); }
.address-default{ border-color: var(--onplay-primary); background: #f0f9ff; }

/* ═══════ Product Detail Page ═══════ */
.pdp-image-wrap{
  position: relative; overflow: hidden;
  border-radius: var(--onplay-radius-16);
  border: 1px solid var(--onplay-border);
  background: #fff;
}
.pdp-img{
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  border-radius: var(--onplay-radius-16);
  transition: transform .4s ease;
  cursor: zoom-in;
}
.pdp-image-wrap:hover .pdp-img{ transform: scale(1.03); }
.pdp-info{ position: sticky; top: 80px; }
@media(max-width:767.98px){ .pdp-info{ position: static; } }
.pdp-title{ font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin: 0; }
@media(max-width:767.98px){ .pdp-title{ font-size: 1.15rem; } }
.pdp-price{ font-size: 1.75rem; font-weight: 800; }
@media(max-width:767.98px){ .pdp-price{ font-size: 1.4rem; } }
.pdp-price-box{
  background: #f8fafc; border: 1px solid var(--onplay-border);
  border-radius: var(--onplay-radius-12); padding: 1rem;
}
.accordion-item{ border-color: var(--onplay-border) !important; }
.accordion-button{ font-weight: 600; font-size: .9rem; }
.accordion-button:not(.collapsed){ background: var(--onplay-primary-soft); color: var(--onplay-text); }
.accordion-button:focus{ box-shadow: none; border-color: var(--onplay-primary); }

/* ═══════ Product Gallery ═══════ */
.pdp-gallery{
  display: flex; gap: .5rem; overflow-x: auto;
  padding: .25rem 0; scrollbar-width: thin;
}
.pdp-gallery::-webkit-scrollbar{ height: 4px; }
.pdp-gallery::-webkit-scrollbar-thumb{ background: var(--onplay-border); border-radius: 4px; }
.pdp-thumb{
  flex-shrink: 0; width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.pdp-thumb:hover{ transform: scale(1.05); }
.pdp-thumb.active{ border-color: var(--onplay-primary); }
.pdp-thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* ═══════ Product Video Embed ═══════ */
.pdp-video-container{
  position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--onplay-radius-12); overflow: hidden;
  background: #000;
}
.pdp-video-container iframe{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}

/* ═══════ Modal Modern ═══════ */
.modal-content{ border: none; border-radius: var(--onplay-radius-16) !important; }
.modal-header{ border-bottom: 1px solid var(--onplay-border); }
.modal-footer{ border-top: 1px solid var(--onplay-border); }

/* ---------- Order Page ---------- */
.rounded-16{border-radius:16px}
.shadow-soft{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;background:#f6fafd;border:1px solid var(--onplay-border,#e5e7eb);border-radius:999px;font-size:.8rem}

.thumbs{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.thumb{width:60px;border-radius:10px;overflow:hidden;background:#f6fafd;border:1px solid var(--onplay-border,#e5e7eb);display:flex;align-items:center;justify-content:center;font-size:.8rem}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.more{background:var(--onplay-primary-soft);color:var(--onplay-primary);font-weight:600}

@media(max-width:767.98px){
  .order-desktop{display:none}
  .order-mobile{display:block}
}
@media(min-width:768px){
  .order-desktop{display:block}
  .order-mobile{display:none}
}

/* ---------- Utility ---------- */
.rounded-8{border-radius:8px}

/* ---------- Order Detail ---------- */
.rounded-12{border-radius:12px}
.label{font-size:.8rem;color:#6b7280}
.value{font-weight:600}
.img-order{max-width:80px;max-height:80px;border-radius:10px;border:1px solid var(--onplay-border,#e5e7eb);object-fit:cover}
.img-payment-cc{height:28px;border-radius:6px}
.pr-avatar{width:42px;height:42px;object-fit:cover;border-radius:999px}
.comment-dispn{font-weight:600}
.comment-dt{font-size:.8rem;color:#6b7280}
.preorder-tag{display:inline-block;font-size:.72rem;background:#fff3cd;color:#7a5e00;border:1px solid #ffe69c;border-radius:999px;padding:.05rem .45rem;margin-left:.35rem}
.p-lang{font-size:.8rem;color:#6b7280;margin-right:.25rem}
.od-header-actions{display:flex;align-items:flex-end;gap:.5rem;flex-direction:column}
@media(min-width:768px){.od-header-actions{align-items:flex-end}}