/* RiCO! separate pages (account, order tracking, rewards, catering, staff dashboard).
   Loaded after the inlined menu.css, so tokens, fonts, buttons, cards and fields are the
   original ones. Font roles follow the menu: EDO for headings and buttons, Gochi Hand for
   amounts, notes and inputs, Nunito for body text. */

.skip{position:absolute;left:-999px;top:8px;z-index:100;padding:10px 16px;background:var(--green-800);color:#fff;border-radius:var(--radius-pill);font-weight:800}
.skip:focus{left:8px}
.pg__app{display:flex;flex-direction:column}
.hdr__home,.hdr__wordlink{display:flex;align-items:center;flex:none}
.hdr__wordlink{flex:1;min-width:0}
.hdr__wordlink .hdr__wordmark{flex:none;width:auto;max-width:100%}
.pg__staging{margin:0;padding:6px 16px;background:var(--tan);color:var(--cocoa);border-bottom:2px solid var(--green-800);font-size:12px;font-weight:800;letter-spacing:.04em;text-align:center}
.pg__wrap{flex:1;padding:16px 16px 40px}
.pg__main{display:grid;gap:16px;outline:0}
.pg__main>*{min-width:0}

/* ---------- Menu button (header) ---------- */
.sitenav{position:relative;flex:none}
.sitenav>summary{list-style:none}
.sitenav>summary::-webkit-details-marker{display:none}
.sitenav[open]>.sitenav__btn{background:var(--green-800);color:#fff}
.sitenav__panel{position:absolute;right:0;top:calc(100% + 10px);z-index:30;display:grid;min-width:240px;padding:8px;background:var(--white);border:2px solid var(--green-800);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.navic{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;margin-right:12px;border-radius:50%;background:var(--green-50);border:2px solid var(--green-800);color:var(--green-800)}
.navic>svg{width:17px;height:17px}
.sitenav__panel a,.sitenav__out{display:flex;align-items:center;min-height:48px;padding:0 12px 0 8px;border-radius:var(--radius-md);color:var(--green-800);font-family:var(--font-poster);font-size:18px;letter-spacing:var(--tracking-poster);text-transform:uppercase;text-decoration:none;line-height:1.1}
.sitenav__panel a[aria-current="page"]{background:var(--green-50);box-shadow:inset 3px 0 0 var(--green-500)}
.sitenav__out{width:100%;border:0;background:transparent;cursor:pointer;text-align:left;border-top:2px dashed var(--green-200);border-radius:0;margin-top:4px}
@media (hover:hover){.sitenav__panel a:hover,.sitenav__out:hover{background:var(--green-50)}}

/* ---------- Headings and text ---------- */
.pg h1,.pg h2,.pg h3{font-family:var(--font-poster);font-weight:400;letter-spacing:var(--tracking-poster);text-transform:uppercase;color:var(--green-800);line-height:1.05;margin:0}
.pg h1{font-size:32px;text-shadow:var(--shadow-pop-sm);overflow-wrap:anywhere}
.pg h2{font-size:22px}
.pg h3{font-size:18px}
.pg p{margin:0;line-height:1.5}
.eyebrow{margin:0 0 4px;font-family:var(--font-hand);font-size:19px;color:var(--green-700);line-height:1.2}
.lead{font-size:17px}
.subtle,.small,small{color:var(--text-muted);font-size:13px}
.page-heading{display:grid;gap:8px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.prose{display:grid;gap:12px}
.prose ul,.prose ol{margin:0;padding-left:20px;line-height:1.5}
.preserve-lines{white-space:pre-line}
.amount,.money{font-family:var(--font-hand);font-size:20px;color:var(--green-800)}
code,.secret{font-family:ui-monospace,Consolas,monospace;font-size:14px;background:var(--green-50);border:2px dashed var(--green-800);border-radius:var(--radius-sm);padding:2px 6px;overflow-wrap:anywhere}
.secret{display:block;padding:10px 12px;font-size:17px;letter-spacing:.08em}

/* ---------- Panels (cards) ---------- */
.panel{display:grid;gap:12px;align-content:start;padding:16px;background:var(--white);border:2px solid var(--green-800);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop-sm);min-width:0}
.panel--warm{background:var(--cream);border-color:var(--cocoa)}
.panel--dashed{border:var(--stroke-dashed);box-shadow:none}
.stack{display:grid;gap:12px}
.space-top{margin-top:12px}
.two-cols,.three-cols,.checkout-grid,.board-grid,.review-grid,.product-grid{display:grid;gap:16px}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:2px dashed var(--green-200)}
.list-row:last-child{border-bottom:0}
.empty-state{text-align:center;justify-items:center}
.empty-state img{width:110px;height:auto}

/* ---------- Buttons: the original .btn look for server-rendered forms ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h-md);padding:8px 22px;font-family:var(--font-poster);font-size:19px;font-weight:400;letter-spacing:var(--tracking-poster);text-transform:uppercase;line-height:1.05;text-align:center;text-decoration:none;color:var(--text-on-brand);background:var(--brand);border:2px solid var(--brand);border-radius:var(--radius-pill);box-shadow:var(--shadow-pop-sm);cursor:pointer;transition:transform var(--dur-base) var(--ease-bounce),box-shadow var(--dur-base),background var(--dur-fast)}
.button.accent{background:var(--accent);color:var(--text-on-accent);border-color:var(--green-800)}
.button.secondary{background:var(--white);color:var(--green-800);border-color:var(--green-800)}
.button.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.button.small{min-height:var(--control-h-sm);padding:6px 16px;font-size:16px}
.button.full{width:100%}
.button:active{box-shadow:0 0 0 var(--green-400);transform:scale(var(--press-scale)) translate(2px,2px)}
.button:disabled{opacity:.45;cursor:not-allowed}
.text-button{border:0;background:none;padding:0;color:var(--link);font:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
@media (hover:hover){
  .button:hover{background:var(--brand-hover)}
  .button.accent:hover{background:var(--accent-hover)}
  .button.secondary:hover{background:var(--green-50)}
}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end}

/* ---------- Form fields: the original field styling ---------- */
.pg .field{display:grid;gap:6px;min-width:0}
.pg .field>span:first-child{font-size:13px;font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase}
.pg .field input:not([type=checkbox]):not([type=radio]),.pg .field select,.pg .field textarea{width:100%;min-height:48px;padding:8px 14px;background:var(--white);border:2px solid var(--green-800);border-radius:var(--radius-md);font:400 19px/1.25 var(--font-hand);color:var(--text-body)}
.pg .field textarea{min-height:110px;resize:vertical}
.pg .field input:focus,.pg .field select:focus,.pg .field textarea:focus{outline:0;border-color:var(--green-500);box-shadow:var(--shadow-pop-sm)}
.pg .field small{font-size:13px;color:var(--text-muted)}
/* Date and time fields: iPhones draw them at the width of their own text and centre it, which
   pushed them out of their boxes. Keep them inside the field and the value on the left. */
.pg input[type=date],.pg input[type=datetime-local],.pg input[type=time],.pg input[type=month]{display:block;min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){
  .pg input[type=date],.pg input[type=datetime-local],.pg input[type=time],.pg input[type=month]{-webkit-appearance:none;appearance:none}
}
.pg input::-webkit-date-and-time-value{min-height:1.25em;margin:0;text-align:left}
/* Two dates side by side only when each has room for its value; otherwise one under the other. */
.date-pair{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600;line-height:1.4;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--green-500)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:13px;font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:8px}

/* ---------- Notices ---------- */
.notice{padding:12px 14px;border:2px solid var(--green-800);border-radius:var(--radius-md);background:var(--green-50);line-height:1.45}
.notice ul{margin:6px 0 0;padding-left:18px}
.notice.success{background:var(--green-100)}
.notice.error{background:#FDECE9;border-color:var(--danger);color:#7A2114}
.notice.warn{background:var(--cream);border-color:var(--cocoa);color:var(--cocoa)}

/* ---------- Tags, badges, stats ---------- */
.pg .tag{height:auto;min-height:28px;padding:4px 10px;font-size:12px;white-space:normal}
.state{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:var(--radius-pill);background:var(--green-800);color:#fff;font-family:var(--font-poster);font-size:14px;letter-spacing:var(--tracking-poster);text-transform:uppercase;line-height:1}
.state--wait{background:var(--tan);color:var(--cocoa)}
.state--done{background:var(--green-500);color:var(--text-on-accent)}
.state--stop{background:var(--danger)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{display:grid;gap:4px;padding:14px;background:var(--white);border:2px solid var(--green-800);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop-sm)}
.stat strong,.stat b{font-family:var(--font-hand);font-size:30px;font-weight:400;line-height:1;color:var(--green-800)}
.stat span{font-size:13px;font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* ---------- Totals and order lines (as the order panel) ---------- */
.pg .totals{display:grid;gap:6px;font-size:15px;margin:0}
.pg .totals>div{display:flex;justify-content:space-between;gap:12px}
.pg .totals dt{margin:0}
.pg .totals dd{margin:0;font-family:var(--font-hand);font-size:18px;text-align:right}
.pg .totals .grand{border-top:2px dashed var(--cocoa);padding-top:8px;margin-top:4px;align-items:baseline}
.pg .totals .grand dt{font-family:var(--font-poster);font-size:22px;letter-spacing:.03em;text-transform:uppercase}
.pg .totals .grand dd{font-size:26px}
.basket-row,.order-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:2px dashed var(--green-200)}
.basket-row:last-child,.order-line:last-child{border-bottom:0}
.basket-row h3,.order-line h3{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:16px;font-weight:800}
.basket-row strong,.order-line strong{font-family:var(--font-hand);font-weight:400;font-size:18px;white-space:nowrap}
.order-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order-items li{display:grid;gap:4px}
.order-items small{display:inline-block;margin-right:6px}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--green-300);display:grid;gap:12px}
.timeline li{position:relative;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-27px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--green-500);border:2px solid var(--green-800)}
.timeline small{font-family:var(--font-hand);font-size:15px}

