/* ============================================================================
   [SKIN] SAFE TO REWRITE COMPLETELY FOR A NEW DESIGN
   ----------------------------------------------------------------------------
   All website styling for this client.

   This is the design. Replace all of it per client. See docs/THEMING.md.
   Keep the CSS custom properties that includes/theme.php emits (--ink, --gold,
   --line, --radius and friends) wired up, or the admin panel's Appearance
   screen stops having any effect.
   ============================================================================ */

/* ==========================================================================
   Kismat Creations
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Must come first and stay. Several overlays below set display, which would
   otherwise beat the browser's own [hidden] rule and leave an invisible layer
   sitting on top of the page swallowing every click. */
[hidden] { display: none !important; }

:root {
  --ink: #1c1a17;
  --muted: #5b554d;
  --gold: #b18f5f;
  --cream: #faf7f2;
  --warm: #f4efe8;
  --header-bg: #fffdfa;
  --line: #e5ddd1;
  --radius: 4px;
  --header-h: 84px;
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --pad: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Nothing may drag the page sideways.
   overflow-x: clip beats hidden here because hidden turns the element into a
   scroll container that iOS will still let you pan, while clip simply cuts.
   touch-action then refuses horizontal pan gestures outright, while leaving
   pinch to zoom available for anyone who needs it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* A last line of defence: no section may push past the viewport. */
main, header, footer, section, .wrap { max-width: 100%; }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: 1.06rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
p  { margin: 0 0 18px; }
a  { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 14px 32px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-ghost { border-color: var(--gold); color: var(--ink); }
.btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.btn-ghost-light { border-color: rgba(255,255,255,.62); color: #fff; backdrop-filter: blur(2px); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.btn-solid { background: var(--ink); color: var(--cream); border-color: var(--ink); padding: 15px 40px; }
.btn-solid:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.text-link {
  display: inline-block;
  color: var(--gold);
  font-size: 0.9rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.text-link:hover { border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------- Header */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 18px rgba(28,26,23,.07); border-bottom-color: var(--line); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h);
  padding-top: 8px; padding-bottom: 8px;
}
.brand {
  display: flex; align-items: center;
  gap: var(--logo-gap, 13px);
  text-decoration: none; min-width: 0; flex: 0 1 auto;
}
/* Sideways movement uses margin, not transform, so the name is pushed along
   rather than covered. Only the vertical nudge is a transform, which cannot
   overlap anything. */
.brand-logo {
  width: auto; object-fit: contain; flex-shrink: 0;
  margin-left: var(--logo-x, 0px);
  transform: translateY(var(--logo-y, 0px));
}
.brand-text {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: .01em; color: var(--ink);
  white-space: nowrap;          /* never wrap or clip mid word */
  flex: 0 1 auto; min-width: 0;
}

.nav-desktop { display: flex; align-items: center; gap: 34px; }
.nav-link {
  position: relative;
  font-size: 0.94rem; font-weight: 300; text-decoration: none; color: var(--ink);
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width .35s var(--ease);
}
.nav-link:hover { color: var(--gold); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
.nav-link.is-active { color: var(--gold); }
/* Deliberately quieter and smaller than the real menu items, since this is
   only ever used by the owner. */
.nav-login { color: var(--muted); font-size: .81rem; letter-spacing: .02em; }
.nav-login:hover { color: var(--gold); }

.burger {
  display: none; width: 42px; height: 42px; border: 0; background: none;
  cursor: pointer; padding: 10px 8px; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--header-bg);
  padding: 40px var(--pad) 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: none; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav nav a {
  font-family: var(--font-head); font-size: 1.6rem; text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.mobile-nav-login {
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  color: var(--muted) !important;
  padding-top: 20px !important;
  border-bottom: 0 !important;
}
.mobile-nav-foot { margin-top: 34px; display: flex; flex-direction: column; gap: 8px; }
.mobile-nav-foot a { color: var(--gold); font-size: .9rem; text-decoration: none; }

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: var(--hero-h, 88vh);
  margin-top: var(--header-h);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #16140f;
}
.hero-media { position: absolute; inset: 0; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide picture, .hero-slide .img-placeholder { display: block; height: 100%; }
.hero-img, .hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.07); } }

.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(12,10,8,calc(var(--hero-overlay, .42) * .55)) 0%,
    rgba(12,10,8,calc(var(--hero-overlay, .42) * .35)) 42%,
    rgba(12,10,8,calc(var(--hero-overlay, .42) * 1.25)) 100%);
}
.hero-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #24211c, #24211c 12px, #2a2620 12px, #2a2620 24px);
  color: rgba(255,255,255,.55); font-size: .92rem; text-align: center; padding: 24px;
}

