/* ── Extras & Add-ons ────────────────────────────────────────────────
   Cards that read as part of the studio rather than as advertising:
   the brass rule, the mark, and the client's own portal type. Each one
   holds a photograph when addons/images/<id>.webp exists and keeps a
   composed typographic face when it does not. */

.addon-intro{ margin:0 0 26px; }
.addon-head{
  font-family:var(--font-display, Georgia, serif); font-size:26px; line-height:1.25;
  color:var(--cream); margin:6px 0 8px;
}
.addon-sub{
  font-family:var(--font-body); font-size:13.5px; line-height:1.75;
  color:var(--cream); opacity:.72; max-width:62ch;
}
.addon-group{ margin:0 0 30px; }
.addon-group-title{
  font-family:var(--font-body); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-bright); opacity:.9; margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--border-soft);
}
.addon-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.addon-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border-soft); border-radius:14px;
  background:rgba(246,241,231,0.035);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.addon-card:hover{
  border-color:rgba(200,162,76,.42); background:rgba(246,241,231,0.055);
  transform:translateY(-2px);
}
.addon-shot{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:linear-gradient(135deg, rgba(200,162,76,.14), rgba(16,26,46,.9));
  display:flex; align-items:center; justify-content:center;
}
.addon-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The mark only stands in while there is no photograph. */
.addon-mark{ display:none; font-size:26px; color:var(--brass-bright); opacity:.55; }
.addon-shot--bare .addon-mark{ display:block; }
.addon-body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
.addon-cat{
  font-family:var(--font-body); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-bright); opacity:.8;
}
.addon-name{
  font-family:var(--font-body); font-size:14.5px; font-weight:500; line-height:1.4;
  color:var(--cream); overflow-wrap:anywhere;
}
.addon-detail{ font-family:var(--font-body); font-size:12px; line-height:1.5; color:var(--cream); opacity:.6; }
.addon-price{
  font-family:var(--font-body); font-size:15px; color:var(--brass-bright);
  margin-top:2px; overflow-wrap:anywhere;
}
.addon-cta{
  margin-top:auto; width:100%; text-align:center; font-size:11.5px; padding:10px 12px;
  text-decoration:none;   /* an underline is a hyperlink, not an invitation */
}
.addon-cta:hover, .addon-cta:focus{ text-decoration:none; }
.addon-note{
  font-family:var(--font-body); font-size:11.5px; line-height:1.7; color:var(--cream);
  opacity:.52; margin-top:6px; padding-top:14px; border-top:1px solid var(--border-soft);
  max-width:72ch;
}

/* ── The suggestion ──────────────────────────────────────────────
   A concierge's card set down on the table: deep ink, a neutral
   hairline, the name in the display serif, and gold kept for the price
   and the rule alone — the portal's own rule is that gold stays rare,
   and an extra is not the moment to break it. It arrives slowly, holds
   for six seconds, and withdraws. */
.addon-pop{
  position:fixed; left:20px; bottom:26px; z-index:140;
  width:min(330px, calc(100vw - 40px));
  padding:20px 22px 18px;
  background:linear-gradient(180deg, rgba(16,27,48,.985), rgba(12,20,36,.985));
  border:1px solid var(--hairline-strong, rgba(246,241,231,.16));
  border-radius:4px;
  box-shadow:0 30px 70px rgba(0,0,0,.52), 0 2px 0 rgba(246,241,231,.03) inset;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(16px);
  transition:opacity .75s cubic-bezier(.22,.8,.3,1), transform .75s cubic-bezier(.22,.8,.3,1);
}
.addon-pop--in{ opacity:1; transform:translateY(0); }

/* The photograph runs the full width of the card, above the words. It
   removes itself if the studio has no picture for this item, and the
   card then stands exactly as it did before there were photographs. */
.addon-pop-shot{
  position:relative; margin:-20px -22px 15px;
  aspect-ratio:1/1; overflow:hidden; border-radius:3px 3px 0 0;
  background:rgba(8,14,26,.6);
}
.addon-pop-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Holds the dismiss cross legible over a bright frame, and lets the
   picture settle into the card rather than stopping at a hard edge. */
.addon-pop-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,17,31,.5), rgba(10,17,31,0) 40%, rgba(13,21,38,.9));
}

