/* iOS-style glass layer (22 Oct 2026): loaded after shop.css / admin.css, keeps the brand tokens and Thai fonts.
   Translucent warm surfaces + backdrop blur over a soft silk-toned background; bottom tab bar on phones/tablets. */
:root {
  --glass: rgba(255, 253, 248, .62);
  --glass-strong: rgba(255, 253, 248, .84);
  --glass-dark: rgba(36, 24, 17, .62);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-line: rgba(122, 106, 92, .16);
  --blur: saturate(180%) blur(18px);
  --gr: 22px;
  --glass-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 8px 28px rgba(60, 36, 18, .08), 0 1px 3px rgba(60, 36, 18, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tabbar: 64px;
}

/* background: cream with blurred silk colours (fixed layer, works on iOS where background-attachment: fixed does not) */
body { background: var(--cream); }
body::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(176, 138, 62, .22), transparent 70%),
    radial-gradient(34% 30% at 92% 18%, rgba(156, 61, 95, .14), transparent 70%),
    radial-gradient(40% 36% at 78% 92%, rgba(91, 50, 25, .12), transparent 70%),
    radial-gradient(36% 30% at 8% 78%, rgba(233, 217, 180, .55), transparent 70%),
    var(--cream);
}
body.admin { background: #f1ebe0; }

/* one glass surface recipe */
.header, .page-head, .section.paper, .trust, .panel, .note-box, .ubon-card, .how div, .cart-table, .filters,
.stat, table.t, .chip, .pager a, .pager span, .tabs a, .radio-card, .dd-menu, .mobile-nav, .tabbar, .img-grid figure {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .page-head, .section.paper, .trust, .panel, .note-box, .ubon-card, .how div, .cart-table, .filters,
  .stat, table.t, .chip, .pager a, .pager span, .tabs a, .radio-card, .dd-menu, .mobile-nav, .tabbar, .img-grid figure { background: var(--glass-strong); }
}

/* header: floating glass bar */
.topbar { background: var(--cocoa); }
.header { border-width: 0 0 1px; border-bottom-color: var(--glass-line); background: rgba(255, 253, 248, .72); box-shadow: 0 6px 24px rgba(60,36,18,.06); }
.nav > a, .nav .dd > button { border-radius: 99px; transition: background .2s var(--ease), color .2s var(--ease); }
.nav > a:hover, .nav .dd > button:hover, .nav > a.on { background: rgba(91, 50, 25, .08); }
.dd-menu { background: var(--glass-strong); border-radius: 18px; box-shadow: 0 18px 48px rgba(60,36,18,.16); padding: 10px; }
.dd-menu a { border-radius: 12px; }
.dd-menu a:hover { background: rgba(91, 50, 25, .07); }
.icon-btn { transition: background .2s var(--ease), transform .15s var(--ease); }
.icon-btn:hover { background: rgba(91, 50, 25, .08); }

/* buttons: pill, press feedback */
.btn { transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); box-shadow: 0 6px 18px rgba(91,50,25,.18); touch-action: manipulation; }
.btn.ghost { box-shadow: none; background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.gold { box-shadow: 0 6px 18px rgba(176,138,62,.32); }
.btn:active, .icon-btn:active, .card:active .ph, .ubon-card:active, .tile:active, .tabbar a:active { transform: scale(.97); }
.hero .btn.ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.92); }

