/* ==========================================================================
   DAO YUN — overseas storefront layer
   pages.css loads after style.css and only adds components: the search
   overlay, product cards, the catalogue page, and the FAQ page.
   Everything stays inside the four brand colours and the existing tokens.
   ========================================================================== */

/* ─────────────────────────── search overlay ─────────────────────────── */
.srov{
  position:fixed; inset:0; z-index:200;
  display:none;
}
.srov.on{ display:block; }
.srov-bg{
  position:absolute; inset:0;
  background:rgba(43,42,38,.46);
  backdrop-filter:blur(6px);
}
.srov-panel{
  position:relative;
  max-width:680px; margin:clamp(48px,12vh,120px) auto 0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 30px 80px rgba(43,42,38,.35);
  overflow:hidden;
  animation:srIn .34s var(--ease);
}
@keyframes srIn{
  from{ opacity:0; transform:translateY(-14px) }
  to{ opacity:1; transform:none }
}
.srov-bar{
  display:flex; align-items:center; gap:14px;
  padding:6px 18px 6px 22px;
  border-bottom:1px solid var(--line);
}
.srov-bar input{
  flex:1; border:0; outline:0; background:none;
  font-family:var(--f-ui); font-size:1.05rem; color:var(--tx);
  padding:18px 0;
}
.srov-bar input::placeholder{ color:var(--tx-3) }
.srov-x{
  border:0; background:none; cursor:pointer;
  font-size:1rem; color:var(--tx-3); padding:10px;
  transition:color .3s var(--ease);
}
.srov-x:hover{ color:var(--tea) }
.srov-hint{
  padding:12px 22px;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx-3);
}
.srov-list{
  list-style:none; margin:0; padding:0 8px 10px;
  max-height:min(52vh,460px); overflow:auto;
}
.srov-list a{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"t i" "s i";
  gap:2px 14px;
  padding:12px 14px; border-radius:8px;
  text-decoration:none;
  transition:background .25s var(--ease);
}
.srov-list a.cur,
.srov-list a:hover{ background:var(--well) }
.srov-list b{
  grid-area:t; font-size:.92rem; font-weight:700; color:var(--tx);
}
.srov-list span{
  grid-area:s; font-size:.78rem; color:var(--tx-2); line-height:1.45;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.srov-list i{
  grid-area:i; align-self:center;
  font-style:normal; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moss); border:1px solid var(--line); border-radius:100px;
  padding:5px 10px; white-space:nowrap;
}

/* nav search button — visually a sibling of the language switch */
.sr-btn{
  border:1px solid var(--line); border-radius:100px;
  background:none; cursor:pointer;
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--tx-2);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.sr-btn:hover{ color:var(--tea); border-color:var(--tea) }
.sr-btn svg{ width:15px; height:15px; }