.addon-pop-line{
  font-family:var(--font-body); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cream); opacity:.5;
  padding-right:26px; line-height:1.6;
}
.addon-pop-rule{
  width:26px; height:1px; margin:12px 0 13px;
  background:var(--brass-bright); opacity:.75;
}
.addon-pop-name{
  font-family:var(--font-display); font-weight:400; font-size:23px; line-height:1.18;
  color:var(--cream); letter-spacing:.2px; overflow-wrap:anywhere;
}
.addon-pop-detail{
  font-family:var(--font-body); font-size:11.5px; line-height:1.6;
  color:var(--cream); opacity:.52; margin-top:6px;
}
.addon-pop-price{
  font-family:var(--font-body); font-size:13px; letter-spacing:.11em;
  color:var(--brass-bright); margin-top:13px; overflow-wrap:anywhere;
}
.addon-pop-actions{ display:flex; align-items:center; gap:16px; margin-top:17px; }
.addon-pop-cta{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-bright); text-decoration:none; padding:9px 16px;
  border:1px solid var(--brass-dim); border-radius:999px;
  transition:border-color .3s ease, background .3s ease;
}
.addon-pop-cta:hover{ border-color:var(--brass-bright); background:rgba(200,162,76,.08); }
.addon-pop-cta span{ display:inline-block; margin-left:5px; transition:transform .3s ease; }
.addon-pop-cta:hover span{ transform:translateX(3px); }
.addon-pop-more{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:0; padding:0 0 4px; cursor:pointer;
  color:var(--cream); opacity:.42; transition:opacity .3s ease;
}
.addon-pop-more:hover{ opacity:.8; }
.addon-pop-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; color:var(--cream); opacity:.35;
  background:none; border:0; cursor:pointer; border-radius:50%;
  transition:opacity .3s ease;
}
.addon-pop-close:hover{ opacity:.9; }

/* The card's own six seconds, drawn rather than counted. */
.addon-pop-timer{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(246,241,231,.07); overflow:hidden; border-radius:0 0 4px 4px;
}
.addon-pop-timer i{
  display:block; height:100%; width:100%; background:var(--brass-bright); opacity:.5;
  transform-origin:left center; animation:addon-drain 6s linear forwards;
}
@keyframes addon-drain{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Reading it stops the clock. */
.addon-pop--held .addon-pop-timer i{ animation-play-state:paused; }

/* Lumi owns the bottom-right corner; the suggestion steps aside. */
@media (max-width:520px){
  /* Lumi holds the bottom-right; the card sits clear of her. */
  .addon-pop{ left:12px; right:12px; width:auto; bottom:92px; padding:18px 18px 16px; }
  .addon-pop-shot{ margin:-18px -18px 13px; }
  .addon-pop-name{ font-size:21px; }
  .addon-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:11px; }
  .addon-head{ font-size:22px; }
}

/* On a short screen a square picture pushes the top of the card off the
   top of the window, taking the dismiss cross with it. The picture gives
   up its height first. */
@media (max-height:700px){
  .addon-pop-shot{ aspect-ratio:16/10; }
}
/* A phone turned on its side has no height to give at all: even a short
   picture puts the cross out of reach. The card goes back to words alone,
   which is what it was built as. */
@media (max-height:480px){
  .addon-pop-shot{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .addon-card{ transition:none; }
  .addon-card:hover{ transform:none; }
  .addon-pop{ transition:opacity .3s ease; transform:none; }
  .addon-pop--in{ transform:none; }
  .addon-pop-timer i{ animation:none; opacity:.25; }
  .addon-pop-cta span{ transition:none; }
}

/* ── Finding your way through thirty-eight items ─────────────────── */
.addon-rail{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 28px; padding-bottom:20px;
  border-bottom:1px solid var(--hairline, rgba(246,241,231,.09));
}
.addon-rail-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--cream); opacity:.62;
  background:none; border:1px solid var(--hairline, rgba(246,241,231,.09));
  transition:opacity .25s ease, border-color .25s ease, background .25s ease;
}
.addon-rail-link:hover{
  opacity:1; border-color:var(--brass-dim); background:rgba(246,241,231,.04);
}
.addon-rail-n{
  font-size:9px; letter-spacing:.04em; color:var(--brass-bright); opacity:.85;
}
.addon-group-title{ display:flex; align-items:baseline; gap:9px; }
.addon-group-n{
  font-size:9px; letter-spacing:.04em; color:var(--cream); opacity:.4;
  text-transform:none;
}
/* A little room above each group so a jump does not land tight under
   the header. */
.addon-group{ scroll-margin-top:84px; }

@media (prefers-reduced-motion: reduce){
  .addon-rail-link{ transition:none; }
}
@media (max-width:520px){
  .addon-rail{ gap:6px; margin-bottom:22px; }
  .addon-rail-link{ padding:7px 11px; font-size:9.5px; letter-spacing:.08em; }
}

/* ── An item offered two ways ────────────────────────────────────
   The client picks on the card and the choice travels to the Booking
   Team in the message, so nobody has to ask which one was meant. */