/* ---------- Tables (staff) ---------- */
.table-wrap{overflow-x:auto;border:2px solid var(--green-800);border-radius:var(--radius-lg);background:var(--white)}
.pg table{width:100%;border-collapse:collapse;font-size:14px}
.pg th,.pg td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:2px dashed var(--green-200)}
.pg th{font-size:12px;font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase;background:var(--green-50);border-bottom:2px solid var(--green-800)}
.pg tr:last-child td{border-bottom:0}

/* ---------- Staff navigation ---------- */
.staffnav{display:flex;gap:6px;overflow-x:auto;padding:4px;margin:0 0 16px;background:var(--green-50);border:2px solid var(--green-800);border-radius:var(--radius-pill);scrollbar-width:thin}
.staffnav a{flex:none;display:flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);color:var(--green-800);font-family:var(--font-poster);font-size:16px;letter-spacing:var(--tracking-poster);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.staffnav a[aria-current="page"]{background:var(--green-800);color:#fff;box-shadow:var(--shadow-pop-sm)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.toolbar .field{flex:1 1 160px}
.order-card{gap:8px}
.order-card h2 a{color:inherit;text-decoration:none}
.danger{color:var(--danger)}
.align-end{justify-self:end}

/* ---------- Menu links page and auth ---------- */
.linklist{display:grid;gap:10px}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:0;min-height:60px;padding:0 16px 0 12px;background:var(--white);border:2px solid var(--green-800);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop-sm);color:var(--green-800);font-family:var(--font-poster);font-size:20px;letter-spacing:var(--tracking-poster);text-transform:uppercase;text-decoration:none}
.linklist a::after{content:"\203A";font-family:var(--font-display);font-size:26px;color:var(--green-500)}
.auth-panel{justify-items:stretch;max-width:460px;margin:0 auto;width:100%}
.auth-cat{width:96px;height:96px;justify-self:center}
.auth-links{display:flex;gap:16px;flex-wrap:wrap;font-weight:700}
.stars{font-family:var(--font-hand);font-size:22px;color:var(--green-700);letter-spacing:.06em}
.handoff{justify-items:center;text-align:center}
.handoff img{width:120px;height:auto}
.areas-page .areas{padding:0}
.areas-page .areas__grid{display:grid;gap:14px}