.hero-content { position: relative; z-index: 2; padding-bottom: 13vh; padding-top: 14vh; color: #fff; }
.hero[data-align="center"] .hero-content { text-align: center; margin-inline: auto; }
.hero[data-align="center"] .hero-sub,
.hero[data-align="center"] .hero-eyebrow,
.hero[data-align="center"] .hero-actions { justify-content: center; margin-inline: auto; }

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 300; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.88); margin: 0 0 22px;
}
.eyebrow-rule { display: block; width: 42px; height: 1px; background: var(--gold); flex-shrink: 0; }

.hero-title {
  color: #fff; margin-bottom: 24px; max-width: 15ch;
  font-weight: 400; letter-spacing: -0.018em; line-height: 1.08;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  text-shadow: 0 2px 40px rgba(0,0,0,.3);
}
.hero[data-align="center"] .hero-title { max-width: 20ch; margin-inline: auto; }

.hero-sub {
  color: rgba(255,255,255,.9); font-size: 1.05rem; font-weight: 300;
  max-width: 44ch; margin-bottom: 38px; line-height: 1.75;
  text-shadow: 0 1px 24px rgba(0,0,0,.45);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-dark-text, .hero-dark-text .hero-title, .hero-dark-text .hero-sub { color: var(--ink); text-shadow: none; }
.hero-dark-text .hero-eyebrow { color: var(--muted); }
.hero-dark-text .btn-ghost-light { border-color: var(--ink); color: var(--ink); }
.hero-dark-text .btn-ghost-light:hover { background: var(--ink); color: var(--cream); }
.hero-dark-text .btn-light { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translateX(-50%); }
.scroll-cue span {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------------------------------------------------------------- Sections */

.section { padding: clamp(64px, 9vw, 118px) 0; }
.section-warm { background: var(--warm); }
.split { padding: clamp(56px, 8vw, 104px) 0; }
.split-warm { background: var(--warm); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(38px, 5vw, 60px); }
.section-head p { color: var(--muted); font-size: .98rem; margin: 0; }
.section-hint { margin-top: 12px !important; font-size: .9rem; }

/* Desktop: text and button stack in one column beside the image.
   Mobile: text, then image, then the button on its own underneath. */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text  media"
    "cta   media";
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(32px, 6vw, 76px);
  row-gap: 4px;
}
.split-text  { grid-area: text; max-width: 52ch; }
.split-media { grid-area: media; align-self: center; }
.split-cta   { grid-area: cta; padding-top: 6px; }

.split-reverse {
  grid-template-areas:
    "media text"
    "media cta";
}
.split-cta-right { text-align: right; }

.split-text p { color: var(--muted); }
.text-right-lg { text-align: right; margin-left: auto; }
.text-right-lg .lead-italic, .text-right-lg .small-note { text-align: right; }

.lead-italic { font-family: var(--font-head); font-style: italic; font-size: 1.06rem; color: var(--ink); margin-bottom: 14px; }
.small-note { font-size: .84rem; color: var(--muted); letter-spacing: .01em; }

.split-media { margin: 0; overflow: hidden; border-radius: var(--radius-home, var(--radius)); }
.split-media img { width: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.split-media:hover img { transform: scale(1.035); }

/* ---------------------------------------------------------------- Gallery */

.grid-label {
  text-align: center; font-family: var(--font-head); font-size: 1.25rem;
  font-weight: 400; color: var(--ink); margin: 0 0 22px;
}
.photo-grid + .grid-label { margin-top: clamp(40px, 5vw, 64px); }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photo-cell {
  position: relative; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; overflow: hidden; display: block;
  border-radius: var(--radius-home, var(--radius));
}
.photo-cell img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.photo-cell::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(28,26,23,.16); opacity: 0; transition: opacity .4s var(--ease);
}
.photo-cell:hover img { transform: scale(1.05); }
.photo-cell:hover::after { opacity: 1; }
.gallery .center { margin-top: clamp(36px, 5vw, 52px); }

.img-placeholder {
  display: grid; place-items: center; width: 100%;
  background: repeating-linear-gradient(45deg, #efe9e0, #efe9e0 10px, #eae3d8 10px, #eae3d8 20px);
  color: var(--muted); font-size: .82rem; text-align: center; padding: 16px;
  border-radius: var(--radius-home, var(--radius));
}

/* ---------------------------------------------------------------- About */

.about-inner { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 6vw, 70px); align-items: center; }
.about-inner.about-centered { display: block; max-width: 720px; margin: 0 auto; text-align: center; }
.about-centered .section-sub { margin-inline: auto; }
.about-media { margin: 0; overflow: hidden; border-radius: var(--radius-home, var(--radius)); }
.about-media img { width: 100%; object-fit: cover; }
.about-text p { color: var(--muted); }
.about-text .section-sub { color: var(--ink); font-size: 1.02rem; margin-bottom: 26px; max-width: 44ch; }
.about-text .text-link { margin-top: 10px; }

/* ---------------------------------------------------------------- Why */

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.why-item { text-align: center; }
.why-item h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 500; margin-bottom: 12px; }
.why-item p { color: var(--muted); font-size: .92rem; margin: 0; }
.why-note {
  text-align: center; margin: clamp(38px, 5vw, 56px) 0 0;
  font-family: var(--font-head); font-style: italic; color: var(--muted); font-size: .96rem;
}