.addon-choices{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; }
.addon-choice{
  flex:1 1 auto; padding:7px 10px; border-radius:999px; cursor:pointer;
  font-family:var(--font-body); font-size:10px; letter-spacing:.06em;
  color:var(--cream); opacity:.55; text-align:center;
  background:none; border:1px solid var(--hairline, rgba(246,241,231,.09));
  transition:opacity .25s ease, border-color .25s ease, background .25s ease;
}
.addon-choice:hover{ opacity:.85; }
.addon-choice--on{
  opacity:1; border-color:var(--brass-dim); background:rgba(200,162,76,.1);
  color:var(--brass-bright);
}
.addon-choice:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .addon-choice{ transition:none; } }

/* ── Pressing a card ───────────────────────────────────────────────
   The card sinks a little under the finger, its shadow drawing in, the
   way a pressed object would. Releasing or holding opens its story. */
.addon-card{ cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.addon-card:focus-visible{ outline:1px solid var(--brass-bright); outline-offset:3px; }
.addon-card--press{
  transform:scale(.965) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.18) inset, 0 1px 3px rgba(0,0,0,.12);
  border-color:rgba(200,162,76,.55);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}

/* ── The story behind a card ───────────────────────────────────────
   Always the studio's night palette, whatever theme the portal is in —
   the same navy and brass as Lumi and the suggestion card. */
.addon-sheet-wrap{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.addon-sheet-veil{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(6,10,20,.62), rgba(6,10,20,.82));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .45s ease;
}
.addon-sheet{
  position:relative; width:min(540px, 100%); max-height:min(88vh, 900px);
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, #121d33 0%, #0d1628 100%);
  border:1px solid rgba(200,162,76,.28); border-radius:18px;
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(246,241,231,.03) inset;
  color:#F6F1E7;
  opacity:0;
  transform:translate(var(--from-x, 0), var(--from-y, 0)) scale(.42);
  transition:transform .62s cubic-bezier(.16,1,.3,1), opacity .38s ease;
}
.addon-sheet-wrap--in .addon-sheet-veil{ opacity:1; }
.addon-sheet-wrap--in .addon-sheet{ opacity:1; transform:none; }
.addon-sheet-wrap--out .addon-sheet{
  opacity:0; transform:translateY(14px) scale(.97);
  transition:transform .36s ease, opacity .3s ease;
}
.addon-sheet-wrap--out .addon-sheet-veil{ opacity:0; transition-duration:.36s; }