/* ─────────────────────────── product cards ─────────────────────────── */
.pcard{
  display:block; text-decoration:none;
  border:1px solid var(--line-2); border-radius:10px;
  background:var(--well);
  overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover{
  border-color:rgba(100,104,83,.45);
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(43,42,38,.12);
}
.pcard .ph{ border-radius:0; margin:0 }
.pcard .ph img{ transition:transform 1.2s var(--ease) }
.pcard:hover .ph img{ transform:scale(1.045) }
.pc-noimg{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3;
  background:var(--paper-3);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-3); text-align:center; line-height:1.7;
}
.pc-body{ padding:20px 20px 18px }
.pc-cat{
  display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tea); margin-bottom:8px;
}
.pcard h3{
  font-size:1.02rem; font-weight:700; color:var(--tx); margin:0;
  line-height:1.35;
}
.pc-zh{
  display:block; font-size:.76rem; color:var(--tx-3); margin-top:3px;
}
.pc-body p{
  font-size:.82rem; color:var(--tx-2); line-height:1.6;
  margin:10px 0 0;
}
.pc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.pc-chip{
  font-size:.66rem; color:var(--tx-2);
  border:1px solid var(--line-2); border-radius:100px;
  padding:4px 10px; line-height:1.5;
}
.pc-chip b{
  font-weight:700; color:var(--tx-3); text-transform:uppercase;
  letter-spacing:.08em; font-size:.6rem; margin-right:5px;
}
.pc-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line-2);
}
.pc-price{ font-size:.9rem; font-weight:700; color:var(--moss); white-space:nowrap }
.pc-enquire{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-3); transition:color .3s var(--ease); text-align:right;
}
.pcard:hover .pc-enquire{ color:var(--tea) }
/* the real Stripe button, living inside the card (see assets/js/stripe-checkout.js) */
.pc-buy{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#f6f4ec; background:var(--moss);
  border-radius:100px; padding:8px 15px; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pc-buy:hover{ background:var(--tea); color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px rgba(43,42,38,.18) }
.pc-buy:active{ transform:translateY(0) }
.pc-buy:focus-visible{ outline:2px solid var(--tea); outline-offset:2px }
.pc-buy[disabled]{ opacity:.55; cursor:default; background:var(--tx-3); transform:none; box-shadow:none }
.cat-more{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:clamp(28px,4vw,48px);
}

/* ─────────────────────────── catalogue page ─────────────────────────── */
.cat-note{
  max-width:640px;
  font-size:.86rem; color:var(--tx-2); line-height:1.7;
  margin:0 0 28px;
}
.cat-note a{ color:var(--moss); text-decoration:underline; text-underline-offset:3px }
.cat-filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 30px;
}
.cat-filters button{
  border:1px solid var(--line); border-radius:100px;
  background:none; cursor:pointer;
  font-family:var(--f-ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-2);
  padding:9px 18px;
  transition:all .3s var(--ease);
}
.cat-filters button:hover{ border-color:var(--moss); color:var(--moss) }
.cat-filters button.on{
  background:var(--moss); border-color:var(--moss); color:var(--cream);
}
.cat-filters + .pgrid .pcard[style*="none"]{ display:none !important }

.pcard-deep{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0;
  margin-top:clamp(28px,4vw,48px);
  cursor:default;
}
.pcard-deep:hover{ transform:none; box-shadow:none }
.pcd-media{ background:var(--paper-3) }
.pcd-media .ph{ height:100%; border-radius:0 }
.pcd-body{ padding:clamp(22px,3vw,40px) }
.pcd-body h3{ font-size:1.3rem; margin:6px 0 0 }
.pcd-sum{ font-size:.88rem; color:var(--tx-2); line-height:1.7; margin:16px 0 0 }
.spec-table{
  width:100%; border-collapse:collapse;
  margin-top:20px;
  font-size:.8rem;
}
.spec-table th,.spec-table td{
  text-align:left; padding:9px 12px;
  border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.spec-table th{
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.64rem;
  color:var(--tx-3); width:9.5em; white-space:nowrap;
}
.spec-table td{ color:var(--tx-2) }
.pcd-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px }
@media (max-width:860px){
  .pcard-deep{ grid-template-columns:1fr }
}

/* ─────────────────────────── FAQ page ─────────────────────────── */
.faq-grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
  margin-top:clamp(30px,4vw,56px);
}
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr } }
.faq-block h2{
  font-size:1.15rem; font-weight:700; color:var(--tx);
  margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.ship-list{ list-style:none; margin:0; padding:0 }
.ship-list li{
  padding:14px 0;
  border-bottom:1px solid var(--line-2);
  display:grid; gap:4px;
}
.ship-list b{
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tea);
}
.ship-list span{ font-size:.86rem; color:var(--tx-2); line-height:1.65 }
.faq-block details{
  border-bottom:1px solid var(--line-2);
}
.faq-block summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0;
}
.faq-block summary::-webkit-details-marker{ display:none }
.faq-block summary h3{
  flex:1; font-size:.94rem; font-weight:700; color:var(--tx);
  margin:0; line-height:1.45;
  transition:color .3s var(--ease);
}
.faq-block summary:hover h3{ color:var(--moss) }
.faq-block summary i{
  font-style:normal; color:var(--tea); font-size:1.1rem; font-weight:300;
  transition:transform .3s var(--ease);
}
.faq-block details[open] summary i{ transform:rotate(45deg) }
.faq-block details p{
  font-size:.86rem; color:var(--tx-2); line-height:1.75;
  margin:-4px 0 20px; padding-right:26px;
}
.glos b{ display:block; font-size:.95rem; font-weight:700; color:var(--tx) }
.glos .pc-zh{ margin:2px 0 0 }
.glos p{ font-size:.82rem; color:var(--tx-2); line-height:1.65; margin:8px 0 0 }