/* ---------------------------------------------------------------- Pricing */

.price-help {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: 620px; margin: -18px auto clamp(26px, 3vw, 38px);
  padding: 11px 20px; border-radius: 999px;
  background: rgba(177,143,95,.09); border: 1px solid rgba(177,143,95,.24);
  font-size: .85rem; color: var(--ink); text-align: left;
}
.price-help svg { color: var(--gold); flex-shrink: 0; }

.price-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.price-list > li { border-bottom: 1px solid var(--line); }
.price-list > li:last-child { border-bottom: 0; }

.price-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 14px; margin: 0;
  font-family: var(--font-body); font-size: 1rem; text-align: left;
  background: transparent; border: 0; border-radius: var(--radius);
  cursor: pointer; position: relative;
  transition: background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.price-row::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleY(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.price-row:hover { background: rgba(255,255,255,.7); transform: translateX(2px); }
.price-row:hover::before { transform: scaleY(1); }

.price-tick {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: #fff;
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.price-tick svg { opacity: 0; transition: opacity .2s var(--ease); }

.price-name { display: flex; flex-direction: column; min-width: 0; }
.price-title { font-size: .99rem; color: var(--ink); }
.price-name small { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.price-qty {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: .72rem; font-weight: 500;
  vertical-align: middle;
}
.price-dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-3px); min-width: 16px; }
.price-value { font-family: var(--font-head); font-size: 1.2rem; color: var(--gold); white-space: nowrap; }

.price-add {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: .78rem; letter-spacing: .03em; white-space: nowrap;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.add-plus { font-size: .95rem; line-height: 1; }
.price-row:hover .price-add { background: var(--gold); color: #fff; }

/* Selected state */
.price-row.is-picked { background: rgba(177,143,95,.1); }
.price-row.is-picked::before { transform: scaleY(1); }
.price-row.is-picked .price-tick { background: var(--gold); border-color: var(--gold); }
.price-row.is-picked .price-tick svg { opacity: 1; }
.price-row.is-picked .price-add { background: transparent; border-color: var(--line); color: var(--muted); }
.price-row.is-picked .add-plus { display: none; }

/* A single gentle nudge on the first row so the interaction is noticed */
.price-list > li:first-child .price-row.is-hint .price-add { animation: addPulse 1.6s var(--ease) 2; }
@keyframes addPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(177,143,95,.42); }
  50%      { box-shadow: 0 0 0 7px rgba(177,143,95,0); }
}

.price-summary {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  max-width: 760px; margin: 26px auto 0; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.price-summary p { margin: 0; font-size: .93rem; color: var(--muted); }
.price-summary strong { color: var(--ink); font-size: 1rem; }
.price-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-mini-clear { padding: 11px 20px; font-size: .82rem; }

.price-note {
  max-width: 640px; margin: clamp(32px, 4vw, 46px) auto 0; text-align: center;
  font-size: .87rem; color: var(--muted);
}

/* --------------------------------------------------- Picker modal */

.pick-modal {
  position: fixed; inset: 0; z-index: 180;
  display: grid; place-items: center; padding: 20px;
  background: rgba(22,19,15,.62); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s var(--ease);
}
.pick-modal.is-open { opacity: 1; }
.pick-panel {
  width: min(430px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--cream); border-radius: 14px; padding: 30px 28px 26px;
  position: relative; box-shadow: 0 24px 70px rgba(20,17,13,.3);
  transform: translateY(12px); transition: transform .3s var(--ease);
}
.pick-modal.is-open .pick-panel { transform: none; }
.pick-x {
  position: absolute; top: 12px; right: 16px;
  border: 0; background: none; font-size: 1.9rem; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.pick-x:hover { color: var(--ink); }
.pick-eyebrow {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 8px;
}
.pick-panel h3 { font-family: var(--font-head); font-size: 1.45rem; font-weight: 400; margin: 0 0 6px; }
.pick-detail { font-size: .87rem; color: var(--muted); margin: 0 0 6px; }
.pick-price { font-family: var(--font-head); font-size: 1.3rem; color: var(--gold); margin: 0 0 22px; }

.pick-field { margin-bottom: 18px; }
.pick-field label {
  display: block; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.pick-field input[type=text] {
  width: 100%; font-family: var(--font-body); font-size: .95rem; font-weight: 300;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
}
.pick-field input[type=text]:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(177,143,95,.14);
}

.stepper { display: flex; align-items: center; gap: 0; width: max-content; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.step-btn {
  width: 46px; height: 46px; border: 0; background: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--ink);
  transition: background .2s var(--ease);
}
.step-btn:hover { background: var(--warm); }
.step-btn:disabled { color: #cbc4b8; cursor: not-allowed; }
#qtyValue {
  width: 56px; height: 46px; text-align: center; border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
}
#qtyValue:focus { outline: none; background: var(--warm); }

.pick-actions { display: flex; gap: 10px; margin-top: 24px; }
.pick-actions .btn { flex: 1; text-align: center; }
.pick-remove {
  display: block; width: 100%; margin-top: 14px; padding: 8px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: .82rem; color: #a3452f;
}
.pick-remove:hover { text-decoration: underline; }

/* ------------------------------------------------ Sticky review bar */

/* --bar-lift is set from JavaScript to match the height of the browser's own
   bottom toolbar, which slides in and out on iOS as you scroll. The safe area
   inset keeps it clear of the home indicator. */
.pick-bar {
  position: fixed; left: 50%; z-index: 90;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--bar-lift, 0px));
  transition: bottom .18s var(--ease);
  transform: translateX(-50%) translateY(0);
  display: flex; align-items: center; gap: 18px;
  width: min(520px, calc(100% - 28px));
  padding: 12px 12px 12px 22px;
  background: var(--ink); color: var(--cream);
  border-radius: 999px; box-shadow: 0 14px 40px rgba(20,17,13,.28);
  animation: barIn .38s var(--ease);
}
@keyframes barIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }
.pick-bar.is-away { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(14px); transition: all .3s var(--ease); }
.pick-bar-info { flex: 1; min-width: 0; line-height: 1.35; }
.pick-bar-info strong { display: block; font-size: .92rem; }
.pick-bar-info span { font-size: .78rem; color: rgba(250,247,242,.7); }
.pick-bar .btn { flex-shrink: 0; background: var(--gold); border-color: var(--gold); color: #fff; padding: 12px 24px; font-size: .84rem; }
.pick-bar .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ----------------------------------------- Picked list in the form */

.picked-block {
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: rgba(177,143,95,.06); padding: 20px 22px; margin: 6px 0 22px;
}
.picked-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.picked-head h3 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0; }
.picked-clear { border: 0; background: none; cursor: pointer; font-family: var(--font-body); font-size: .78rem; color: var(--muted); text-decoration: underline; padding: 0; }
.picked-clear:hover { color: #a3452f; }

.picked-list { list-style: none; margin: 0; padding: 0; }
.picked-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(177,143,95,.22);
}
.picked-item:last-child { border-bottom: 0; }
.picked-main { flex: 1; min-width: 0; }
.picked-name { font-size: .94rem; color: var(--ink); }
.picked-name b { font-weight: 500; }
.picked-note { display: block; font-size: .79rem; color: var(--muted); font-style: italic; }
.picked-price { font-size: .92rem; color: var(--gold); white-space: nowrap; }
.picked-x {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center;
  transition: all .22s var(--ease);
}
.picked-x:hover { background: #a3452f; border-color: #a3452f; color: #fff; }
.picked-total { margin: 12px 0 0; font-size: .88rem; color: var(--ink); text-align: right; }
.picked-total small { display: block; font-size: .76rem; color: var(--muted); font-weight: 300; }
.picked-add { display: inline-block; margin-top: 12px; font-size: .82rem; color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; }
.picked-add:hover { border-bottom-color: var(--gold); }

/* ---------------------------------------------------------------- Booking */

.booking-inner { max-width: 780px; margin: 0 auto; }
.booking-form { margin-top: 6px; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.field > span em { color: var(--gold); font-style: normal; }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: .95rem; font-weight: 300;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.section-warm .field input, .section-warm .field select, .section-warm .field textarea { background: #fff; }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b554d' stroke-width='1.4' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(177,143,95,.14);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0563f; }
.field-error { display: block; color: #c0563f; font-size: .78rem; margin-top: 6px; text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------ Date calendar */

.field-date { position: relative; }
.date-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: .95rem; font-weight: 300;
  color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.date-trigger svg { color: var(--gold); flex-shrink: 0; }
.date-trigger:hover { border-color: var(--gold); }
.date-trigger:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(177,143,95,.14); }
.field-date.has-value .date-trigger { color: var(--ink); }

.calendar {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: min(320px, 100%);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(28,26,23,.14);
  padding: 14px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-month { font-family: var(--font-head); font-size: 1.02rem; color: var(--ink); }
.cal-arrow {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.2rem; line-height: 1; transition: all .2s var(--ease);
}
.cal-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.cal-arrow:disabled { opacity: .3; cursor: not-allowed; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow span {
  text-align: center; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 0;
}
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%; cursor: pointer;
  font-family: var(--font-body); font-size: .86rem; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cal-cell.is-blank { cursor: default; }
.cal-cell:hover:not(:disabled):not(.is-blank) { background: var(--warm); }
.cal-cell.is-past { color: #c8c1b6; cursor: not-allowed; }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--gold); }
.cal-cell.is-picked { background: var(--ink); color: #fff; }
.cal-cell.is-picked:hover { background: var(--ink); }

.cal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.cal-clear {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--font-body); font-size: .8rem; color: var(--gold);
}
.cal-clear:hover { text-decoration: underline; }
.cal-hint { font-size: .74rem; color: var(--muted); }

.form-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.form-privacy { font-size: .8rem; color: var(--muted); margin: 0; }
.form-status { margin-top: 22px; text-align: center; font-size: .94rem; }
.form-status.ok {
  color: #2f6b4f; background: #eef5f0; border: 1px solid #cfe3d7;
  padding: 16px 20px; border-radius: var(--radius);
}
.form-status.err {
  color: #a3452f; background: #fbeeea; border: 1px solid #f0d3ca;
  padding: 16px 20px; border-radius: var(--radius);
}

/* ---------------------------------------------------------------- Policies */

.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.5vw, 44px); max-width: 940px; margin: 0 auto; }
.policy-item h3 { font-size: 1rem; margin-bottom: 10px; }
.policy-item h3::before {
  content: ''; display: block; width: 26px; height: 1px; background: var(--gold); margin-bottom: 14px;
}
.policy-item p { color: var(--muted); font-size: .91rem; margin: 0; }

/* ---------------------------------------------------------------- Footer */

.site-footer {
  background: var(--warm); text-align: center;
  padding: clamp(56px, 7vw, 92px) 0 26px;
  border-top: 1px solid var(--line);
}

.footer-top { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 28px; }
.footer-rule { display: block; height: 1px; width: min(150px, 22vw); background: linear-gradient(90deg, transparent, var(--line)); }
.footer-rule:last-child { background: linear-gradient(90deg, var(--line), transparent); }
.footer-monogram { color: var(--gold); display: block; line-height: 0; }

.footer-brand {
  font-family: var(--font-head); font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  font-weight: 400; letter-spacing: .01em; margin: 0 0 8px;
}
.footer-tag {
  color: var(--muted); font-size: .8rem; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase; margin: 0 0 34px;
}

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; margin-bottom: 32px; }
.footer-nav a {
  position: relative; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding-bottom: 5px;
}
.footer-nav a::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transform: translateX(-50%);
  transition: width .35s var(--ease);
}
.footer-nav a:hover { color: var(--gold); }
.footer-nav a:hover::after { width: 100%; }

.footer-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; }
.social-dot {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--gold); background: transparent;
  transition: background .32s var(--ease), border-color .32s var(--ease),
              color .32s var(--ease), transform .32s var(--ease);
}
.social-dot:hover {
  background: var(--gold); border-color: var(--gold); color: #fff;
  transform: translateY(-3px);
}