/* inputs: soft translucent fields */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], input[type=file], select, textarea {
  background: rgba(255,255,255,.7); border-color: rgba(122,106,92,.22); border-radius: 12px;
}
input:focus, select:focus, textarea:focus { background: #fff; outline: 3px solid rgba(176,138,62,.35); outline-offset: 0; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid rgba(176,138,62,.55); outline-offset: 2px; }
.flash { border: 1px solid var(--glass-edge); border-radius: 16px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.flash.ok { background: rgba(232, 240, 227, .8); }
.flash.error { background: rgba(246, 227, 225, .85); }

/* hero: rounded inset card with a glass caption */
.hero { margin: 14px auto 0; max-width: calc(var(--wrap) + 160px); width: calc(100% - 28px); border-radius: 28px; min-height: min(74vh, 620px); box-shadow: 0 24px 60px rgba(36,24,17,.22); }
.hero .wrap { padding-bottom: 96px; }
.hero::after { background: linear-gradient(180deg, rgba(36,24,17,0) 25%, rgba(36,24,17,.78) 100%); }

/* trust strip = floating glass widget over the hero edge */
.trust { position: relative; z-index: 2; max-width: calc(var(--wrap) - 32px); width: calc(100% - 32px); margin: -58px auto 0; border-radius: var(--gr); box-shadow: var(--glass-shadow); overflow: hidden; }
.trust div { border-right-color: var(--glass-line); }

/* sections and page heads */
.section.paper { border-width: 1px 0; border-color: var(--glass-line); background: rgba(255,253,248,.5); }
.page-head { border-width: 0 0 1px; border-bottom-color: var(--glass-line); background: rgba(255,253,248,.5); }

/* cards */
.tile { border-radius: var(--gr); box-shadow: 0 14px 36px rgba(36,24,17,.16); transition: transform .2s var(--ease); }
.tile .cap { left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(36,24,17,.32); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.22); }
.tile::after { background: linear-gradient(180deg, transparent 55%, rgba(36,24,17,.45)); }
.ubon-card { border-radius: var(--gr); box-shadow: var(--glass-shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ubon-card:hover { border-color: var(--glass-edge); box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 14px 34px rgba(60,36,18,.14); }
.ubon-card .ms { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, rgba(233,217,180,.9), rgba(176,138,62,.35)); color: var(--cocoa); font-size: 30px; }
.card .ph { border-radius: 18px; box-shadow: 0 10px 26px rgba(36,24,17,.12); transition: transform .2s var(--ease); }
.card .ph .tag .pill, .card .ph .tag { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill { background: rgba(255,255,255,.66); }
.post-card .ph { border-radius: 18px; box-shadow: 0 10px 26px rgba(36,24,17,.1); }
.band img, .article .cover { border-radius: var(--gr); }

/* panels and boxes */
.panel { border-radius: var(--gr); box-shadow: var(--glass-shadow); }
.note-box { border-radius: 16px; }
.how div { border-radius: var(--gr); box-shadow: var(--glass-shadow); }
.radio-card { border-radius: 14px; border-color: rgba(122,106,92,.2); background: rgba(255,255,255,.5); }
.cart-table { border-radius: var(--gr); box-shadow: var(--glass-shadow); }
.cart-table td, .cart-table th { border-bottom-color: var(--glass-line); }
.gallery .main { border-radius: var(--gr); box-shadow: 0 18px 44px rgba(36,24,17,.16); }
.thumbs button { border-radius: 12px; }
.contact-list .ms { background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.qr { border-radius: 16px; }

/* filters, chips, pager = segmented pills */
.filters { border-radius: var(--gr); padding: 18px; box-shadow: var(--glass-shadow); align-self: start; }
.filters a.f { border-radius: 12px; }
.filters a.f:hover { background: rgba(91,50,25,.07); }
.chip { border-radius: 99px; }
.pager a, .pager span { box-shadow: var(--glass-shadow); }
.pager .on { background: var(--cocoa); border-color: var(--cocoa); }

/* toast: dark glass */
.toast { background: var(--glass-dark); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; }

/* footer: dark glass over ink */
.footer { background: linear-gradient(180deg, #2c1e15, var(--ink)); border-radius: 28px 28px 0 0; margin-top: 24px; }
.footer .logo { border-radius: 14px; }

/* iOS tab bar (phones and tablets) */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40;
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--tabbar);
    border-radius: 24px; background: rgba(255,253,248,.74); box-shadow: 0 10px 34px rgba(36,24,17,.18);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 44px; text-decoration: none; color: var(--muted); font-size: .7rem; font-weight: 500; line-height: 1.2; transition: color .2s var(--ease), transform .15s var(--ease); }
  .tabbar a .ms { font-size: 25px; }
  .tabbar a.on { color: var(--cocoa); }
  .tabbar a.on .ms { font-variation-settings: 'FILL' 1; }
  .tabbar .badge { top: 4px; right: calc(50% - 22px); }
  body.has-tabbar { padding-bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); }
  body.has-tabbar .toast { bottom: calc(var(--tabbar) + 22px + env(safe-area-inset-bottom)); }
  .header .icons .hide-tab { display: none; }
  .mobile-nav { border-width: 0 0 1px; border-bottom-color: var(--glass-line); background: var(--glass-strong); max-height: calc(100dvh - 140px); overflow-y: auto; }
  .mobile-nav a { border-bottom-color: var(--glass-line); padding: 12px 4px; }
  .trust { margin-top: -46px; }
  .footer { border-radius: 24px 24px 0 0; }
}
@media (max-width: 600px) {
  .hero { width: calc(100% - 20px); margin-top: 10px; border-radius: 22px; min-height: 520px; }
  .hero .wrap { padding-bottom: 84px; }
  .trust { width: calc(100% - 24px); border-radius: 18px; }
  .tile .cap { left: 10px; right: 10px; bottom: 10px; }
  .panel { padding: 18px; border-radius: 18px; }
  .card .ph { border-radius: 14px; }
}

/* back office */
.adm-side { background: linear-gradient(180deg, rgba(44,30,21,.96), rgba(36,24,17,.98)); }
.adm-side a { border-radius: 12px; transition: background .2s var(--ease); }
.adm-side a.on { background: rgba(176,138,62,.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(233,217,180,.25); }
.adm-side .logo { border-radius: 14px; }
.stat { border-radius: 18px; box-shadow: var(--glass-shadow); transition: transform .2s var(--ease); }
table.t { border-radius: 18px; box-shadow: var(--glass-shadow); }
table.t th { background: rgba(250,246,238,.7); }
table.t th, table.t td { border-bottom-color: var(--glass-line); }
.tabs a { border-radius: 99px; }
.tabs a.on { background: var(--cocoa); border-color: var(--cocoa); }
.img-grid figure { border-radius: 14px; }
.color-picks label { background: rgba(255,255,255,.6); }
@media (max-width: 900px) {
  .adm-top { position: sticky; top: 0; z-index: 30; background: rgba(36,24,17,.82); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding-top: calc(8px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active, .icon-btn:active, .card:active .ph, .ubon-card:active, .tile:active, .tabbar a:active { transform: none; }
}

/* product photo: light silk backdrop instead of a black letterbox */
.gallery .main img { background: linear-gradient(160deg, #efe6d6, #e2d4bd); }