/* GIFT CARD BUY PANEL - THE LOOK OF ITS CONTROLS, SHARED BY THE WEBSITE'S ORDER PAGE AND THE ORDERING APP
   (2026-11-09, GIFT-CALM round 2). Admin on round 1: "list were better before changes and the others just look tacky
   still". So:
   - THE LIST VIEW (several cards) IS THE LIVE LOOK AGAIN: pink outline pills, the live rows, the live foot. Only two
     things are added: the chosen half of For Me / Send as a Gift is filled, and a "+ Other" pill opens the $5 stepper.
     Everything under .gc-listmode below is the live look written out (the values of foundations.css .btn/.btn-outline).
   - THE SINGLE-CARD VIEW has three directions, picked by data-dir on .gc-panel:
       A  "The Card"   - a gift card artwork carrying the chosen amount and who it is for; quiet underline tabs; the
                         amounts as bare Bebas numbers with a pink dot under the chosen one; underline fields.
       B  "Clean sheet" - (B2, Admin's pick, 2026-11-09) a flat white sheet: iOS-style segmented control, one row of four
                         48px chips, light-fill inputs, one 12px radius, Bebas only on the title and the amounts.
       C  "Editorial"  - the amount itself is the artwork: one giant pink Bebas figure; text-only choices under it with a
                         pink underline on the chosen; a hairline tab pair; soft cream fields.
     In every direction there is ONE pink filled button (Buy / Pay in the foot); pink otherwise only marks the chosen.
   Colours are the brand's only: navy #1C3554, pink #E41764, cream #FFF8F3, light blue #A8C0D8, and the pages' own
   --line / --muted / --danger. Reading text inherits the page font (DM Sans); figures and the title are Bebas Neue.
   The sheet around the panel stays each page's own (website .sheet, app .item-sheet). Behaviour: static/js/gift-buy.js. */

