/* ═══════════════════════════════════════════════════════════
   PAHERAO STORE — Redesign (Cormorant Garamond + Lora)
   Warm paper, ink, terracotta. Editorial / gallery.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#f4f1ea; --paper-2:#efe9dd; --paper-3:#eae5da;
  --ink:#201f1d; --ink-2:#46423b; --ink-3:#7a746b; --ink-4:#a49b8c;
  --terra:#c15a2a; --ochre:#986a24; --gold:#b68235; --green:#3d7a4a;
  --line:rgba(32,31,29,.14); --line-2:rgba(32,31,29,.2);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Lora',Georgia,serif;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%;display:block}
::selection{background:rgba(193,90,42,.18)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:rgba(32,31,29,.2)}
::-webkit-scrollbar-track{background:var(--paper-3)}
button{font-family:var(--sans)}
input{font-family:var(--sans)}

/* keyframes from the design */
@keyframes phWash{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes phPlate{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes phRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes phFlow{to{background-position:220% 0}}
@keyframes phMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes phPulse{0%,100%{box-shadow:0 0 0 0 rgba(193,90,42,.5)}50%{box-shadow:0 0 0 7px rgba(193,90,42,0)}}
@keyframes phSpin{to{transform:rotate(360deg)}}

/* image inside a "plate field" — cover the placeholder */
.ph-field{position:relative;overflow:hidden}
.ph-field > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph-field > .ph-wm, .ph-field > .ph-code, .ph-field > .ph-chip, .ph-field > .ph-sold{z-index:2}

/* spinner */
.ph-spin{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--terra);animation:phSpin .7s linear infinite}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:12px 22px;font:500 13px/1 var(--sans);z-index:9999;box-shadow:0 8px 40px rgba(32,31,29,.25);
  animation:phRise .25s ease, fadeOut .3s ease 2.6s forwards;white-space:nowrap}
@keyframes fadeOut{to{opacity:0}}

/* responsive */
@media(max-width:900px){
  .ph-nav-inner{padding:14px 20px !important;flex-wrap:wrap;gap:10px}
  .ph-nav-search{order:3;max-width:none !important;margin:6px 0 0 !important;flex-basis:100%}
  .ph-nav-links{gap:20px !important}
  .ph-grid-2{grid-template-columns:1fr !important}
  .ph-grid-4{grid-template-columns:repeat(2,1fr) !important}
  .ph-hero{grid-template-columns:1fr !important}
  .ph-hero-art{min-height:320px}
  .ph-pad{padding-left:20px !important;padding-right:20px !important}
  .ph-sticky{position:static !important}
}
@media(max-width:560px){
  .ph-grid-4{grid-template-columns:1fr 1fr !important;gap:18px 14px !important}
  .ph-nav-links span:not(.ph-keep),.ph-nav-links .ph-hidesm{display:none !important}
}