.footer-details {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(28px, 6vw, 68px); margin-bottom: 40px;
}
.footer-detail { font-size: .92rem; color: var(--ink); line-height: 1.7; }
.footer-detail-label {
  display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.footer-detail a { text-decoration: none; transition: color .3s var(--ease); }
.footer-detail a:hover { color: var(--gold); }

.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.footer-bar p { margin: 0; font-size: .76rem; color: var(--muted); }
.footer-credit a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer-credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* -------------------------------------------------------- Inner pages */

.page-banner {
  position: relative; margin-top: var(--header-h);
  display: flex; align-items: flex-end; overflow: hidden;
  min-height: 46vh; background: #17150f;
}
.page-banner-plain {
  min-height: 0; background: var(--warm); align-items: center;
  border-bottom: 1px solid var(--line);
  padding: clamp(52px, 8vw, 96px) 0 clamp(44px, 6vw, 72px);
}
.page-banner-media { position: absolute; inset: 0; }
.page-banner-img { width: 100%; height: 100%; object-fit: cover; }
.page-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,12,9,.34), rgba(14,12,9,.74));
}
.page-banner-inner { position: relative; z-index: 2; padding-top: 8vh; padding-bottom: 7vh; color: #fff; }
.page-banner-plain .page-banner-inner { padding: 0; color: var(--ink); text-align: center; }

.page-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin: 0 0 18px;
}
.page-banner-plain .page-eyebrow { justify-content: center; color: var(--gold); }
.page-banner h1 {
  color: inherit; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 400;
  margin-bottom: 18px; letter-spacing: -0.015em;
}
.page-intro {
  font-size: 1rem; font-weight: 300; max-width: 58ch; margin: 0;
  color: rgba(255,255,255,.88); line-height: 1.8;
}
.page-banner-plain .page-intro { color: var(--muted); margin-inline: auto; }