/* ───────────────────────────── shared bones ───────────────────────────── */
.gc-panel { color: var(--navy); }
.item-sheet .gc-panel { padding: 0 16px; }           /* the app's sheet pads each part; the website's .sheet pads itself */
.gc-card, .gc-hero { display: none; }                /* each direction switches its own artwork on */
.gc-explain { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.gc-fields { margin: 0 0 16px; }
#gcgift-fields input {
  display: block; width: 100%; margin: 0 0 8px; padding: 12px; border: 1px solid var(--line, #E6DDD2);
  border-radius: var(--radius-small, 10px); background: #fff; color: var(--navy); font-family: inherit; font-size: 16px; line-height: 1.3;
}
#gcgift-fields input:last-child { margin-bottom: 0; }
#gcgift-fields input::placeholder { color: var(--muted); }
#gcgift-fields input:focus { border-color: var(--pink); outline: none; }
#gcgift-fields input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.gc-label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.gc-lead { display: none; margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--navy); }
.gc-tile { -webkit-tap-highlight-color: transparent; cursor: pointer; font-family: inherit; }
.gc-tile:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.gc-seg button { -webkit-tap-highlight-color: transparent; cursor: pointer; font-family: inherit; }
.gc-seg button:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* the custom amount: ONE slim field the height of every other input - light fill, no border, a navy ring while typing,
   "$" prefix, and small − / + tucked inside its right end (B2, 2026-11-09, Admin: "sleek and clean and modern"). */
.gc-custom { margin: 8px 0 0; }
.gc-custom-row { display: flex; align-items: stretch; min-height: 48px; border: 0; border-radius: 12px; background: #F2F4F7; overflow: hidden; }
.gc-custom-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--navy); }
.gc-custom-field { order: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--navy); cursor: text; }
.gc-custom-dollar { margin-right: 2px; }
.gc-custom-field input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; outline: none; }
.gc-custom-field input::placeholder { color: var(--muted); opacity: .6; }
#gccustom-amount, #gccustom-amount:focus, #gccustom-amount:focus-visible { font-size: 16px !important; outline: none !important; border: 0 !important; box-shadow: none !important; background: none !important; }   /* the pages' own input rules must not draw a second box inside */
.gc-step { flex: 0 0 auto; width: 44px; min-height: 48px; border: 0; border-left: 1px solid #E7EAEE; border-radius: 0; background: none; color: var(--navy);
  font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gc-step:first-child { order: 2; }
.gc-step:last-child { order: 3; }
.gc-step:active { background: #E7EAEE; }
.gc-step:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.gc-custom-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.gc-custom-hint.gc-bad { color: var(--danger, var(--error, #C0392B)); font-weight: 600; }

/* quiet text buttons in the single-card view: "Buying Several Cards?" */
.gc-link {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 0 8px;
  border: 0; background: none; color: var(--navy); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gc-link:hover { color: var(--pink); }
.gc-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 8px; }
#gcbuy-foot .btn { width: 100%; flex: none; margin: 0; min-height: 48px; white-space: normal; }

/* ───────────── THE LIST VIEW: the live look again (Admin preferred it), whatever the direction ───────────── */
.gc-panel.gc-listmode .gc-card, .gc-panel.gc-listmode .gc-hero, .gc-panel.gc-listmode .gc-label { display: none; }
.gc-panel.gc-listmode .gc-lead { display: block; }
.gc-panel.gc-listmode .gc-seg { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.gc-panel.gc-listmode .gc-explain { margin: 0 0 12px; text-align: left; }
.gc-panel.gc-listmode .gc-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.gc-panel.gc-listmode .gc-seg button, .gc-panel.gc-listmode .gc-tile {
  /* foundations.css .btn + .btn-outline, written out so it beats the direction rules below */
  flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px; border: 0; border-radius: var(--radius-pill, 999px); box-shadow: inset 0 0 0 2px var(--pink-text, var(--pink));
  background: #fff; color: var(--pink-text, var(--pink)); opacity: 1; transform: none;
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: .4px; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal;
}
.gc-panel.gc-listmode .gc-seg button::before, .gc-panel.gc-listmode .gc-seg button::after,
.gc-panel.gc-listmode .gc-tile::before, .gc-panel.gc-listmode .gc-tile::after { display: none; content: none; }
.gc-panel.gc-listmode .gc-seg button[aria-pressed="true"] { background: var(--pink); color: #fff; box-shadow: none; }   /* the one addition: the chosen half is filled */
.gc-panel.gc-listmode .gc-tile-other { flex: 1 0 100%; }   /* the other addition: "+ Other" on its own row, so three pills still fit a 320px phone */
.gc-panel.gc-listmode .gc-tile .gc-tile-amt { font: inherit; color: inherit; }
.gc-panel.gc-listmode .gc-custom { margin: 0 0 12px; }

/* ──────────────────────────── A · "The Card" ──────────────────────────── */
[data-dir="A"] .gc-card {
  display: block; position: relative; aspect-ratio: 1.6; border-radius: 16px; background: var(--navy); color: var(--cream, #FFF8F3);
  padding: 16px; margin: 4px 0 18px; overflow: hidden; box-shadow: 0 12px 28px rgba(28,53,84,.22);
}
[data-dir="A"] .gc-card::before { content: ''; position: absolute; right: -28%; top: -45%; width: 85%; height: 130%;
  background: radial-gradient(closest-side, rgba(228,23,100,.62), rgba(228,23,100,0)); }   /* brand pink, as a glow */
[data-dir="A"] .gc-card-logo { position: absolute; top: 14px; left: 14px; width: 54px; height: 50px; object-fit: contain; }
[data-dir="A"] .gc-card-tag { position: absolute; top: 20px; right: 16px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; opacity: .9; }
[data-dir="A"] .gc-card-amt { position: absolute; left: 16px; bottom: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 58px; line-height: 1; letter-spacing: 0; color: #fff; }
[data-dir="A"] .gc-card-amt.gc-none { font-size: 34px; bottom: 16px; color: var(--cream, #FFF8F3); opacity: .9; }
[data-dir="A"] .gc-card-for { position: absolute; right: 16px; bottom: 16px; max-width: 48%; font-size: 13px; font-weight: 600; text-align: right; opacity: .92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-dir="A"] .gc-seg { display: flex; gap: 22px; margin: 0 0 14px; border-bottom: 1px solid var(--line, #E6DDD2); }
[data-dir="A"] .gc-seg button { position: relative; min-height: 44px; padding: 0 2px 8px; border: 0; border-radius: 0; background: none; color: var(--muted);
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
[data-dir="A"] .gc-seg button[aria-pressed="true"] { color: var(--navy); }
[data-dir="A"] .gc-seg button[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pink); }
[data-dir="A"] .gc-explain { margin: 0 0 14px; }
[data-dir="A"] #gcgift-fields input { border: 0; border-bottom: 1px solid var(--line, #E6DDD2); border-radius: 0; padding: 12px 0; background: transparent; margin: 0; }
[data-dir="A"] #gcgift-fields input:focus { border-bottom-color: var(--pink); }
[data-dir="A"] .gc-tiles { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 2px; }
[data-dir="A"] .gc-tile { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; padding: 4px 2px 12px; border: 0; border-radius: 12px; background: none;
  color: var(--muted); font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0; line-height: 1; transition: color .15s; }
[data-dir="A"] .gc-tile[aria-pressed="true"] { color: var(--navy); }
[data-dir="A"] .gc-tile[aria-pressed="true"]::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--pink); }
[data-dir="A"] .gc-tile-other { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
[data-dir="A"] .gc-tile-other.gc-tile-num { font-family: 'Bebas Neue', sans-serif; font-size: 32px; font-weight: 400; letter-spacing: 0; }
[data-dir="A"] .gc-custom { margin: 6px 0 4px; }

/* ──────────────────────────── B · "Clean sheet" (B2) ──────────────────────────── */
/* Admin picked B, then: "make it look sleek and clean and modern". So: no boxes inside boxes - a flat white sheet, even
   spacing, one 12px radius, light fills (#F2F4F7) instead of outlines, hairline #E7EAEE where two things meet. Who it is
   for is an iOS-style segmented control; the amounts are one row of four equal 48px chips (chosen = navy); Other reveals
   the slim custom field above. Bebas only for the title and the amounts; DM Sans 15-16px for everything else; pink only
   on the one Buy button. */
[data-dir="B"].gc-panel { background: none; border-radius: 0; padding: 0; margin: 0; }
.item-sheet [data-dir="B"].gc-panel { padding: 0 16px; margin: 0; }
[data-dir="B"] .gc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin: 24px 0 12px;
  background: #F2F4F7; border-radius: 12px; }
[data-dir="B"] .gc-seg::before { content: 'Who is it for'; position: absolute; left: 0; top: -22px; font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--muted); }
[data-dir="B"] .gc-seg button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
[data-dir="B"] .gc-seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(28,53,84,.16), 0 0 0 .5px rgba(28,53,84,.06); }
[data-dir="B"] .gc-explain { margin: 0 0 16px; font-size: 14px; }
[data-dir="B"] .gc-fields { margin: 0 0 16px; }
[data-dir="B"] #gcgift-fields input { min-height: 48px; padding: 12px 14px; margin: 0 0 8px; border: 0; border-radius: 12px; background: #F2F4F7; color: var(--navy); font-size: 16px; }
[data-dir="B"] #gcgift-fields input:last-child { margin-bottom: 0; }
[data-dir="B"] #gcgift-fields input:focus { box-shadow: inset 0 0 0 1.5px var(--navy); }
[data-dir="B"] #gcgift-fields input:focus-visible { outline: none; }
[data-dir="B"] .gc-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .2px; text-transform: none; color: var(--muted); }
[data-dir="B"] .gc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
[data-dir="B"] .gc-tile { min-height: 48px; border: 0; border-radius: 12px; background: #F2F4F7; color: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 4px; box-shadow: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0; line-height: 1; transition: background .15s, color .15s; }
[data-dir="B"] .gc-tile[aria-pressed="true"] { background: var(--navy); color: #fff; }
[data-dir="B"] .gc-tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[data-dir="B"] .gc-tile-other { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
[data-dir="B"] .gc-tile-other.gc-tile-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; font-weight: 400; letter-spacing: 0; }
[data-dir="B"] .gc-link { margin-top: 10px; font-weight: 600; text-decoration: none; color: var(--navy); }
[data-dir="B"] .gc-link:hover { color: var(--navy); }

/* ──────────────────────────── C · "Editorial" ──────────────────────────── */
[data-dir="C"] .gc-hero { display: block; text-align: center; padding: 2px 0 10px; }
[data-dir="C"] .gc-hero-tag { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
[data-dir="C"] .gc-hero-amt { font-family: 'Bebas Neue', sans-serif; font-size: 88px; line-height: .95; letter-spacing: 0; color: var(--pink); margin-top: 2px; }
[data-dir="C"] .gc-hero-amt.gc-none { color: var(--muted); opacity: .55; }
[data-dir="C"] .gc-hero-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
[data-dir="C"] .gc-seg { display: flex; justify-content: center; margin: 0 0 4px; }
[data-dir="C"] .gc-seg button { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
[data-dir="C"] .gc-seg button + button { border-left: 1px solid var(--line, #E6DDD2); }
[data-dir="C"] .gc-seg button[aria-pressed="true"] { color: var(--navy); }
[data-dir="C"] .gc-seg button[aria-pressed="true"]::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin: 0 8px 2px 0; vertical-align: middle; }
[data-dir="C"] .gc-explain { text-align: center; margin: 0 8px 14px; }
[data-dir="C"] #gcgift-fields input { border: 0; background: var(--cream, #FFF8F3); border-radius: 12px; padding: 13px 14px; }
[data-dir="C"] #gcgift-fields input:focus { box-shadow: inset 0 0 0 1px var(--pink); }
[data-dir="C"] .gc-label { display: none; }
[data-dir="C"] .gc-tiles { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 8px; margin: 0 0 2px; }
[data-dir="C"] .gc-tile { min-height: 48px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--muted);
  font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0; line-height: 1; transition: color .15s; }
[data-dir="C"] .gc-tile[aria-pressed="true"] { color: var(--pink); }
[data-dir="C"] .gc-tile-other { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
[data-dir="C"] .gc-tile-other.gc-tile-num { font-family: 'Bebas Neue', sans-serif; font-size: 30px; font-weight: 400; letter-spacing: 0; }
[data-dir="C"] .gc-tile-other[aria-pressed="true"]:not(.gc-tile-num) { color: var(--navy); }
[data-dir="C"] .gc-custom { margin: 8px 0 4px; }
[data-dir="C"] .gc-custom-hint { text-align: center; }

/* the list view wins over every direction's canvas and alignment, so it is the live look in A, B and C alike */
.gc-panel.gc-listmode[data-dir] { background: none; border-radius: 0; padding: 0; margin: 0; }
.item-sheet .gc-panel.gc-listmode[data-dir] { padding: 0 16px; margin: 0; }
.gc-panel.gc-listmode .gc-custom-hint { text-align: left; }
.gc-panel.gc-listmode #gcgift-fields input { border: 1px solid var(--line, #E6DDD2); border-radius: var(--radius-small, 10px); background: #fff; padding: 12px; margin: 0 0 8px; box-shadow: none; }
.gc-panel.gc-listmode #gcgift-fields input:last-child { margin-bottom: 0; }
.gc-panel.gc-listmode .gc-tile[aria-pressed] { text-decoration: none; color: var(--pink-text, var(--pink)); background: #fff; border: 0; box-shadow: inset 0 0 0 2px var(--pink-text, var(--pink)); }
.gc-panel.gc-listmode .gc-tile[aria-pressed] .gc-tile-amt { text-decoration: none; color: inherit; background: none; border: 0; box-shadow: none; }
.gc-panel.gc-listmode .gc-tile.gc-tile-num { font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: .4px; }   /* "+ $35" reads like the other pills */

/* ──────────────────────────── D · "B2, finished the Apple / Airbnb way" (2026-11-10) ────────────────────────────
   Admin's blind picks on 13 real gift card pages: LOVE Apple, Airbnb and our B2; NO to every pill / circle / chip-heavy
   page and to the pink dessert brand. So D keeps B2's flat white calm and its one pink button, and takes from Apple:
   the card picture leading, ~32px between groups and ~12px inside one, sentence-case 17px navy questions as labels,
   a 2x2 grid of outlined 56px boxes (chosen = navy 2px outline + light tint, never a pink fill), "$ Other amount" as a
   field of the same height with one line of help, and who-it's-for as two equal outlined boxes with a bold title and
   one grey line. Pink is on the Buy button and nowhere else. Body DM Sans navy; Bebas only on the card's figure. */
[data-dir="D"].gc-panel { background: none; border-radius: 0; padding: 0; margin: 0; }
.item-sheet [data-dir="D"].gc-panel { padding: 0 16px; margin: 0; }

/* the card: modest, leads the panel */
[data-dir="D"] .gc-card { display: block; position: relative; aspect-ratio: 1.9; max-height: 180px; border-radius: 16px; background: var(--navy); color: #fff;
  margin: 4px 0 32px; overflow: hidden; box-shadow: 0 10px 24px rgba(28,53,84,.18); }
[data-dir="D"] .gc-card::before { content: ''; position: absolute; right: -30%; top: -50%; width: 90%; height: 140%;
  background: radial-gradient(closest-side, rgba(228,23,100,.55), rgba(228,23,100,0)); }
[data-dir="D"] .gc-card-logo { position: absolute; top: 14px; left: 14px; width: 50px; height: 46px; object-fit: contain; }
[data-dir="D"] .gc-card-tag { position: absolute; top: 18px; right: 16px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; opacity: .9; }
[data-dir="D"] .gc-card-amt { position: absolute; left: 16px; bottom: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 48px; line-height: 1; letter-spacing: 0; color: #fff; }
[data-dir="D"] .gc-card-amt.gc-none { font-size: 30px; bottom: 14px; opacity: .9; }
[data-dir="D"] .gc-card-for { position: absolute; right: 16px; bottom: 15px; max-width: 50%; font-size: 13px; font-weight: 600; text-align: right; opacity: .92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* group labels: sentence-case questions, 17px navy semibold */
[data-dir="D"] .gc-label, [data-dir="D"] .gc-seg::before, [data-dir="D"] .gc-fields::before {
  display: block; margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--navy); }

/* who it's for: two equal outlined boxes, bold title + one grey line */
[data-dir="D"] .gc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 32px; padding: 0; background: none; border: 0; border-radius: 0; }
[data-dir="D"] .gc-seg::before { content: "Who\2019s it for?"; grid-column: 1 / -1; margin-bottom: 0; }
[data-dir="D"] .gc-seg button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 76px; padding: 12px 14px;
  border: 1px solid var(--line, #E6DDD2); border-radius: 12px; background: #fff; color: var(--navy); text-align: left;
  font-size: 16px; font-weight: 700; line-height: 1.2; white-space: normal; transition: border-color .15s, background .15s, box-shadow .15s; }
[data-dir="D"] .gc-seg button::after { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--muted); }
[data-dir="D"] #gcmode-me::after { content: "Straight into your account"; }
[data-dir="D"] #gcmode-gift::after { content: "We\2019ll email it to them"; }
[data-dir="D"] .gc-seg button[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #F3F7FB; }
[data-dir="D"] .gc-explain { display: none; }   /* the boxes carry the one-liners */

/* the gift fields, with a label above the group */
[data-dir="D"] .gc-fields { margin: 0 0 32px; }
[data-dir="D"] .gc-fields::before { content: "Who\2019s it going to?"; }
[data-dir="D"] #gcgift-fields input { min-height: 54px; padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--line, #E6DDD2); border-radius: 12px; background: #fff; color: var(--navy); font-size: 16px; }
[data-dir="D"] #gcgift-fields input:last-child { margin-bottom: 0; }
[data-dir="D"] #gcgift-fields input:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
[data-dir="D"] #gcgift-fields input:focus-visible { outline: none; }

/* amounts: a 2x2 grid of outlined boxes; chosen = navy outline + light tint; "$ Other amount" as a field under them */
[data-dir="D"] .gc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
[data-dir="D"] .gc-tile { min-height: 56px; border: 1px solid var(--line, #E6DDD2); border-radius: 12px; background: #fff; color: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 8px; box-shadow: none;
  font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1; transition: border-color .15s, background .15s, box-shadow .15s; }
[data-dir="D"] .gc-tile[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #F3F7FB; }
[data-dir="D"] .gc-tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
[data-dir="D"] .gc-tile-other { grid-column: 1 / -1; justify-content: flex-start; padding: 8px 16px; color: var(--muted); font-weight: 500; font-size: 16px; }
[data-dir="D"] .gc-tile-other .gc-tile-amt::before { content: "$\00a0"; color: var(--navy); font-weight: 600; }
[data-dir="D"] .gc-tile-other[aria-expanded="true"] { display: none; }   /* the field below takes its place while it is open */
[data-dir="D"] .gc-custom { margin: 12px 0 0; }
[data-dir="D"] .gc-custom-row { min-height: 56px; border: 1px solid var(--navy); border-radius: 12px; background: #F3F7FB; box-shadow: inset 0 0 0 1px var(--navy); }
[data-dir="D"] .gc-custom-row:focus-within { box-shadow: inset 0 0 0 1px var(--navy); }
[data-dir="D"] .gc-step { display: none; }   /* Apple has no steppers; the keyboard is the stepper */
[data-dir="D"] .gc-custom-field { padding: 0 16px; font-size: 18px; font-weight: 600; justify-content: flex-start; }
[data-dir="D"] #gccustom-amount { font-size: 18px !important; }
[data-dir="D"] .gc-custom-hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
[data-dir="D"] .gc-link { margin: 20px 0 0; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; }
[data-dir="D"] .gc-link:hover { text-decoration: underline; }
[data-dir="D"] #gclist { margin-top: 0; }

/* CORRECTION 2026-11-10 (Admin): the real gift cards are WHITE with the round logo in the middle and nothing else. Card proportions 1.586:1, 14px corners, thin pink outline (his suggestion), very soft shadow so it reads on the white page. .gc-card-plain = the same card without the outline, rendered once for him to compare. */
[data-dir="D"] .gc-card { aspect-ratio: 1.586; max-height: none; width: 100%; max-width: 264px; margin: 4px auto 32px; border-radius: 14px; background: #fff; color: var(--navy); border: 1.5px solid #E41764; box-shadow: 0 6px 18px rgba(28,53,84,.10); display: flex; align-items: center; justify-content: center; }
[data-dir="D"] .gc-card::before { content: none; }
[data-dir="D"] .gc-card-logo { position: static; width: auto; height: 64%; max-height: 120px; object-fit: contain; }
[data-dir="D"] .gc-card-tag, [data-dir="D"] .gc-card-amt, [data-dir="D"] .gc-card-for { display: none; }
[data-dir="D"] .gc-card.gc-card-plain { border: 1px solid #EEF1F4; box-shadow: 0 8px 22px rgba(28,53,84,.14); }
[data-dir="D"] #gccustom-amount { padding: 0 0 0 6px !important; }
[data-dir="D"] .gc-custom-dollar { margin-right: 0; }

/* ── D2 · after the Fable critic pass (2026-11-10) ──
   The critic read D against Apple and Airbnb and found: a ragged 2x2 grid (3 tiles + a full-width Other row), every element
   drawn as the same outlined box so the card read as a fourth kind of input, an invalid amount that looked exactly like a
   chosen one, a cream disabled button, five competing semibolds, a centred bold link reading as a second action, the card
   jammed under the header, a stray bold "$" in the empty Other tile, orphaned one-liners in the who-for boxes, a help line
   that came and went, and gift inputs with no labels. Each is answered below; the brief is unchanged. */

/* the card is the one OBJECT: more depth, the rest stay flat controls */
[data-dir="D"] .gc-card { margin: 24px auto 32px; border: 1px solid #E41764; box-shadow: 0 1px 2px rgba(28,53,84,.06), 0 12px 28px -8px rgba(28,53,84,.18); }
[data-dir="D"] .gc-card.gc-card-plain { border: 1px solid rgba(28,53,84,.08); box-shadow: 0 1px 2px rgba(28,53,84,.06), 0 12px 28px -8px rgba(28,53,84,.18); }
[data-dir="D"] .gc-card-logo { height: 56%; }

/* who it's for: one weight step down, short one-liners that do not orphan */
[data-dir="D"] .gc-seg button { min-height: 72px; padding: 14px; font-size: 15px; font-weight: 600; border-color: #D6DCE5; }
[data-dir="D"] .gc-seg button::after { font-size: 13px; color: #6B778A; }
[data-dir="D"] #gcmode-me::after { content: "Into your account"; }
[data-dir="D"] #gcmode-gift::after { content: "Emailed to them"; }
@media (min-width: 360px) { [data-dir="D"] .gc-seg button::after { white-space: nowrap; } }

/* amounts: a true 2x2 — three presets + "Other amount" in cell four; the $ field sits under the grid at all times, like Apple */
[data-dir="D"] .gc-tiles { gap: 12px; row-gap: 12px; column-gap: 12px; }
[data-dir="D"] .gc-tile { margin: 0; min-height: 54px; border-color: #D6DCE5; font-size: 17px; font-weight: 500; }
[data-dir="D"] .gc-tile[aria-pressed="true"] { font-weight: 600; }
[data-dir="D"] .gc-tile-other { grid-column: auto; justify-content: center; padding: 8px; color: var(--navy); font-weight: 500; font-size: 17px; }
[data-dir="D"] .gc-tile-other .gc-tile-amt::before { content: none; }
[data-dir="D"] .gc-tile-other[aria-expanded="true"] { display: flex; }
[data-dir="D"]:not(.gc-listmode) .gc-custom { display: block !important; margin: 12px 0 0; }
[data-dir="D"] .gc-custom-row { min-height: 54px; border: 1px solid #D6DCE5; background: #fff; box-shadow: none; }
[data-dir="D"] .gc-custom-row:focus-within { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #F3F7FB; }
[data-dir="D"] .gc-custom.gc-bad .gc-custom-row, [data-dir="D"] .gc-custom.gc-bad .gc-custom-row:focus-within { border-color: #B42318; box-shadow: inset 0 0 0 1px #B42318; background: #fff; }
[data-dir="D"] .gc-custom-field { padding: 0 16px; font-size: 17px; font-weight: 600; }
[data-dir="D"] .gc-custom-dollar { flex: 0 0 24px; margin: 0; font-size: 17px; font-weight: 500; color: #8A94A6; }
[data-dir="D"] .gc-custom-row:focus-within .gc-custom-dollar, [data-dir="D"] .gc-custom.gc-has .gc-custom-dollar { color: var(--navy); }
[data-dir="D"] #gccustom-amount { font-size: 17px !important; padding: 0 !important; }
[data-dir="D"] #gccustom-amount::placeholder { color: #8A94A6; opacity: 1; font-weight: 400; }
[data-dir="D"] .gc-custom-hint { margin: 8px 0 0; font-size: 13px; color: #6B778A; }
[data-dir="D"] .gc-custom.gc-bad .gc-custom-hint { color: #B42318; }

/* the several-cards link: a quiet text link, left with the content, not a second action */
[data-dir="D"] .gc-link { display: block; width: auto; margin: 24px 0 0; padding: 0; min-height: 44px; text-align: left; font-size: 15px; font-weight: 400; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
[data-dir="D"] .gc-link:hover { color: var(--navy); }

/* gift fields: a small label above each input */
[data-dir="D"] .gc-fl { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--navy); }
[data-dir="D"] #gcgift-fields input { min-height: 52px; margin: 0 0 14px; border-color: #D6DCE5; }
[data-dir="D"] #gcgift-fields input:last-child { margin-bottom: 0; }
[data-dir="D"] #gcgift-fields input::placeholder { color: #8A94A6; opacity: 1; }

/* the one button: same height family as the controls; disabled = the same pink, faded, never a third colour */
body:has([data-dir="D"]) #gcbuy-foot #gcbuy-go { min-height: 52px; font-size: 17px; font-weight: 600; }
body:has([data-dir="D"]) #gcbuy-foot #gcbuy-go:disabled { background: #E41764; border-color: #E41764; color: #fff; opacity: .4; }

/* D3 . second critic pass (2026-11-10): the typed field is a plain input, never a fifth chosen tile; sublines and help text at 4.5:1 on the tint */
[data-dir="D"] .gc-custom-row:focus-within { border-color: var(--navy); box-shadow: none; background: #fff; }
[data-dir="D"] .gc-custom.gc-has .gc-custom-row { border-color: #D6DCE5; }
[data-dir="D"] .gc-custom.gc-has .gc-custom-row:focus-within { border-color: var(--navy); }
[data-dir="D"] .gc-seg button::after { color: #5B6B80; }
[data-dir="D"] .gc-custom-hint { color: #5B6B80; }

/* 2026-11-10 Admin picked the PLAIN card (no pink outline) on a card + PIN. */
[data-dir="D"] .gc-card { border: 1px solid rgba(28,53,84,.08); }