/**
 * Ordivity storefront — customer-facing styles (light theme).
 *
 * Clean white surface with the platform green (#22c55e) accent, matching the
 * other customer-facing pages (registration/cashier) and the familiar
 * WhatsOrder-style menu layout. Mobile-first; the cart becomes a sticky panel
 * on desktop.
 *
 * @version 0.4.0
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

.ordv-sf {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	background: #f4f5f7;
	color: #1f2937;
	line-height: 1.5;
	min-height: 100vh;
}

/* Header
   v0.25.3 — the header used to be a 1080px block centred with `margin: 0 auto`,
   but v0.25.1's overflow fix relaxed .ordv-sf-layout to max-width:100% — so the
   MENU went full-bleed while the HEADER stayed capped and centred, and on a wide
   desktop the logo/details floated in from the left edge of the content below.
   The header now shares the layout's box: flush left, same 18px gutter, so the
   logo lines up with the first menu card. */
.ordv-sf-header { background: #fff; border-bottom: 1px solid #eceef1; }
.ordv-sf-header-inner { max-width: 100%; margin: 0; padding: 22px 18px; display: flex; gap: 18px; align-items: center; justify-content: flex-start; }
/* The install pill inherits text-align:center from its own module; inside the
   storefront header it belongs on the left with everything else. */
.ordv-sf-header .afc-pwa-cta { text-align: left; }
.ordv-sf-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; flex-shrink: 0; }
.ordv-sf-kicker { font-size: 0.7rem; letter-spacing: 0.08em; color: #9ca3af; font-weight: 700; }
.ordv-sf-titles h1 { font-size: 1.5rem; color: #111827; margin: 2px 0 4px; }
.ordv-sf-meta { font-size: 0.85rem; color: #6b7280; }
.ordv-sf-blurb { color: #9ca3af; font-style: italic; }
.ordv-sf-status { display: inline-block; margin-top: 8px; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ordv-sf-status.is-open { background: #dcfce7; color: #15803d; }
.ordv-sf-status.is-closed { background: #fee2e2; color: #b91c1c; }

/* Layout */
.ordv-sf-layout { max-width: 1080px; margin: 0 auto; padding: 18px; display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }

/* Menu */
.ordv-sf-catnav { position: sticky; top: 0; z-index: 5; background: #f4f5f7; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.ordv-sf-catnav a { flex-shrink: 0; padding: 7px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; color: #374151; text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.ordv-sf-catnav a:hover { border-color: #22c55e; color: #15803d; }

.ordv-sf-cat { margin-bottom: 26px; scroll-margin-top: 64px; }
.ordv-sf-cat h2 { font-size: 1.15rem; color: #111827; margin-bottom: 12px; }

.ordv-sf-item { background: #fff; border: 1px solid #eceef1; border-radius: 14px; padding: 12px; display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.ordv-sf-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.ordv-sf-item-body { flex: 1; min-width: 0; }
.ordv-sf-item-name { font-weight: 600; color: #111827; }
.ordv-sf-item-desc { font-size: 0.85rem; color: #6b7280; margin-top: 2px; }
.ordv-sf-item-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ordv-sf-item-price { font-weight: 700; color: #111827; white-space: nowrap; }
.ordv-sf-add { width: 34px; height: 34px; border-radius: 50%; border: none; background: #22c55e; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ordv-sf-add:hover { background: #16a34a; }
/* v0.33.0 — items with modifiers/extras: outline button (green border, white
   fill, green +) signals "opens options" rather than "adds instantly". Uses
   the darker green (#16a34a) for AA-legible contrast on white. Same 34/44px
   hit-target as the solid button — nothing shifts. */
.ordv-sf-add--opts { background: #fff; border: 2px solid #16a34a; color: #16a34a; }
.ordv-sf-add--opts:hover { background: #f0fdf4; }

/* Cart */
.ordv-sf-cart { background: #fff; border: 1px solid #eceef1; border-radius: 16px; padding: 18px; position: sticky; top: 18px; }
.ordv-sf-cart h3 { font-size: 1.05rem; margin-bottom: 12px; }
.ordv-sf-fulfil { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.ordv-sf-fulfil button { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 8px; font-weight: 600; color: #6b7280; cursor: pointer; }
.ordv-sf-fulfil button.is-active { background: #22c55e; color: #fff; }

.ordv-sf-cart-empty { color: #9ca3af; text-align: center; padding: 20px 0; font-size: 0.9rem; }
.ordv-sf-line { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.ordv-sf-line-name { font-weight: 600; font-size: 0.92rem; }
.ordv-sf-line-mods { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.ordv-sf-line-side { text-align: right; white-space: nowrap; }
.ordv-sf-line-price { font-weight: 700; font-size: 0.9rem; }
.ordv-sf-line-remove { background: none; border: none; color: #ef4444; font-size: 0.78rem; cursor: pointer; padding: 2px 0; }

.ordv-sf-totals { margin-top: 14px; border-top: 1px solid #eceef1; padding-top: 12px; }
.ordv-sf-totals .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 3px 0; color: #4b5563; }
.ordv-sf-totals .row.total { font-size: 1.05rem; font-weight: 700; color: #111827; margin-top: 4px; }

.ordv-sf-details { margin-top: 16px; }
.ordv-sf-details h4 { font-size: 0.95rem; margin-bottom: 10px; }
.ordv-sf-details label { display: block; font-size: 0.82rem; color: #4b5563; font-weight: 600; margin-bottom: 10px; }
.ordv-sf-details input, .ordv-sf-details textarea { width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; font-family: inherit; }
.ordv-sf-details input:focus, .ordv-sf-details textarea:focus { outline: none; border-color: #22c55e; }

.ordv-sf-errors { margin-top: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; }
.ordv-sf-errors div { color: #b91c1c; font-size: 0.85rem; }
.ordv-sf-errors div + div { margin-top: 4px; }

.ordv-sf-cta { width: 100%; margin-top: 14px; padding: 14px; background: #22c55e; color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; }
/* v0.21.0 — anchor CTAs (Pay now, Telegram) render like the button version:
   width:100% is meaningless on an inline <a>, which made them collapse and
   float mid-text on the status page. */
a.ordv-sf-cta { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.ordv-status-card a.ordv-sf-cta { margin: 16px 0 8px; }
.ordv-sf-cta:hover { background: #16a34a; }
.ordv-sf-cta:disabled { background: #d1d5db; cursor: not-allowed; }
.ordv-sf-soon { margin-top: 10px; font-size: 0.82rem; color: #15803d; background: #dcfce7; border-radius: 8px; padding: 10px 12px; text-align: center; }

.ordv-sf-empty { background: #fff; border-radius: 14px; padding: 40px; text-align: center; color: #9ca3af; }

/* Modifier modal */
.ordv-sf-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 9999; }
.ordv-sf-modal[hidden] { display: none; }
.ordv-sf-modal-box { background: #fff; width: 100%; max-width: 480px; border-radius: 18px 18px 0 0; padding: 22px; max-height: 88vh; overflow-y: auto; position: relative; }
.ordv-sf-modal-box h3 { font-size: 1.15rem; margin-bottom: 14px; padding-right: 30px; }
.ordv-sf-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: none; background: #f3f4f6; font-size: 1.2rem; cursor: pointer; color: #6b7280; }

.ordv-sf-modgroup { margin-bottom: 16px; }
.ordv-sf-modgroup-label { font-weight: 700; margin-bottom: 6px; }
.ordv-sf-req { color: #ef4444; }
.ordv-sf-modhint { font-size: 0.8rem; color: #9ca3af; margin-bottom: 6px; }
.ordv-sf-modopt { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f2f4; cursor: pointer; }
.ordv-sf-modopt input { width: 18px; height: 18px; accent-color: #22c55e; }
.ordv-sf-modopt-label { flex: 1; }
.ordv-sf-modopt-price { color: #16a34a; font-weight: 600; font-size: 0.9rem; }

.ordv-sf-modal-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; position: sticky; bottom: 0; background: #fff; padding-top: 10px; }
.ordv-sf-modal-foot .ordv-sf-cta { margin-top: 0; flex: 1; }
.ordv-sf-modal-qty { display: flex; align-items: center; gap: 12px; background: #f3f4f6; border-radius: 10px; padding: 6px 12px; }
.ordv-sf-modal-qty button { width: 28px; height: 28px; border: none; background: #fff; border-radius: 6px; font-size: 1.1rem; cursor: pointer; }
.ordv-sf-modal-qty span { min-width: 18px; text-align: center; font-weight: 700; }

/* Desktop tweaks */
@media (min-width: 861px) {
	.ordv-sf-modal { align-items: center; }
	.ordv-sf-modal-box { border-radius: 18px; }
}

/* Mobile stacking */
@media (max-width: 860px) {
	.ordv-sf-layout { grid-template-columns: 1fr; }
	.ordv-sf-cart { position: static; order: 2; }
	.ordv-sf-menu { order: 1; }
}

/* =========================================================================
   Order status page
   ========================================================================= */
.ordv-status-wrap { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
.ordv-status-card { background: #fff; border: 1px solid #eceef1; border-radius: 18px; padding: 26px; text-align: center; }
.ordv-status-emoji { font-size: 2.4rem; }
.ordv-status-card h1 { font-size: 1.35rem; color: #111827; margin: 8px 0 4px; }
.ordv-status-sub { color: #6b7280; font-size: 0.95rem; margin-bottom: 18px; }
.ordv-status-sub strong { color: #111827; }

.ordv-status-note { background: #f3f4f6; border-radius: 10px; padding: 12px 14px; font-size: 0.88rem; color: #4b5563; margin: 12px 0; text-align: left; }
.ordv-status-note a { color: #15803d; font-weight: 600; }
.ordv-status-ok { background: #dcfce7; color: #15803d; }
.ordv-status-warn { background: #fef9c3; color: #854d0e; }

.ordv-status-summary { text-align: left; border: 1px solid #eceef1; border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.ordv-status-row-head { font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin-bottom: 8px; }
.ordv-status-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f2f4; }
.ordv-status-line-name { font-weight: 600; font-size: 0.92rem; }
.ordv-status-line-mods { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.ordv-status-line-price { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.ordv-status-totrow { display: flex; justify-content: space-between; font-size: 0.9rem; color: #4b5563; padding: 4px 0; }
.ordv-status-totrow.total { font-size: 1.05rem; font-weight: 700; color: #111827; border-top: 1px solid #eceef1; margin-top: 6px; padding-top: 8px; }

.ordv-wa-btn { display: block; background: #25D366; margin-top: 8px; }
.ordv-wa-btn:hover { background: #1ebe5a; }
.ordv-status-hint { font-size: 0.8rem; color: #9ca3af; margin-top: 10px; }

/* v0.27.0 — prep-time promise line ("Estimated ready around 19:25")
   v0.34.0 — enlarged to match the status heading (.ordv-status-card h1,
   1.35rem): the delivery/collection time is a headline detail for the
   customer, so it now reads at the same weight as "Being prepared". */
.ordv-status-eta { margin-top: 10px; font-size: 1.35rem; font-weight: 700; color: #15803d; line-height: 1.25; }
.ordv-status-eta.hidden { display: none; }

/* v0.26.1 — "Return to My Orders" on the status page: quiet outline
   navigation (never competes with Pay now / Telegram action CTAs) */
.ordv-status-back { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #374151; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; }
.ordv-status-back:active { transform: scale(0.98); background: #f9fafb; }

/* Loyalty opt-in (storefront) */
.ordv-sf-optin { display: flex !important; align-items: flex-start; gap: 10px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px !important; cursor: pointer; }
.ordv-sf-optin input { width: 18px; height: 18px; margin-top: 2px; accent-color: #22c55e; flex-shrink: 0; }
.ordv-sf-optin span { font-weight: 600; color: #15803d; font-size: 0.9rem; }
.ordv-sf-optin small { display: block; font-weight: 400; color: #6b7280; margin-top: 2px; }

/* Reward banner (status page) */
.ordv-status-reward { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.ordv-status-reward strong { color: #166534; }
.ordv-status-reward-sub { font-size: 0.8rem; color: #6b7280; margin-top: 4px; }

/* v0.23.0 — verified identity handoff (arrived from the loyalty landing page).
   Name + contact number are shown READ-ONLY: they identify the loyalty account
   the rewards are redeemed against, so they are not the customer's to retype
   here. (The real enforcement is server-side — see place_order(); this styling
   just makes the state legible.) The delivery address stays fully editable. */
.ordv-sf-idnote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	padding: 10px 12px;
	border: 1px solid #bbf7d0;
	border-radius: 10px;
	background: #f0fdf4;
	color: #166534;
	font-size: 13px;
	line-height: 1.45;
}
/* v0.25.3 — .ordv-sf-notme (the order-page "Not you?" link) is REMOVED. Identity
   is switched on the loyalty landing page now, in one place, with one meaning. */
input.ordv-sf-locked {
	background: #f3f4f6;
	color: #4b5563;
	cursor: not-allowed;
}

/* =========================================================================
   v0.25.0 — PHONE PASS
   =========================================================================
   The storefront had exactly ONE breakpoint (860px) and all it did was stack
   the two columns. Everything else was desktop-first: a 72px logo, 18px layout
   padding on top of 12px card padding, 15px inputs. On a 360px phone — which is
   how virtually every customer arrives, straight off a printed QR code — that
   left roughly 150px of usable width for an item's name, description, price AND
   its add button, and tapping any field made Safari zoom the whole page.

   Two things happen below:
     1. The cart becomes a BOTTOM SHEET, so nobody scrolls a 50-item menu to
        check out. Same panel, same form — just presented as a sheet.
     2. The phone defects get fixed (16px inputs, 44px targets, honest spacing).
   ========================================================================= */

/* ---- Sheet chrome: mobile only; invisible on desktop -------------------- */
.ordv-sf-sheet-chrome { display: none; }

@media (max-width: 860px) {
	/* The scrim behind the sheet. */
	#ordvCartScrim {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 9998;
		opacity: 0;
		transition: opacity 0.22s ease;
	}
	#ordvCartScrim[hidden] { display: none; }
	#ordvCartScrim.is-open { opacity: 1; }

	/* The cart IS the sheet. Parked off-screen until opened. */
	.ordv-sf-cart {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 9999;
		margin: 0;
		border-radius: 18px 18px 0 0;
		border: none;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
		max-height: 88vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 16px calc(16px + env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
		visibility: hidden;
	}
	.ordv-sf-cart.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	/* Grab handle + close, sticky at the top of the scrolling sheet. */
	.ordv-sf-sheet-chrome {
		display: block;
		position: sticky;
		top: 0;
		z-index: 2;
		background: #fff;
		padding: 10px 0 8px;
		margin: 0 -16px 4px;
		border-radius: 18px 18px 0 0;
	}
	.ordv-sf-sheet-grip {
		width: 44px;
		height: 5px;
		border-radius: 999px;
		background: #d1d5db;
		margin: 0 auto;
	}
	.ordv-sf-sheet-close {
		position: absolute;
		top: 4px;
		right: 10px;
		width: 44px;   /* 44px: a real tap target, not a 30px dot */
		height: 44px;
		border: none;
		background: transparent;
		color: #6b7280;
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
	}

	/* Lock the page behind an open sheet — otherwise the menu scrolls under it. */
	body.ordv-sheet-open { overflow: hidden; }

	/* The checkout bar hides while the sheet is up (it's the thing that opened it). */
	body.ordv-sheet-open #ordvMobileBar { display: none !important; }
}

/* ---- Phone sizing ------------------------------------------------------- */
@media (max-width: 600px) {
	/* Header: 72px of logo and 22px of padding is a desktop budget. */
	.ordv-sf-header-inner { padding: 14px; gap: 12px; }
	.ordv-sf-logo { width: 52px; height: 52px; }
	.ordv-sf-titles h1 { font-size: 1.2rem; }
	.ordv-sf-meta { font-size: 0.8rem; }

	.ordv-sf-layout { padding: 12px; gap: 14px; }

	/* Category nav clears the top edge and the anchor offset matches it. */
	.ordv-sf-catnav { padding: 6px 0; }
	.ordv-sf-cat { margin-bottom: 20px; scroll-margin-top: 56px; }
	.ordv-sf-cat h2 { font-size: 1.05rem; margin-bottom: 8px; }

	/* Item rows: reclaim the ~40px that padding and gaps were eating, so the
	   name, price and + button stop fighting over the same 150px. */
	.ordv-sf-item { padding: 10px; gap: 10px; border-radius: 12px; margin-bottom: 8px; }
	.ordv-sf-item-img { width: 56px; height: 56px; border-radius: 8px; }
	.ordv-sf-item-name { font-size: 0.95rem; }
	.ordv-sf-item-desc {
		font-size: 0.8rem;
		/* Two lines, then ellipsis. A four-line description on a phone pushes
		   the price out of the row and makes every card a different height. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.ordv-sf-item-price { font-size: 0.9rem; }

	/* 44px minimum tap target on the primary action of the whole page. */
	.ordv-sf-add { width: 44px; height: 44px; font-size: 1.5rem; }
	.ordv-sf-item-side { gap: 6px; }

	/* iOS force-zooms the viewport on focus of ANY input under 16px. At 0.95rem
	   (15.2px) every customer typing their address got the page lurching and
	   had to pinch back out. 16px is the fix — it is not a style choice. */
	.ordv-sf-details input,
	.ordv-sf-details textarea { font-size: 16px; padding: 12px; }
	.ordv-sf-details label { margin-bottom: 12px; }

	.ordv-sf-cta { padding: 15px; font-size: 1.02rem; }
	.ordv-sf-fulfil button { padding: 12px 9px; }

	/* Modifier sheet: same 16px rule, same 44px rule. */
	.ordv-sf-modal-box { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
	.ordv-sf-modopt { padding: 12px 0; }
	.ordv-sf-modal-qty button { width: 36px; height: 36px; }
}

/* =========================================================================
   v0.25.1 — OVERFLOW GUARDS (the "scroll right to find the + button" bug)
   =========================================================================
   Reported on a real phone: the menu ran off the right edge, the price and the
   add button were off-screen, and the cart was somewhere out in the horizontal
   scroll. Root cause is a CSS default that bites specifically in Grid:

     A GRID CHILD DEFAULTS TO min-width: auto, NOT 0.

   So .ordv-sf-menu — the left column of .ordv-sf-layout — will refuse to shrink
   below the min-content width of the widest thing inside it, and instead pushes
   the whole grid (including the 360px cart column) wider than the screen. One
   long item name, one un-wrappable token, one wide image, and the entire page
   overflows sideways. The stacking rule at 860px only changes the COLUMN COUNT;
   it never told the column it was allowed to be narrow.

   Everything below is a guard, not a style. They are cheap, and they make the
   failure mode structurally impossible rather than merely unlikely.
   ========================================================================= */

/* 1. The grid children may shrink. This is the actual fix. */
.ordv-sf-menu,
.ordv-sf-cart { min-width: 0; }

/* 2. Nothing in the storefront may exceed the screen. */
.ordv-sf-layout { max-width: 100%; }
.ordv-sf-cat,
.ordv-sf-item { min-width: 0; max-width: 100%; }

/* 3. Long words / URLs / unbroken tokens in a name or description can no longer
      force a row wider than its card. */
.ordv-sf-item-name,
.ordv-sf-item-desc,
.ordv-sf-line-name { overflow-wrap: anywhere; word-break: break-word; }

/* 4. The price + add button are the POINT of the row. They never shrink and are
      never the thing pushed off-screen. */
.ordv-sf-item-side { flex: 0 0 auto; }

/* 5. Backstop: even if something new sneaks in, the customer never gets a
      sideways-scrolling storefront. Vertical scrolling is untouched. */
.ordv-sf { overflow-x: hidden; }

/* =========================================================================
   v0.38.0 — Promotions / Deals (customer storefront)
   Same visual language as the item cards; the badge uses the storefront's
   established green (#3fb950 accents on dark).
   ========================================================================= */
.ordv-sf-dealbadge {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 2px 7px; margin-right: 6px; border-radius: 6px;
	background: rgba(63,185,80,0.16); color: #3fb950;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
	vertical-align: middle;
}
.ordv-sf-item--deal { border-color: rgba(63,185,80,0.35); }

/* Component section header inside the configure modal. */
.ordv-sf-dealsec {
	margin: 14px 0 6px; padding: 7px 10px; border-radius: 8px;
	background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.25);
	font-weight: 700; font-size: 0.9rem;
}

/* A pinned (vendor-locked) option: visibly part of the deal, not clickable. */
.ordv-sf-modopt--locked { opacity: 0.75; cursor: default; }
.ordv-sf-modopt--locked .ordv-sf-modopt-price { font-style: italic; font-size: 0.78rem; }

/* v0.39.0 — choice-slot picker in the deal modal */
.ordv-sf-dealpick { width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 0.95rem; }
.ordv-sf-dealunit { margin-bottom: 4px; }