.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.filter-pill {
  font-family: var(--font-body); font-size: .82rem; font-weight: 300;
  padding: 9px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: all .3s var(--ease);
}
.filter-pill:hover { border-color: var(--gold); color: var(--ink); }
.filter-pill.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* A real grid, not CSS columns. Columns fill top to bottom, which put photo
   two underneath photo one. A grid fills left to right, so the first row is
   complete before anything drops to the next. */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.masonry-cell {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; overflow: hidden;
  border-radius: var(--tile-radius, var(--radius));
}
.masonry-cell img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: var(--tile-ratio, 4 / 5); object-fit: cover;
  transition: transform .8s var(--ease);
}
.masonry-cell::after {
  content: ''; position: absolute; inset: 0; background: rgba(24,21,17,.28);
  opacity: 0; transition: opacity .38s var(--ease);
}
.masonry-cell:hover img { transform: scale(1.045); }
.masonry-cell:hover::after { opacity: 1; }
.masonry-zoom {
  position: absolute; z-index: 2; inset: auto 14px 14px auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.92);
  opacity: 0; transform: translateY(6px); transition: all .38s var(--ease);
}
.masonry-cell:hover .masonry-zoom { opacity: 1; transform: none; }
.masonry-cell[hidden] { display: none !important; }

.gallery-empty-filter { text-align: center; color: var(--muted); font-style: italic; }
.empty-state { color: var(--muted); font-size: 1rem; max-width: 46ch; margin: 0 auto; }
.empty-state a { color: var(--gold); }

