/* =====================================================================
   PETALGLASS — design tokens
   Glassy, botanical, luminous. The signature is the "resin glint":
   a light sweep that crosses each product slab on hover, with full-width
   product photography that fades softly into the card details.
   ===================================================================== */
:root {
  --glass: #f3f4ed;        /* pale botanical white  */
  --ink: #2a3526;          /* deep fern             */
  --ink-soft: #55604e;
  --rose: #c86b7e;         /* pressed rose          */
  --amber: #d9a24a;        /* golden hour           */
  --lavender: #a9a3c9;
  --card: #ffffff;
  --line: rgba(42, 53, 38, 0.14);
  --radius-a: 58% 42% 55% 45% / 52% 55% 45% 48%;
  --radius-b: 45% 55% 48% 52% / 55% 46% 54% 45%;
  --radius-c: 52% 48% 42% 58% / 46% 54% 48% 52%;
  --shadow: 0 18px 40px -22px rgba(42, 53, 38, 0.35);
  --font-display: "Fraunces", serif;
  --font-body: "Karla", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(52rem 36rem at 88% -8%, rgba(200, 107, 126, 0.14), transparent 60%),
    radial-gradient(46rem 34rem at -10% 32%, rgba(169, 163, 201, 0.16), transparent 60%),
    radial-gradient(40rem 30rem at 60% 110%, rgba(217, 162, 74, 0.12), transparent 60%),
    var(--glass);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 460; line-height: 1.08; margin: 0 0 0.4em; }
h1 em, h2 em { font-style: italic; color: var(--rose); }

/* ------------------------------------------- thai & chinese scripts */
/* Fraunces and Karla stay first so Latin — the brand, prices, sizes —
   keeps its voice; the Noto face behind them picks up every glyph they
   do not carry. i18n.js fetches those webfonts only once the language is
   chosen, and the local names cover the visitor while it loads.
   The tight Latin leading clips Thai tone marks and crowds Chinese, so
   both scripts get their own line-height. */
html[lang^="th"] {
  --font-display: "Fraunces", "Noto Serif Thai", "Leelawadee UI", "Thonburi", serif;
  --font-body: "Karla", "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
}
html[lang^="zh"] {
  --font-display: "Fraunces", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body: "Karla", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
html[lang^="th"] body { line-height: 1.8; }
html[lang^="zh"] body { line-height: 1.75; }
html[lang^="th"] h1, html[lang^="th"] h2, html[lang^="th"] h3 { line-height: 1.4; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { line-height: 1.3; }
/* Wide tracking is a Latin small-caps device; it only pulls these
   scripts apart. */
html[lang^="th"] .eyebrow, html[lang^="zh"] .eyebrow { letter-spacing: 0.08em; }
html[lang^="th"] .hero h1, html[lang^="zh"] .hero h1 { letter-spacing: 0; }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--glass);
  padding: 0.6rem 1rem; z-index: 100; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--glass) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The bar is meant to read as a poured slab, so light rakes across it as
   the page moves. app.js drives --sheen-x (where the highlight sits) from
   scroll distance and --sheen (0–1) from scroll speed: it brightens while
   you move and settles back to a faint resting gloss. The band is wider
   than the bar and parked off-canvas at either end of its travel, so the
   modulo wrap in app.js never shows a seam. Without JS, --sheen-x stays 0%
   and the highlight simply sits off-screen. */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 30%,
    rgba(217, 162, 74, 0.10) 40%,   /* warm edge — resin disperses light */
    rgba(255, 255, 255, 0.50) 50%,
    rgba(169, 163, 201, 0.12) 60%,  /* cool edge */
    transparent 70%);
  background-size: 260% 100%;
  background-position: var(--sheen-x, 0%) 0;
  /* no transition here: app.js already eases the rise and fall frame by
     frame, and a CSS one would only lag behind it */
  opacity: calc(0.2 + var(--sheen, 0) * 0.3);
}
.brand {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 560;
  text-decoration: none; letter-spacing: 0.01em;
}
.brand span { font-style: italic; color: var(--rose); font-weight: 420; }
.head-nav { display: flex; gap: 1.2rem; margin-left: auto; }
.head-nav a {
  text-decoration: none; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.03em;
  color: var(--ink-soft); padding: 0.3rem 0;
  border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.head-nav a:hover { color: var(--ink); border-color: var(--rose); }
.cart-btn {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.cart-btn:hover { background: var(--ink); color: var(--glass); }
.cart-count {
  position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px;
  border-radius: 999px; background: var(--rose); color: #fff;
  font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(4.5rem, 11vw, 8.5rem) 1.25rem clamp(4rem, 9vw, 7rem);
}
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.2rem;
}
.hero h1 { font-size: clamp(2.6rem, 7.4vw, 5.2rem); letter-spacing: -0.015em; }
.hero-sub { max-width: 34rem; margin: 1.1rem auto 2rem; font-size: 1.06rem; color: var(--ink-soft); }
.hero-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.95rem var(--font-body); letter-spacing: 0.02em;
  padding: 0.85rem 1.7rem; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--ink); cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-ink { background: var(--ink); color: var(--glass); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }

/* drifting petals */
.petals span {
  position: absolute; top: -12%; width: 26px; height: 26px; opacity: 0.5;
  background: no-repeat center / contain
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 C17 6 18 13 12 22 C6 13 7 6 12 2 Z" fill="%23c86b7e"/></svg>');
  animation: drift 13s linear infinite;
}
.petals span:nth-child(1) { left: 8%;  animation-delay: 0s;   }
.petals span:nth-child(2) { left: 24%; animation-delay: -4s; width: 18px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 C17 6 18 13 12 22 C6 13 7 6 12 2 Z" fill="%23a9a3c9"/></svg>'); }
.petals span:nth-child(3) { left: 43%; animation-delay: -8s;  }
.petals span:nth-child(4) { left: 62%; animation-delay: -2s; width: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 C17 6 18 13 12 22 C6 13 7 6 12 2 Z" fill="%23d9a24a"/></svg>'); }
.petals span:nth-child(5) { left: 79%; animation-delay: -6s;  }
.petals span:nth-child(6) { left: 92%; animation-delay: -10s; width: 16px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 C17 6 18 13 12 22 C6 13 7 6 12 2 Z" fill="%23a9a3c9"/></svg>'); }
@keyframes drift {
  0%   { transform: translateY(-6vh) rotate(0deg)   translateX(0); }
  50%  { transform: translateY(48vh) rotate(160deg) translateX(3.5rem); }
  100% { transform: translateY(105vh) rotate(340deg) translateX(-2rem); }
}

/* ------------------------------------------------------------ shop */
.shop, .craft, .pet-memorial, .recent-orders { padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4.5vw, 3.5rem); max-width: 74rem; margin: 0 auto; }
.section-head { max-width: 36rem; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.section-head p { color: var(--ink-soft); margin: 0; }

.grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; padding: 0 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  cursor: pointer; transition: transform 0.22s, box-shadow 0.22s;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* the resin glint — a light sweep across the slab on hover */
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.85) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.card:hover::after, .card:focus-within::after { transform: translateX(120%); }

.card-img {
  position: relative;
  width: calc(100% + 2.2rem);
  aspect-ratio: 4 / 3;
  margin: 0 -1.1rem 0.55rem;
  overflow: hidden;
  background: linear-gradient(150deg, #fbfbf7, #eef0e6);
}
.card-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card));
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}
.card:hover .card-img img,
.card:focus-within .card-img img { transform: scale(1.025); }