.addon-sheet-close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; color:#F6F1E7;
  background:rgba(10,17,31,.55); border:1px solid rgba(246,241,231,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.addon-sheet-close:hover{ background:rgba(10,17,31,.8); border-color:rgba(200,162,76,.6); }

.addon-sheet-scroll{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.addon-sheet-shot{ border-radius:0; }
.addon-sheet-shot::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,29,51,0), #121d33);
}
.addon-sheet-body{ padding:6px 30px 30px; }
.addon-sheet-cat{
  font-family:var(--font-body); font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:#C8A24C; margin:0 0 8px;
}
.addon-sheet-name{
  font-family:var(--font-display, Georgia, serif); font-weight:400;
  font-size:31px; line-height:1.14; margin:0 0 8px; color:#F6F1E7;
}
.addon-sheet-tagline{
  font-family:var(--font-display, Georgia, serif); font-style:italic;
  font-size:17px; line-height:1.45; color:#F6F1E7; opacity:.72; margin:0 0 14px;
}
.addon-sheet-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 4px; }
.addon-sheet-price span{ font-family:var(--font-body); font-size:17px; letter-spacing:.04em; color:#C8A24C; }
.addon-sheet-price em{ font-style:normal; font-family:var(--font-body); font-size:12px; color:#F6F1E7; opacity:.5; }
.addon-sheet-choices{ margin:14px 0 0; }

.addon-sheet-rule{ display:flex; align-items:center; gap:12px; margin:24px 0 22px; color:#C8A24C; }
.addon-sheet-rule i{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(200,162,76,.5), transparent); }
.addon-sheet-rule b{ font-weight:400; font-size:11px; opacity:.85; }

.addon-sheet-headline{
  font-family:var(--font-display, Georgia, serif); font-weight:400;
  font-size:22px; line-height:1.3; margin:0 0 12px; color:#F6F1E7;
}
.addon-sheet-p{
  font-family:var(--font-body); font-size:14px; line-height:1.8;
  color:#F6F1E7; opacity:.78; margin:0 0 12px;
}
.addon-sheet-p--soft{ margin-top:18px; opacity:.62; font-style:italic; }
.addon-sheet-label{
  font-family:var(--font-body); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#C8A24C; margin:26px 0 12px;
}
.addon-sheet-list{ list-style:none; margin:0; padding:0; }
.addon-sheet-list li{
  display:grid; grid-template-columns:34px 1fr; gap:4px;
  padding:13px 0; border-top:1px solid rgba(246,241,231,.08);
}
.addon-sheet-list li:last-child{ border-bottom:1px solid rgba(246,241,231,.08); }
.addon-sheet-num{
  font-family:var(--font-display, Georgia, serif); font-size:17px; line-height:1.3;
  color:#C8A24C; opacity:.85;
}
.addon-sheet-list strong{
  display:block; font-family:var(--font-body); font-weight:500; font-size:14px;
  letter-spacing:.01em; color:#F6F1E7; margin:1px 0 3px;
}
.addon-sheet-list p{ margin:0; font-family:var(--font-body); font-size:13px; line-height:1.7; color:#F6F1E7; opacity:.66; }

.addon-sheet-ideal, .addon-sheet-spec{
  margin:22px 0 0; padding:16px 18px; border-radius:12px;
  background:rgba(246,241,231,.035); border:1px solid rgba(200,162,76,.18);
}
.addon-sheet-ideal .addon-sheet-label, .addon-sheet-spec .addon-sheet-label{ margin:0 0 6px; }
.addon-sheet-ideal p, .addon-sheet-spec p{
  margin:0; font-family:var(--font-body); font-size:13.5px; line-height:1.7; color:#F6F1E7; opacity:.8;
}
.addon-sheet-compare{ border:1px solid rgba(246,241,231,.1); border-radius:12px; overflow:hidden; }
.addon-sheet-row{
  display:grid; grid-template-columns:86px 64px 1fr; gap:10px; align-items:baseline;
  padding:11px 14px; font-family:var(--font-body); font-size:12.5px; line-height:1.5;
  color:#F6F1E7; opacity:.72;
}
.addon-sheet-row + .addon-sheet-row{ border-top:1px solid rgba(246,241,231,.08); }
.addon-sheet-row span:first-child{ font-family:var(--font-display, Georgia, serif); font-size:15px; }
.addon-sheet-row span:nth-child(2){ color:#C8A24C; }
.addon-sheet-row--on{ opacity:1; background:rgba(200,162,76,.08); }
.addon-sheet-note{
  margin:22px 0 0; padding:2px 0 2px 14px; border-left:1px solid rgba(200,162,76,.5);
  font-family:var(--font-body); font-size:12.5px; line-height:1.7; color:#F6F1E7; opacity:.6;
}
.addon-sheet-note span{
  display:block; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:#C8A24C; margin:0 0 4px;
}
.addon-sheet-closing{
  margin:30px 0 4px; text-align:center;
  font-family:var(--font-display, Georgia, serif); font-style:italic;
  font-size:18px; line-height:1.5; color:#F6F1E7; opacity:.82;
}
.addon-sheet-closing::before{ content:'\2726'; display:block; font-style:normal; font-size:10px; color:#C8A24C; margin:0 0 10px; }

.addon-sheet-foot{
  padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(200,162,76,.2);
  background:linear-gradient(180deg, rgba(13,22,40,.92), #0d1628);
}
.addon-sheet-cta{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  border:1px solid #C8A24C; border-radius:999px; text-decoration:none;
  font-family:var(--font-body); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#C8A24C; background:rgba(200,162,76,.06);
  transition:background .3s ease, color .3s ease;
}
.addon-sheet-cta:hover{ background:#C8A24C; color:#0d1628; }
.addon-sheet-cta span{ transition:transform .3s ease; }
.addon-sheet-cta:hover span{ transform:translateX(3px); }

/* On a phone it rises from the bottom edge as a sheet. */
@media (max-width:620px){
  .addon-sheet-wrap{ align-items:flex-end; padding:0; }
  .addon-sheet{
    width:100%; max-height:92vh; max-height:92dvh;
    border-radius:20px 20px 0 0; border-bottom:0;
    transform:translateY(100%);
  }
  .addon-sheet-wrap--out .addon-sheet{ transform:translateY(100%); transition:transform .38s ease, opacity .3s ease; }
  .addon-sheet-body{ padding:4px 22px 26px; }
  .addon-sheet-name{ font-size:27px; }
  .addon-sheet-row{ grid-template-columns:72px 52px 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .addon-sheet, .addon-sheet-wrap--out .addon-sheet{ transform:none !important; transition:opacity .25s ease; }
  .addon-card--press{ transform:none !important; }
}

/* ── Room for a thumb ──────────────────────────────────────────────
   Two cards to a row on a phone leaves too little width for the full
   invitation, which broke over three lines on every card. There it
   reads Enquire, as the suggestion card does, and every control is at
   least forty-four pixels to the touch. */
.addon-cta-short{ display:none; }
@media (max-width:520px){
  .addon-cta-long{ display:none; }
  .addon-cta-short{ display:inline; }
  .addon-cta{ min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; letter-spacing:.18em; }
  .addon-rail-link{ min-height:40px; padding:9px 13px; }
  .addon-choice{ min-height:40px; font-size:10.5px; }
}