.page-cta h2 { margin-bottom: 12px; }
.page-cta p { color: var(--muted); max-width: 48ch; margin: 0 auto 30px; }

.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 54px); }
.detail-item h2 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; margin-bottom: 10px; }
.detail-item p { color: var(--muted); font-size: .92rem; margin: 0; }
.detail-num {
  display: block; font-family: var(--font-head); font-size: 1.5rem;
  color: var(--gold); margin-bottom: 12px; opacity: .8;
}

/* ---------------------------------------------------------------- Viewer */

.lb-viewer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,12,10,.97);
  display: flex; align-items: center; justify-content: center;
  padding: 64px 72px;
  animation: lbIn .25s var(--ease);
}
@keyframes lbIn { from { opacity: 0; } }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-figure img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 2px; }
.lb-figure figcaption { color: rgba(255,255,255,.62); font-size: .84rem; text-align: center; max-width: 60ch; }

.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(255,255,255,.09); color: #fff;
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.9rem; line-height: 1;
  cursor: pointer; transition: background .3s var(--ease);
}
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-viewer-close {
  position: absolute; top: 16px; right: 22px;
  border: 0; background: none; color: #fff; font-size: 2.2rem; line-height: 1;
  cursor: pointer; opacity: .78; transition: opacity .25s;
}
.lb-viewer-close:hover { opacity: 1; }