@media (min-width:700px){
  .two-cols,.checkout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three-cols,.board-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Tablets and up: the page uses the screen instead of a phone-width column. */
@media (min-width:700px){
  .pg .app{max-width:none;border:0;background:transparent}
  .pg .hdr__in{max-width:var(--wide);margin:0 auto;padding:12px 24px;gap:14px}
  .pg__wrap{width:100%;max-width:820px;margin:0 auto;padding:28px 24px 48px}
  .pg__wrap--staff{max-width:var(--wide)}
  .pg h1{font-size:36px}
  .pg .site-foot{padding:24px 24px 32px}
  .pg .site-foot__in{max-width:var(--wide);margin:0 auto}
  .pg .panel{padding:20px}
  .linklist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas-page .areas__grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (min-width:900px){
  .pg .band{display:block;position:fixed;z-index:0;pointer-events:none;width:38vw;height:11vh;max-height:120px}
  .pg .band::before,.pg .band::after{content:"";position:absolute;inset:0}
  .pg .band--tl{left:-3vw;top:0}
  .pg .band--tl::before{background:var(--green-300);clip-path:polygon(0 0,100% 0,0 100%)}
  .pg .band--tl::after{width:74%;height:66%;background:var(--green-800);clip-path:polygon(0 0,100% 0,0 100%)}
  .pg .band--br{right:-3vw;bottom:0}
  .pg .band--br::before{background:var(--green-300);clip-path:polygon(100% 100%,100% 0,0 100%)}
  .pg .band--br::after{left:auto;top:auto;width:74%;height:66%;background:var(--green-800);clip-path:polygon(100% 100%,100% 0,0 100%)}
  .pg .hdr__in{padding:14px 32px;gap:16px}
  .pg .hdr__wordmark{height:40px}
  .pg__wrap{padding:32px 32px 56px}
  .pg h1{font-size:40px}
  .pg .site-foot{padding:28px 32px 36px}
  .checkout-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
}
@media (max-width:360px){
  .pg h1{font-size:28px}
  .pg__wrap{padding:12px 12px 32px}
  .button{font-size:17px;padding:8px 16px}
}

.linklist__t{flex:1;min-width:0}
.sitenav__panel{min-width:270px}

/* ---------- Policies: one page of accordions ---------- */
.policies{display:grid;gap:12px}
.policies .faq__item{margin:0}
.policies .faq__item summary{font-family:var(--font-poster);font-weight:400;font-size:20px;letter-spacing:var(--tracking-poster);text-transform:uppercase;padding:16px 18px}
.policy__body{padding:0 18px 16px;display:grid;gap:8px}
.policy__body h3{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:15px;font-weight:800;color:var(--green-800);margin-top:6px}
.policy__body p{margin:0;padding:0;font-size:15px;line-height:1.6}

/* ---------- Profile and the second sign-in step ---------- */
.profile-head{display:flex;align-items:center;gap:16px}
.profile-head__text{min-width:0}
.avatar{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--green-800);color:#fff;border:3px solid var(--green-800);box-shadow:var(--shadow-pop);font-family:var(--font-display);font-size:26px;letter-spacing:.02em}
.jump{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:2px solid var(--green-800);border-radius:var(--radius-pill);background:var(--white);color:var(--green-800);font:800 13px/1 var(--font-body);text-decoration:none}
@media (hover:hover){.jump a:hover{background:var(--green-50)}}
.profile-grid{display:grid;gap:16px}
.profile-grid>section{scroll-margin-top:84px}
.pg h3.minor{font-size:16px;margin-top:4px}
.choices{display:grid;gap:12px}
.choice-card{display:grid;gap:10px;align-content:start;padding:14px;border:2px solid var(--green-800);border-radius:var(--radius-lg);background:var(--white)}
.choice-card[data-on]{background:var(--green-50);box-shadow:inset 0 0 0 2px var(--green-500),var(--shadow-pop-sm)}
.choice-card__head{display:flex;align-items:center;gap:10px}
.choice-card__head h3{flex:1;min-width:0}
.choice-card__ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--green-100);border:2px solid var(--green-800);color:var(--green-800)}
.choice-card__ic svg{width:19px;height:19px}
.choice-card p{font-size:14px}
.qr-setup{display:grid;gap:16px;padding:16px;border:2px dashed var(--green-800);border-radius:var(--radius-lg);background:var(--green-50)}
.qr{justify-self:center;width:216px;max-width:100%;padding:10px;background:#fff;border:2px solid var(--green-800);border-radius:var(--radius-md);box-shadow:var(--shadow-pop-sm);line-height:0}
.qr svg{display:block;width:100%;height:auto}
.qr svg path{fill:var(--green-900)}
.numbered{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.5}
.recovery .codes{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.recovery code{display:block;padding:6px 8px;background:#fff;border:2px dashed var(--green-300);border-radius:var(--radius-sm);font-size:15px;text-align:center}
.more{border-top:2px dashed var(--green-200);padding-top:10px}
.more>summary{cursor:pointer;font-weight:800;color:var(--green-800)}
.more>div{margin-top:12px}
.inline-pass{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.inline-pass .field{flex:1 1 200px}
.pg .field input.otp-input{font-family:var(--font-display);font-size:28px;letter-spacing:.32em;text-align:center;padding-left:.32em}

/* ---------- Get the app ---------- */
.app-hero{display:flex;align-items:center;gap:18px}
.app-hero__icon{flex:none;width:88px;height:88px;border-radius:22px;border:3px solid var(--green-800);box-shadow:var(--shadow-pop);background:#fff}
.app-hero__text{min-width:0}
.perks{display:grid;gap:12px}
.perk{display:flex;gap:14px;align-items:flex-start;padding:14px;border:2px solid var(--green-800);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-pop-sm)}
.perk__ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green-100);border:2px solid var(--green-800);color:var(--green-800)}
.perk__ic svg{width:21px;height:21px}
.pg .perk h2{font-size:19px;margin-bottom:4px}
.perk p{font-size:14px}
.faq-lite .faq__item{margin:0}
@media (min-width:700px){.perks{grid-template-columns:repeat(3,minmax(0,1fr))}.perk{flex-direction:column}}
@media (min-width:900px){
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .profile-wide{grid-column:1/-1}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qr-setup{grid-template-columns:auto minmax(0,1fr);align-items:start}
}

/* ---------- Gift cards: a card that turns in 3D and shows what you type ---------- */
.gift{display:grid;gap:20px;align-items:start}
.gcard-stage{display:grid;gap:12px;justify-items:center;padding:14px 0 4px}
.gcard{width:min(100%,460px);aspect-ratio:1200/756;perspective:1400px;cursor:grab;touch-action:pan-y;outline:none;-webkit-tap-highlight-color:transparent;user-select:none}
.gcard.is-dragging{cursor:grabbing}
.gcard--still{cursor:default}
.gcard__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .75s var(--ease-bounce)}
.gcard.is-dragging .gcard__inner{transition:none}
.gcard.is-tilting .gcard__inner{transition:transform .18s ease-out}
.gcard:focus-visible .gcard__face{outline:4px solid var(--green-500);outline-offset:3px}
.gcard__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.7%/7.4%;overflow:hidden;box-shadow:0 18px 40px rgba(27,70,52,.35),0 4px 0 rgba(102,217,161,.55)}
.gcard__front img{display:block;width:100%;height:100%;pointer-events:none}
.gcard__amount{position:absolute;right:5.5%;bottom:7%;font:400 clamp(26px,8vw,46px)/1 var(--font-display);color:#fff;text-shadow:.06em .06em 0 var(--green-400)}
.gcard__to{position:absolute;left:19%;bottom:22%;max-width:36%;overflow:hidden;font:400 clamp(15px,4.2vw,24px)/1.1 var(--font-hand);color:var(--green-300);white-space:nowrap;text-overflow:ellipsis}
.gcard__shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,25%) var(--sy,15%),rgba(255,255,255,.38),rgba(255,255,255,0) 46%);mix-blend-mode:soft-light}
.gcard__back{transform:rotateY(180deg);display:grid;align-content:start;padding:0 6% 5%;background:linear-gradient(160deg,#275A48,#1B4634);color:#fff}
.gcard__stripe{height:19%;margin:7% -7% 5%;background:#0E271D}
.gcard__sign{display:flex;align-items:center;min-height:15%;padding:2% 4%;border-radius:6px;background:repeating-linear-gradient(135deg,#F3FAEC 0 8px,#E7F5D9 8px 16px);color:var(--green-800);font:400 clamp(14px,3.7vw,21px)/1.15 var(--font-hand);overflow:hidden}
.gcard__from{margin:3% 0 0;font:400 clamp(14px,3.5vw,19px)/1.1 var(--font-hand);color:var(--green-300)}
.gcard__code{margin:4% 0 0;font:400 clamp(15px,4vw,23px)/1 var(--font-poster);letter-spacing:.12em}
.gcard__small{margin:3% 0 0;max-width:70%;font-size:clamp(9px,2.3vw,12px);line-height:1.35;color:rgba(255,255,255,.78)}
.gcard__cat{position:absolute;right:6%;bottom:8%;width:13%;height:auto}
.gcard-acts{display:flex;align-items:center;gap:10px}
.gcard-hint{font:400 17px/1 var(--font-hand);color:var(--green-700)}
.amounts{display:flex;flex-wrap:wrap;gap:8px}
.amount-chip{position:relative;display:inline-flex;align-items:center;height:42px;padding:0 16px;border:2px solid var(--green-800);border-radius:var(--radius-pill);background:#fff;color:var(--green-800);font:400 21px/1 var(--font-hand);cursor:pointer;box-shadow:var(--shadow-pop-sm)}
.amount-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.amount-chip:has(input:checked){background:var(--green-800);color:#fff}
.amount-chip:has(input:focus-visible){outline:3px solid var(--green-500);outline-offset:2px}
.pay-choice{display:grid;gap:8px}
.pay-choice .check{padding:10px 12px;border:2px solid var(--green-200);border-radius:var(--radius-md)}
.pay-choice .check:has(input:checked){border-color:var(--green-800);background:var(--green-50)}
@media (min-width:900px){.gift{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.gcard-stage{position:sticky;top:96px}}
@media (prefers-reduced-motion:reduce){.gcard__inner{transition:none}}

/* ---------- Photo uploads (menu items, reviews, carousel) ---------- */
.dropzone{display:grid;gap:12px}
.dropzone__label{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:2px dashed var(--green-800);border-radius:var(--radius-lg);background:var(--green-50);color:var(--green-800);cursor:pointer}
.dropzone__label svg{flex:none;width:30px;height:30px}
.dropzone__label span{display:grid;gap:2px}
.dropzone__label b{font:400 19px/1 var(--font-poster);letter-spacing:var(--tracking-poster);text-transform:uppercase}
.dropzone__label small{font-size:13px;color:var(--text-muted)}
.dropzone__label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone__label:focus-within{outline:3px solid var(--green-500);outline-offset:2px}
.dropzone__previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.dropzone__previews figure{margin:0;display:grid;gap:4px;font-size:11px;color:var(--text-muted);text-align:center}
.dropzone__previews img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--green-800);border-radius:var(--radius-sm)}

/* ---------- Reviews: carousel, stars, photos ---------- */
.carousel{position:relative;overflow:hidden;border:2px solid var(--green-800);border-radius:var(--radius-xl);background:var(--green-50);box-shadow:var(--shadow-pop)}
.carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:3px solid var(--green-500);outline-offset:-3px}
.carousel__slide{position:relative;flex:0 0 100%;margin:0;aspect-ratio:3/2;scroll-snap-align:center}
.carousel__slide img{width:100%;height:100%;object-fit:cover}
.carousel__slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 34px;background:linear-gradient(transparent,rgba(27,70,52,.82));color:#fff;font:400 clamp(18px,4vw,24px)/1.2 var(--font-hand)}
.carousel__nav{position:absolute;top:50%;display:grid;place-items:center;width:42px;height:42px;margin-top:-21px;padding:0;border:2px solid var(--green-800);border-radius:50%;background:rgba(255,255,255,.94);color:var(--green-800);box-shadow:var(--shadow-pop-sm);cursor:pointer}
.carousel__nav svg{width:20px;height:20px}
.carousel__nav--prev{left:10px}
.carousel__nav--next{right:10px}
.carousel__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.carousel__dot{width:10px;height:10px;padding:0;border:2px solid #fff;border-radius:999px;background:rgba(255,255,255,.5);cursor:pointer;transition:width var(--dur-base) var(--ease-out)}
.carousel__dot[aria-current="true"]{width:26px;background:#fff}
@media (hover:none){.carousel__nav{display:none}}
.stars__off{color:var(--grey-200)}
.review{display:grid;gap:10px}
.review__pics{display:flex;flex-wrap:wrap;gap:8px}
.review__pics img{width:84px;height:84px;object-fit:cover;border:2px solid var(--green-800);border-radius:var(--radius-md)}
.rate{border:0;margin:0;padding:0}
.rate legend{font-size:12px;font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--green-800);margin-bottom:6px}
.rate__stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.rate__stars input{position:absolute;opacity:0;width:1px;height:1px}
.rate__stars label{font-size:38px;line-height:1;color:var(--grey-200);cursor:pointer;transition:transform var(--dur-base) var(--ease-bounce),color var(--dur-fast)}
.rate__stars input:checked ~ label,.rate__stars label:hover,.rate__stars label:hover ~ label{color:#F2B233}
.rate__stars input:focus-visible + label{outline:3px solid var(--green-500);outline-offset:2px;border-radius:6px}
@media (hover:hover){.rate__stars label:hover{transform:scale(1.15)}}
dialog.lightbox{max-width:min(92vw,720px);padding:0;border:3px solid var(--green-800);border-radius:var(--radius-lg);background:#fff}
dialog.lightbox::backdrop{background:rgba(27,70,52,.75)}
dialog.lightbox img{display:block;width:100%;height:auto}