.ib-panel.is-extras-open { height: min(100dvh, 900px) !important; max-height: 100dvh !important; overflow: hidden !important; }
.ib-extras-panel[hidden] { display: none !important; }
.ib-extras-panel { position: absolute; inset: 0; z-index: 1000; display: flex; flex-direction: column; min-height: 0; background: #fff; color: #161616; border-radius: inherit; overflow: hidden; font: 14px/1.4 'Instrument Sans', sans-serif; }
.ib-extras-header { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; gap: 4px; flex: 0 0 auto; padding: 4px 6px; border-bottom: 1px solid #e5e5e5; background: #fff; }
.ib-extras-header button { border: 0; color: #161616; background: transparent; cursor: pointer; font: inherit; min-height: 44px; padding: 8px; }
.ib-extras-back { font-weight: 600 !important; justify-self: start; white-space: nowrap; }
.ib-extras-close { font-size: 28px !important; min-width: 44px; justify-self: end; line-height: 1 !important; }
.ib-extras-heading { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1 1 auto; min-width: 0; padding: 0; text-align: center; }
.ib-extras-heading strong { font-size: 15px; line-height: 1.2; }
.ib-extras-heading span { font-size: 11px; color: #555; }
.ib-extras-frame-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; overscroll-behavior: contain; }
.ib-extras-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ib-extras-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 4px 16px max(4px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e5e5; background: #fff; font-size: 11px; }
.ib-extras-footer a { display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; color: #161616; text-decoration: underline; }
.ib-extras-header button:focus-visible, .ib-extras-footer a:focus-visible { outline: 2px solid #161616; outline-offset: -2px; }
@media (max-width: 480px) { .ib-panel.is-extras-open { height: 100dvh !important; max-height: 100dvh !important; } }

/* Card under a subscriber-extras reply (Mark 2026-10-23: aligned, roomy, one clear action). */
#productsGrid .ib-product--extras { padding: 12px !important; border-radius: 12px !important; }
#productsGrid .ib-product--extras .ib-product-inner { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 12px !important; align-items: center !important; }
#productsGrid .ib-product--extras .ib-product-img { width: 48px !important; height: 48px !important; grid-column: 1 !important; grid-row: 1 !important; }
#productsGrid .ib-product--extras .ib-product-copy { display: contents !important; }
#productsGrid .ib-product--extras h4 { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; margin: 0 !important; font-size: 14px !important; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#productsGrid .ib-product--extras p.ib-product-deal { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; display: none !important; }
#productsGrid .ib-product--extras h4::after { content: none !important; }
#productsGrid .ib-product--extras .ib-product-commerce { grid-column: 1 / -1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; gap: 8px !important; width: 100% !important; max-width: none !important; margin: 0 !important; flex: none !important; }
#productsGrid .ib-product--extras .ib-variant-select-wrap { min-width: 0 !important; }
#productsGrid .ib-product--extras .ib-variant-select { height: 44px !important; padding: 0 28px 0 12px !important; font-size: 13px !important; border-radius: 10px !important; border-color: #d4d4d8 !important; background-position: right 12px center !important; }
#productsGrid .ib-product--extras.ib-product--one-pack .ib-variant-select { appearance: none !important; -webkit-appearance: none !important; background-image: none !important; padding: 0 12px !important; pointer-events: none !important; color: #1b1c1f !important; background-color: #f4f4f5 !important; border-color: #f4f4f5 !important; text-align: center !important; text-align-last: center !important; }
#productsGrid .ib-product--extras .ib-btn-order { width: 100% !important; height: 44px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 10px !important; white-space: nowrap !important; }
#productsGrid .ib-product--extras .ib-sub-tick, #productsGrid .ib-product--extras .ib-save-link, #productsGrid .ib-product--extras .ib-refill, #productsGrid .ib-product--extras .ib-product-from { display: none !important; }
#productsGrid .ib-product--extras .ib-extras-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; line-height: 1.3; color: #286044; }

/* Normal shopping card: same layout as the extras card (Mark 2026-10-23 "it should look exactly like this").
   Row 1 thumbnail + title + live price. Row 2 pack picker + Add to cart. Row 3 quiet auto-refill switch + Save N%. */
#productsGrid .ib-product--shop { padding: 12px !important; border-radius: 12px !important; }
#productsGrid .ib-product--shop .ib-product-inner { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 12px !important; align-items: center !important; }
#productsGrid .ib-product--shop .ib-product-img { width: 48px !important; height: 48px !important; grid-column: 1 !important; grid-row: 1 !important; }
#productsGrid .ib-product--shop .ib-product-copy { display: contents !important; }
#productsGrid .ib-product--shop h4 { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; margin: 0 !important; font-size: 14px !important; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#productsGrid .ib-product--shop h4::after { content: none !important; }
#productsGrid .ib-product--shop p.ib-product-deal, #productsGrid .ib-product--shop .ib-product-from { display: none !important; }
#productsGrid .ib-product--shop .ib-price-line { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #1b1c1f; font-variant-numeric: tabular-nums; }
#productsGrid .ib-product--shop .ib-price-line.is-refill { color: #286044; }
#productsGrid .ib-product--shop .ib-product-commerce { grid-column: 1 / -1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; gap: 8px !important; width: 100% !important; max-width: none !important; margin: 0 !important; flex: none !important; }
#productsGrid .ib-product--shop .ib-variant-select-wrap { min-width: 0 !important; }
#productsGrid .ib-product--shop .ib-variant-select { width: 100% !important; height: 44px !important; padding: 0 28px 0 12px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 10px !important; border-color: #d4d4d8 !important; background-position: right 12px center !important; }
#productsGrid .ib-product--shop.ib-product--single .ib-variant-select { appearance: none !important; -webkit-appearance: none !important; background-image: none !important; padding: 0 12px !important; pointer-events: none !important; color: #1b1c1f !important; background-color: #f4f4f5 !important; border-color: #f4f4f5 !important; text-align: center !important; text-align-last: center !important; }
#productsGrid .ib-product--shop .ib-btn-order { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 12px !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 10px !important; white-space: nowrap !important; }
#productsGrid .ib-product--shop .ib-refill-row { grid-column: 1 / -1 !important; grid-row: 3 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: -2px 0 0 !important; min-height: 28px; }
#productsGrid .ib-product--shop .ib-refill-row[hidden] { display: none !important; }
#productsGrid .ib-product--shop .ib-sub-tick { gap: 8px !important; min-height: 28px !important; }
#productsGrid .ib-product--shop .ib-sub-tick .ib-sub-text { font-size: 12px !important; font-weight: 500 !important; color: #1b1c1f !important; }
#productsGrid .ib-product--shop .ib-save-link { font-size: 12px !important; font-weight: 600 !important; padding: 4px 0 !important; color: #286044 !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
#productsGrid .ib-product--shop .ib-save-link.ib-save-off { color: #8a8b90 !important; text-decoration-line: underline line-through !important; }
#productsGrid .ib-product--shop .ib-refill { grid-column: 1 / -1 !important; grid-row: 4 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important; gap: 8px !important; align-items: center !important; flex: none !important; width: 100% !important; margin: -4px 0 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
#productsGrid .ib-product--shop .ib-refill[hidden] { display: none !important; }
#productsGrid .ib-product--shop .ib-refill-text { padding-left: 2px; font-size: 12px !important; font-weight: 500 !important; color: #55565b !important; }
#productsGrid .ib-product--shop .ib-refill .ib-freq { width: 100% !important; min-width: 0 !important; height: 40px !important; border-radius: 10px !important; border: 1px solid #d4d4d8 !important; background-color: #fff !important; font-size: 13px !important; font-weight: 600 !important; padding: 0 28px 0 12px !important; }