.card h3 { font-size: 1.22rem; margin: 0; }
.card .flowers { font-size: 0.83rem; color: var(--ink-soft); margin: 0; }
.card-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.6rem; }
.price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 560; }
.add-btn {
  font: 700 0.82rem var(--font-body); letter-spacing: 0.04em;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.add-btn:hover { background: var(--ink); color: var(--glass); }

/* -------------------------------------------------- pet keepsakes */
.pet-memorial { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.pet-keepsake {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(300px, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 107, 126, 0.14), transparent 34%),
    linear-gradient(135deg, #fff, #f7f2ed);
  box-shadow: 0 24px 55px -38px rgba(42, 53, 38, 0.45);
}
.pet-keepsake::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -6rem;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(200, 107, 126, 0.18);
  border-radius: var(--radius-a);
  transform: rotate(18deg);
}
.pet-keepsake-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 21px;
  background: #eee8df;
}
.pet-keepsake-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(42, 53, 38, 0.1);
  border-radius: inherit;
}
.pet-keepsake-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pet-keepsake-copy { max-width: 31rem; padding-right: clamp(0rem, 2vw, 1rem); }
.pet-keepsake-copy .eyebrow { margin-bottom: 0.8rem; color: var(--rose); }
.pet-keepsake-copy h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); }
.pet-keepsake-lede { margin: 1rem 0 1.3rem; color: var(--ink-soft); font-size: clamp(1rem, 1.7vw, 1.1rem); }
.pet-keepsake-details { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pet-keepsake-details span {
  padding: 0.42rem 0.8rem;
  border: 1px solid rgba(42, 53, 38, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}
.pet-keepsake-note { margin: 1.3rem 0 0; color: var(--ink-soft); font-family: var(--font-display); font-size: 1rem; font-style: italic; }
.pet-keepsake-action { display: flex; align-items: center; gap: 1rem; margin-top: 1.35rem; }
.pet-keepsake-action .price { font-size: 1.5rem; }
.pet-keepsake-action .btn { padding: 0.7rem 1.3rem; }

/* ----------------------------------------------------------- craft */
.craft-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.craft-steps li {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--line); border-radius: 22px; padding: 1.5rem 1.4rem;
}
.step-n {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-a); border: 1.5px solid var(--ink);
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem;
  margin-bottom: 0.9rem; background: #fff;
}
.craft-steps h3 { font-size: 1.25rem; }
.craft-steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* --------------------------------------------------- recent orders */
.recent-orders { padding-top: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }
.recent-orders-head { margin-bottom: 0.6rem; }
.recent-orders-head h2 {
  margin: 0;
  color: var(--rose);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-style: italic;
  font-weight: 420;
}
.order-viewport {
  position: relative; overflow: hidden; padding: 0.5rem 0 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.order-track {
  display: flex; width: max-content; will-change: transform;
  animation: order-marquee 90s linear infinite;
}
.order-viewport:hover .order-track,
.order-viewport:focus .order-track,
.order-viewport:focus-within .order-track { animation-play-state: paused; }
.order-group { display: flex; gap: 0.9rem; padding-right: 0.9rem; }
.order-card {
  flex: 0 0 auto; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0.8rem;
  width: clamp(250px, 26vw, 290px); min-height: 112px; padding: 1rem;
  border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow: 0 14px 30px -28px rgba(42, 53, 38, 0.55);
}
.order-person {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-c); background: linear-gradient(145deg, #f4dce1, #eee9f5);
  color: var(--rose); font-family: var(--font-display); font-size: 1.2rem; font-style: italic; font-weight: 600;
}
.order-summary { min-width: 0; }
.order-summary p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; }
.order-summary h3 { overflow: hidden; margin: 0.1rem 0 0.55rem; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.order-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; color: var(--ink-soft); font-size: 0.72rem; }
.order-colour { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.order-colour > span { width: 14px; height: 14px; border: 1px solid rgba(42, 53, 38, 0.18); border-radius: 50%; background: var(--order-colour); }
.order-destination { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.order-destination::before { content: "→ "; color: var(--rose); }
@keyframes order-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- footer */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.6rem clamp(1rem, 4vw, 3rem) 2rem;
  display: grid; gap: 1.4rem; text-align: center; justify-items: center;
}
.foot-brand p { margin: 0.2rem 0; color: var(--ink-soft); font-size: 0.92rem; }
.foot-brand .brand { font-size: 1.3rem; color: var(--ink); }
.socials { display: flex; gap: 0.9rem; }
.socials a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--ink); border-radius: 50%;
  transition: background 0.2s, color 0.2s, transform 0.18s;
}
.socials a:hover { background: var(--ink); color: var(--glass); transform: translateY(-2px); }
.foot-fine { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }

/* Language picker, tucked just under the copyright line. Styled to match
   the header nav so it reads as a quiet utility, not a call to action. */
.lang-switch { display: flex; gap: 0.95rem; margin-top: -0.75rem; }
.lang-opt {
  padding: 0.15rem 0; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font: 500 0.8rem var(--font-body); letter-spacing: 0.04em;
  transition: color 0.2s, border-color 0.2s;
}
.lang-opt:hover { color: var(--ink); border-color: var(--rose); }
.lang-opt[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-color: var(--rose); }
.lang-opt + .lang-opt { position: relative; }
.lang-opt + .lang-opt::before {
  content: "·"; position: absolute; left: -0.55rem; border: 0;
  color: var(--ink-soft); opacity: 0.5; pointer-events: none;
}

/* Policy links, sitting under the language picker. They are <button>s
   because they open a dialog rather than going anywhere — but they read as
   links, so they are styled as text, matching the picker above them. */
.legal-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.3rem 0.95rem; margin-top: -0.55rem;
}
.legal-links button {
  padding: 0.15rem 0; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font: 500 0.78rem var(--font-body); letter-spacing: 0.03em;
  transition: color 0.2s, border-color 0.2s;
}
.legal-links button:hover { color: var(--ink); border-color: var(--rose); }

/* ---------------------------------------------------------- policies */
.policy {
  border: 1px solid var(--line); border-radius: 26px; padding: 0;
  width: min(94vw, 640px); max-height: 88vh; overflow-y: auto;
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(42, 53, 38, 0.5);
}
.policy::backdrop { background: rgba(42, 53, 38, 0.35); backdrop-filter: blur(3px); }
.policy-body { padding: clamp(1.6rem, 5vw, 2.6rem); }
.policy-body h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.6rem; }
/* Policy prose runs longer than anything else on the page, so it gets a
   measure and a little more air between paragraphs than the site default. */
.policy-text { max-width: 34rem; }
.policy-text p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.94rem; }
.policy-text p:last-child { margin-bottom: 0; }
.policy-support {
  margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--ink-soft);
}
.policy-support a { color: var(--rose); font-weight: 600; }

