/* ==========================================================================
   Sze Leong — inner-page experience layer
   Big photographic hero on every page + photo bands + galleries.
   Loads after site.css; renders fully with JavaScript disabled.
   ========================================================================== */

/* ---------- photographic page hero -------------------------------------- */
.phero{position:relative;overflow:hidden;background:var(--brand-dk);isolation:isolate;
  min-height:clamp(400px,62vh,620px);display:flex;align-items:flex-end}
.phero-bg{position:absolute;inset:-10% 0;z-index:-3;will-change:transform}
.phero-bg img{width:100%;height:100%;object-fit:cover}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(110% 80% at 82% 12%,rgba(201,164,92,.15) 0%,rgba(201,164,92,0) 58%),
    linear-gradient(180deg,rgba(6,15,11,.82) 0%,rgba(6,15,11,.38) 40%,rgba(6,15,11,.92) 100%)}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}
.phero .wrap{width:100%;padding-top:120px;padding-bottom:56px;color:#fff;position:relative;z-index:1}
.phero .crumb{color:rgba(255,255,255,.6);margin-bottom:22px;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase}
.phero .crumb a{color:rgba(255,255,255,.85);text-decoration:none}
.phero .crumb a:hover{color:var(--accent)}
.phero h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1;letter-spacing:-.03em;
  margin:0 0 22px;max-width:24ch;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.phero .lede{color:rgba(255,255,255,.84);max-width:58ch;margin:0;font-size:clamp(1rem,1.2vw,1.1rem)}
.phero-rule{display:flex;align-items:center;gap:14px;font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.phero-rule::before{content:"";width:48px;height:1px;background:var(--accent)}
html.lang-zh .phero h1{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.26;letter-spacing:.01em}

/* ---------- photo gallery strip ----------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.gal figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:.76rem;
  letter-spacing:.04em;line-height:1.45;
  background:linear-gradient(transparent,rgba(6,15,11,.86));
  opacity:0;transform:translateY(8px);transition:.35s cubic-bezier(.2,.7,.3,1)
}
.gal figure:hover figcaption{opacity:1;transform:none}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gal--tall figure{aspect-ratio:3/4}

/* ---------- inner-page photo band --------------------------------------- */
.pband{position:relative;height:clamp(320px,46vh,460px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center}
.pband-bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.pband-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.14) brightness(.82) sepia(.08)}
.pband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,15,11,.9) 0%,rgba(6,15,11,.55) 58%,rgba(6,15,11,.28) 100%)}
.pband .wrap{color:#fff}
.pband h2{color:#fff;max-width:24ch;margin:0 0 14px}
.pband p{color:rgba(255,255,255,.8);max-width:48ch;margin:0}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .phero .wrap{padding-top:76px;padding-bottom:44px}
  .phero{min-height:auto}
  .pband{height:auto;padding:58px 0}
}
@media (max-width:560px){
  .gal{grid-template-columns:1fr 1fr}
  .gal figcaption{opacity:1;transform:none;font-size:.7rem;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .phero-bg,.pband-bg{transform:none !important}
}

/* ---------- entrance reveals (same language as the homepage) ------------- */
.js [data-rv]{opacity:0;transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s cubic-bezier(.2,.7,.3,1)}
.js [data-rv="mask"].in{clip-path:inset(0 0 0 0)}
.js [data-rv-d="1"]{transition-delay:.08s}
.js [data-rv-d="2"]{transition-delay:.16s}
.js [data-rv-d="3"]{transition-delay:.24s}
.js [data-rv-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js [data-rv="mask"]{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- product shop grid (kinda-style, richer) --------------------- */
.shopdir{background:var(--bg-2)}
.shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.shoptile{position:relative;display:flex;flex-direction:column;background:#fff;text-decoration:none}
.shoptile-ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.shoptile-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.shoptile:hover .shoptile-ph img{transform:scale(1.05)}
.shoptile-no{position:absolute;left:0;top:0;background:var(--brand);color:var(--accent);
  font:700 .64rem/1 var(--b-font);letter-spacing:.12em;padding:6px 9px}
.shoptile-tag{position:absolute;right:8px;top:8px;background:var(--accent);color:var(--brand-dk);
  font:700 .58rem/1 var(--b-font);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:2px}
.shoptile-tag.order{background:var(--ink-3);color:#fff}
.shoptile-bd{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1 1 auto;
  border-top:1px solid var(--line)}
.shoptile-bd h3{font-size:.92rem;margin:0 0 5px;line-height:1.25;color:var(--ink)}
.shoptile-bd p{margin:0;font-size:.76rem;line-height:1.45;color:var(--ink-3)}
.shoptile-price{margin-top:auto;padding-top:12px;font:700 .92rem/1 var(--b-font);color:var(--brand);
  font-variant-numeric:tabular-nums}
.shoptile-price small{font-weight:500;color:var(--ink-3);font-size:.68rem;letter-spacing:.04em}
.shopdir-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:30px}
.shopdir-head h2{margin:0}
.shopdir-head .note{max-width:44ch}
.shoptile-price.muted{color:var(--ink-3);font-weight:500;font-size:.74rem}
/* search + filter bar */
.shopbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.shopsearch{position:relative;flex:1 1 320px;max-width:440px}
.shopsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  fill:none;stroke:var(--ink-3);stroke-width:1.7;pointer-events:none}
.shopsearch input{width:100%;padding:13px 16px 13px 42px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:.95rem;color:var(--ink);border-radius:3px}
.shopsearch input:focus{outline:2px solid var(--accent-dk);outline-offset:1px;border-color:transparent}
.shopchips{display:flex;gap:8px;flex-wrap:wrap}
.shopchips button{font:600 .74rem/1 var(--b-font);letter-spacing:.06em;padding:11px 16px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);cursor:pointer;border-radius:3px;transition:.18s ease}
.shopchips button:hover{border-color:var(--ink)}
.shopchips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.shopempty{text-align:center;padding:40px 0 0;color:var(--ink-3);font-size:.95rem}
.shopempty a{color:var(--accent-dk);font-weight:600}
.js .shoptile.hide{display:none}
.shoptile{transition:opacity .25s ease}
/* hover flip panel */
.shoptile-flip{position:absolute;inset:0;background:rgba(18,36,30,.94);color:#fff;padding:20px 18px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;opacity:0;transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.shoptile-flip b{font:700 .64rem/1 var(--b-font);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.shoptile-flip>span{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.9)}
.shoptile-flip em{margin-top:10px;font-style:normal;font:700 .68rem/1 var(--b-font);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.shoptile:hover .shoptile-flip{opacity:1;transform:none}
@media (hover:none){.shoptile-flip{display:none}}
@media (max-width:1000px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shopgrid{grid-template-columns:1fr 1fr}.shoptile-bd{padding:12px 12px 14px}
  .shoptile-bd h3{font-size:.84rem}.shoptile-bd p{display:none}
  .shopbar{gap:12px}.shopchips button{padding:9px 12px;font-size:.68rem}}