/* ---------------------------------------------------------------- Reveal */

.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease) var(--delay, 0s), transform .85s var(--ease) var(--delay, 0s);
}
.reveal-hero { opacity: 0; transform: translateY(22px); animation: heroIn .95s var(--ease) forwards; animation-delay: var(--delay, 0s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

body.no-anim .reveal { opacity: 1; transform: none; }
body.no-anim .reveal-hero { opacity: 1; transform: none; animation: none; }
body.no-anim .hero-img, body.no-anim .hero-video { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-hero { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-img, .hero-video, .scroll-cue span { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
  .nav-desktop { gap: 24px; }
  .about-inner { grid-template-columns: 280px 1fr; }
}

@media (max-width: 1000px) {
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; gap: 30px; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav-desktop { display: none; }
  .burger { display: flex; }

  /* Keep the logo and name on one line on a phone, whatever the sliders say */
  .brand { gap: min(var(--logo-gap, 13px), 10px); }
  .brand-logo { max-height: 46px; margin-left: clamp(-10px, var(--logo-x, 0px), 16px); }
  .brand-text { font-size: clamp(.95rem, 4.1vw, 1.2rem); line-height: 1.2; }
  .header-inner { gap: 10px; }

  .hero { min-height: var(--hero-h-m, 76vh); align-items: center; }
  .hero-content { padding: 0 var(--pad); text-align: center; }
  .hero-title, .hero-sub { max-width: none; margin-inline: auto; }
  .hero-sub { font-size: .98rem; }
  .hero-eyebrow, .hero-actions { justify-content: center; }
  .hero-eyebrow .eyebrow-rule { display: none; }

  .page-banner { min-height: 38vh; }
  .page-banner-inner { text-align: center; }
  .page-eyebrow { justify-content: center; }
  .page-eyebrow .eyebrow-rule { display: none; }
  .page-intro { margin-inline: auto; }

  /* Text, then the photo, then the button on its own line. */
  .split-grid,
  .split-reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media" "cta";
    row-gap: 26px;
  }
  .split-text, .text-right-lg { text-align: center; max-width: 60ch; margin-inline: auto; }
  .text-right-lg .lead-italic, .text-right-lg .small-note { text-align: center; }
  .split-media { max-width: 520px; margin-inline: auto; width: 100%; }
  .split-cta, .split-cta-right { text-align: center; padding-top: 0; }

  /* The first heading below the hero is visible the moment the page loads,
     so a phone never shows a blank strip while waiting for the scroll. */
  .always-on-mobile.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-inner { grid-template-columns: 1fr; text-align: center; }
  .about-media { max-width: 320px; margin-inline: auto; }
  .about-text .section-sub { margin-inline: auto; }

  .why-grid { grid-template-columns: 1fr; gap: 34px; max-width: 480px; margin-inline: auto; }
  .policy-grid { grid-template-columns: 1fr; max-width: 540px; }
}

/* iOS zooms the page whenever a focused field is under 16px. Keeping every
   control at 16px on touch widths stops that jump completely. */
@media (max-width: 900px) {
  .field input, .field select, .field textarea,
  .date-trigger, .cal-select,
  .pick-field input[type=text], #qtyValue {
    font-size: 16px;
  }
}

/* Screen width is not the whole story. A tablet in landscape is wider than
   900px and still zooms, so every touch device gets 16px as well. */
@media (pointer: coarse) {
  .field input, .field select, .field textarea,
  .date-trigger, .cal-select,
  .pick-field input[type=text], #qtyValue,
  input, select, textarea {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .photo-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-details { gap: 22px; flex-direction: column; }
  .footer-nav { gap: 20px 22px; }
  .footer-bar { flex-direction: column; gap: 10px; }
  .footer-rule { width: 60px; }
  .masonry { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lb-viewer { padding: 60px 12px 78px; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.6rem; top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
  .lb-figure img { max-height: 70vh; }
  /* Price rows stack so the Add pill always has room on a phone */
  .price-row { flex-wrap: wrap; padding: 14px 10px; row-gap: 10px; }
  .price-dots { display: none; }
  .price-name { flex: 1 1 60%; }
  .price-value { margin-left: auto; order: 2; }
  .price-add { order: 3; flex: 1 1 100%; justify-content: center; padding: 10px 16px; font-size: .82rem; }
  .price-help { margin-top: -8px; font-size: .82rem; padding: 10px 16px; }
  .price-summary { flex-direction: column; align-items: stretch; text-align: center; }
  .price-summary-actions { flex-direction: column; }
  .price-summary-actions .btn { width: 100%; text-align: center; }

  .pick-panel { padding: 26px 20px 22px; }
  .pick-actions { flex-direction: column-reverse; }
  .pick-bar { padding: 10px 10px 10px 18px; gap: 12px; }
  .pick-bar-info strong { font-size: .84rem; }
  .pick-bar .btn { padding: 11px 18px; font-size: .8rem; }
  .picked-block { padding: 16px; }
}

/* Narrow iPhones (SE, mini, and the 13/14/15/16 standard at 390px) keep the
   exact same layout as the Plus and Pro Max sizes. Nothing restacks here.
   The buttons simply get tighter padding so two still sit side by side, and
   the photo gaps close up a little. */
@media (max-width: 420px) {
  .btn { padding: 12px 18px; font-size: .8rem; }

  .hero-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn {
    flex: 1 1 0; min-width: 0;
    padding-inline: 10px;
    text-align: center; white-space: nowrap;
  }

  .photo-grid { gap: 8px; }
  .masonry { gap: 8px; }
}