/* ------------------------------------------------------ quick view */
.quick {
  border: 1px solid var(--line); border-radius: 26px; padding: 0;
  width: min(94vw, 860px); max-height: 92vh; overflow-y: auto; background: var(--card);
  box-shadow: 0 30px 70px -30px rgba(42, 53, 38, 0.5);
}
.quick::backdrop { background: rgba(42, 53, 38, 0.35); backdrop-filter: blur(3px); }
.quick-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.6rem; padding: 1.6rem; }
.quick-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, #fbfbf7, #eef0e6);
  border: 1px solid var(--line);
  border-radius: 18px;
  align-self: start;
}
.quick-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pet-quick-img { aspect-ratio: 9 / 16; }
.pet-quick-video { background: #e9e5dc; }
.pet-quick-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.quick-info { min-width: 0; }
.quick-info h3 { font-size: 1.7rem; }
.quick-info .flowers { color: var(--rose); font-weight: 600; font-size: 0.9rem; margin-top: -0.4rem; }
.quick-info p { color: var(--ink-soft); font-size: 0.96rem; }
.quick-meta { list-style: none; padding: 0; margin: 0.75rem 0 1rem; font-size: 0.84rem; color: var(--ink-soft); }
.quick-meta li { padding: 0.32rem 0; border-top: 1px dashed var(--line); }
.quick-info .price { font-size: 1.5rem; }
.pet-order-steps { display: grid; gap: 0.45rem; margin: 0.8rem 0 1rem; padding: 0; list-style: none; }
.pet-order-steps li { display: grid; grid-template-columns: 25px 1fr; align-items: start; gap: 0.55rem; }
.pet-order-steps li > span {
  display: grid; place-items: center; width: 25px; height: 25px;
  border: 1px solid var(--line); border-radius: 50%; background: #f7f2ed;
  color: var(--rose); font-family: var(--font-display); font-size: 0.82rem;
}
.pet-order-steps p { margin: 0; font-size: 0.86rem; }
.theme-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-fieldset legend { margin-bottom: 0.5rem; color: var(--ink); font-size: 0.85rem; font-weight: 700; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.theme-option { position: relative; cursor: pointer; }
.theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.55rem 0.75rem;
  border: 1px solid rgba(42, 53, 38, 0.2); border-radius: 14px;
  background: #faf9f5; color: var(--ink); font-size: 0.86rem; font-weight: 700;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.theme-icon { font-size: 1.2rem; }
.theme-option:hover .theme-card { transform: translateY(-1px); border-color: var(--ink-soft); }
.theme-option input:checked + .theme-card { border-color: var(--ink); background: #f3f4ed; box-shadow: 0 0 0 1px var(--ink); }
.theme-option input:checked + .theme-card::after {
  content: ""; position: absolute; inset: -35% -55%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.92) 49%, transparent 63%);
  animation: colour-resin-shine 2.6s ease-in-out infinite;
}
.theme-option input:focus-visible + .theme-card { outline: 3px solid var(--rose); outline-offset: 2px; }
.pet-name-field { margin-top: 0.8rem; }
.pet-quick-info .pet-post-note { margin: 0.75rem 0 0; padding: 0.7rem 0.8rem; border-left: 3px solid var(--rose); background: #faf6f3; font-size: 0.8rem; }
.customise-fields { display: grid; gap: 0.85rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 16px; background: #faf9f5; }
.colour-field { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.colour-field-label, .field-heading { color: var(--ink); font-size: 0.85rem; font-weight: 700; }
.colour-select { position: relative; width: max-content; }
.colour-select-trigger {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
  width: 68px; height: 40px; padding: 0 0.65rem;
  border: 1px solid rgba(42, 53, 38, 0.24); border-radius: 999px;
  background: rgba(255, 255, 255, 0.88); color: var(--ink);
  cursor: pointer; box-shadow: 0 5px 14px -12px rgba(42, 53, 38, 0.5);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.colour-select-trigger:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(42, 53, 38, 0.6); }
.colour-select-trigger:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.colour-select-trigger svg { flex: 0 0 auto; transition: transform 0.18s; }
.colour-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.colour-selected-swatch {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 23px; height: 23px; border: 1px solid rgba(42, 53, 38, 0.18); border-radius: 50%;
  background: var(--selected-colour, conic-gradient(#f7f4e9 0 20%, #e6a2b2 0 40%, #aaa1ce 0 60%, #9db89a 0 80%, #88b9cf 0));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.72);
}
.colour-select-trigger::after {
  content: "";
  position: absolute;
  inset: -35% -55%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.92) 49%, transparent 63%);
  transform: translateX(-115%);
}
.colour-select.has-value .colour-select-trigger { border-color: var(--ink-soft); box-shadow: 0 0 0 1px rgba(42, 53, 38, 0.12); }
.colour-select.has-value .colour-select-trigger::after { animation: colour-resin-shine 2.6s ease-in-out infinite; }
.colour-menu {
  position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 8;
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 30px -18px rgba(42, 53, 38, 0.55);
  backdrop-filter: blur(8px);
}
.colour-menu[hidden] { display: none; }
.colour-menu-option {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid rgba(42, 53, 38, 0.22); border-radius: 50%;
  background: var(--swatch); cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.72);
  transition: transform 0.16s, box-shadow 0.16s;
}
.colour-menu-option:hover { transform: translateY(-2px) scale(1.04); }
.colour-menu-option[aria-selected="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink), inset 0 1px 2px rgba(255, 255, 255, 0.72); }
.colour-menu-option:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.line-field .colour-menu { left: 0; right: auto; }
@keyframes colour-resin-shine {
  0%, 30% { transform: translateX(-115%); }
  68%, 100% { transform: translateX(115%); }
}
.text-field { display: grid; gap: 0.42rem; }
.field-heading { display: flex; justify-content: space-between; gap: 1rem; }
.field-heading small { color: var(--ink-soft); font-weight: 400; }
.field-heading > span:last-child { color: var(--ink-soft); font-size: 0.75rem; font-weight: 500; }
.text-field input, .line-field input, .line-field select {
  width: 100%; min-width: 0; height: 40px;
  border: 1px solid rgba(42, 53, 38, 0.25); border-radius: 10px;
  background: #fff; color: var(--ink); padding: 0.55rem 0.7rem;
  font: 0.9rem var(--font-body);
}
.text-field input:focus, .line-field input:focus, .line-field select:focus { border-color: var(--rose); outline: 2px solid rgba(200, 107, 126, 0.18); }
.quick-purchase { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.95rem 0; }
.qty-row { display: flex; align-items: center; gap: 0.65rem; margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
.qty {
  display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 999px;
}
.qty button { width: 34px; height: 34px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.qty output { min-width: 30px; text-align: center; font-weight: 700; }
.dialog-close {
  position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--card); cursor: pointer; font-size: 0.95rem; color: var(--ink);
}
.dialog-close:hover { background: var(--ink); color: var(--glass); }

/* ------------------------------------------------------ thank you */
.thank-you {
  width: min(92vw, 570px); padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 28px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 75px -28px rgba(42, 53, 38, 0.55);
}
.thank-you::backdrop { background: rgba(42, 53, 38, 0.4); backdrop-filter: blur(4px); }

/* Applied only when showModal() is unavailable, so the dialog still lands in
   front of the page instead of in the normal document flow. No ::backdrop
   exists in that case, so the panel carries its own shadow. */
.dialog-fallback {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90; margin: 0;
  max-height: 90vh; overflow: auto;
  box-shadow: 0 0 0 100vmax rgba(42, 53, 38, 0.45), 0 30px 75px -28px rgba(42, 53, 38, 0.55);
}
.thank-you-card {
  position: relative; overflow: hidden; padding: clamp(2.5rem, 7vw, 4.2rem) clamp(1.5rem, 7vw, 3.8rem);
  text-align: center;
  background:
    radial-gradient(18rem 14rem at 105% -5%, rgba(200, 107, 126, 0.18), transparent 65%),
    radial-gradient(16rem 13rem at -8% 105%, rgba(169, 163, 201, 0.18), transparent 65%),
    var(--card);
}
.thank-you-flower {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 1.15rem;
  border: 1px solid rgba(200, 107, 126, 0.3); border-radius: var(--radius-a);
  background: rgba(200, 107, 126, 0.11); color: var(--rose);
  font-family: var(--font-display); font-size: 2rem;
  box-shadow: 0 12px 28px -20px rgba(42, 53, 38, 0.6);
}
.thank-you .eyebrow { margin-bottom: 0.8rem; color: var(--rose); }
.thank-you h2 { margin-bottom: 1rem; font-size: clamp(2rem, 6vw, 3rem); }
.thank-you-card > p:not(.eyebrow) { max-width: 29rem; margin: 0 auto 1.15rem; color: var(--ink-soft); }
.thank-you-card .thank-you-note {
  padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(243, 244, 237, 0.72); font-size: 0.84rem; text-align: left;
}
.thank-you-note strong {
  display: block; margin-bottom: 0.4rem; color: var(--rose);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.thank-you-note p { margin: 0 0 0.5rem; }
.thank-you-note p:last-child { margin-bottom: 0; }
/* The address is the one thing a customer must copy correctly, so give it the
   weight and line breaks of a real postal address rather than running prose. */
.thank-you-note .posting-address {
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-weight: 700; line-height: 1.5;
}
.thank-you-note .posting-copy { color: var(--ink-soft); font-size: 0.78rem; font-style: italic; }
.thank-you-card .btn { margin-top: 0.35rem; }

/* ---------------------------------------------------------- drawer */
.scrim { position: fixed; inset: 0; background: rgba(42, 53, 38, 0.35); backdrop-filter: blur(2px); z-index: 48; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(94vw, 440px); background: var(--glass);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.3rem 0.8rem; }
.drawer-head h2 { font-size: 1.5rem; margin: 0; }
.drawer-head .dialog-close { position: static; }
.drawer-items { flex: 1; overflow-y: auto; padding: 0.4rem 1.3rem; }
.line-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 0.75rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px dashed var(--line);
}
.line-item img { width: 64px; height: 64px; object-fit: cover; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.line-item h4 { margin: 0 0 0.15rem; font-family: var(--font-display); font-weight: 520; font-size: 1rem; }
.line-item .li-style { display: block; margin-bottom: 0.1rem; font-size: 0.76rem; color: var(--ink-soft); }
.line-item .li-price { font-size: 0.85rem; color: var(--ink-soft); }
.li-qty { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.li-qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1.2px solid var(--ink);
  background: none; cursor: pointer; line-height: 1; color: var(--ink);
}
.li-remove { border: 0; background: none; color: var(--rose); font-size: 0.78rem; cursor: pointer; text-decoration: underline; }
.line-customisation { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.6rem; }
.line-customisation.single-field { grid-template-columns: minmax(0, 180px); }
.line-field { min-width: 0; display: grid; gap: 0.3rem; color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; }
.line-text-label { display: flex; justify-content: space-between; gap: 0.5rem; }
.line-text-label small { font-weight: 400; }
.line-artist-note { grid-column: 1 / -1; margin: -0.15rem 0 0; color: var(--ink-soft); font-size: 0.74rem; font-style: italic; }
.empty-cart { text-align: center; color: var(--ink-soft); padding: 3rem 1rem; }
.drawer-foot { padding: 1rem 1.3rem 1.4rem; border-top: 1px solid var(--line); background: #fff; }
.drawer-total { display: flex; justify-content: space-between; font-size: 1.05rem; margin: 0 0 0.2rem; }
.drawer-note { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.9rem; }

/* Subtotal and shipping read as supporting detail; the total is the figure
   the customer is agreeing to, so it carries the weight. */
.drawer-shipping { font-size: 0.92rem; color: var(--ink-soft); }
.drawer-grand {
  font-size: 1.15rem; padding-top: 0.5rem; margin-top: 0.35rem;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------- toast */
/* app.js shows this as a popover so it clears a modal dialog's top layer.
   That brings the [popover] UA styles with it — inset: 0, margin: auto,
   border: solid, overflow: auto — which would centre the toast in the
   viewport and draw a border around it, so each one is answered here.
   z-index only matters on the older browsers that have neither popover nor
   showModal(); there it has to outrank .dialog-fallback. */
.toast {
  position: fixed; inset: auto auto 1.4rem 50%; transform: translate(-50%, 140%);
  width: auto; height: auto; margin: 0; border: 0; overflow: visible;
  background: var(--ink); color: var(--glass); padding: 0.75rem 1.4rem; border-radius: 999px;
  font-size: 0.9rem; z-index: 95; transition: transform 0.3s; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); }

/* ------------------------------------------------------ responsive */
@media (max-width: 640px) {
  .head-nav { display: none; }
  .quick-body { grid-template-columns: 1fr; }
  .quick { width: 94vw; }
  .pet-quick-img { aspect-ratio: 9 / 16; }
  .pet-keepsake { grid-template-columns: 1fr; gap: 1.5rem; }
  .pet-keepsake-photo { aspect-ratio: 1; }
  .pet-keepsake-copy { padding: 0 0.35rem 0.7rem; }
  .order-card { width: 258px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petals { display: none; }
  .site-head::before { display: none; }
  .order-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .order-group[aria-hidden="true"] { display: none; }
}