/* ---- payment banner (stripe-checkout.js) ---- */
.dy-pay-banner {
  max-width: 1080px;
  margin: 18px auto 0;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.dy-pay-ok   { background: #eaf3ea; color: #24522a; border-color: #bcd8bd; }
.dy-pay-err  { background: #fbeaea; color: #6b1f1f; border-color: #e4bcbc; }
.dy-pay-info { background: #eef1f4; color: #2c3a47; border-color: #c8d2dc; }

/* Buy button inside the deep spec block */
.pcd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pcd-actions button[data-buy] { cursor: pointer; }
.pcd-actions button[data-buy]:disabled { opacity: .6; cursor: wait; }

/* ==========================================================================
   Shipping-zone picker (assets/js/stripe-checkout.js)
   Shown before the Stripe redirect so the destination fee is never a
   surprise at the payment page.
   ========================================================================== */
body.dy-noscroll { overflow: hidden; }

.dy-ship-ov {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(43,42,38,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dy-ship-dlg {
  position: relative;
  width: 100%; max-width: 520px; max-height: 86vh; overflow: auto;
  background: var(--paper); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: 0 30px 70px rgba(43,42,38,.34);
  animation: dyShip .32s var(--ease);
}
@keyframes dyShip {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .dy-ship-dlg { animation: none; } }

.dy-ship-dlg h2 { font-size: 1.2rem; margin: 0 34px 8px 0; }
.dy-ship-sub { font-size: .86rem; line-height: 1.55; color: var(--tx-2); margin: 0 0 18px; }
.dy-ship-x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--tx-2); font-size: 20px; line-height: 1; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.dy-ship-x:hover { color: var(--tea); border-color: var(--tea); }

.dy-ship-list { display: grid; gap: 8px; }
.dy-zone {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: var(--well); border: 1.5px solid var(--line-2); border-radius: 12px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.dy-zone:hover { border-color: var(--tea); }
.dy-zone.on { border-color: var(--moss); background: rgba(100,104,83,.10); }
.dy-zone:focus-visible { outline: 2px solid var(--tea); outline-offset: 2px; }
.dy-zone-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dy-zone-t b { font-size: .94rem; font-weight: 700; }
.dy-zone-t i { font-style: normal; font-size: .74rem; color: var(--tx-3); }
.dy-zone-f { margin-left: auto; white-space: nowrap; font-weight: 700; font-size: .95rem; color: var(--moss); }
.dy-zone.on .dy-zone-f { color: var(--tea); }

.dy-ship-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* the site's .btn slides a ::before panel in on hover; it needs its own
   stacking context or the panel would paint behind the dialog */
.dy-ship-act .btn { position: relative; z-index: 0; }
.dy-ship-act .dy-ship-go { flex: 1 1 240px; justify-content: center; }
.dy-ship-note { margin: 14px 0 0; font-size: .78rem; color: var(--tx-3); }
.dy-ship-note a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .dy-ship-ov { padding: 0; align-items: flex-end; }
  .dy-ship-dlg { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 22px 18px 18px; }
}

/* FAQ — live fee table, filled from api/shipping-zones.php (catalog.js) */
.ship-rates {
  display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none;
}
.ship-rates li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: .86rem; color: var(--tx-2);
  border-bottom: 1px dashed var(--line-2); padding: 6px 0;
}
.ship-rates li b { color: var(--tx); font-weight: 700; }
.ship-rates li span { white-space: nowrap; }
.dy-ship-loading {
  margin: 0; padding: 14px 14px 15px;
  border: 1.5px dashed var(--line); border-radius: 12px;
  font-size: .86rem; color: var(--tx-3);
}
.dy-ship-go[disabled] { opacity: .55; cursor: default; }