/* =========================================================================
   5Star — Single Product (Product Details) — modern, compact
   Scoped to .fivestar-pdp-wrap / .fivestar-product. v1.19
   ========================================================================= */
.fivestar-pdp-wrap{
	--fs-navy:#002855;
	--fs-navy-deep:#063469;
	--fs-blue:#406E99;
	--fs-cyan:#009FDB;
	--fs-tint:#E6F6FC;
	--fs-panel:#F6F9FC;
	--fs-border:#E4EAF0;
	--fs-muted:#5A6473;
	--fs-white:#FFFFFF;
	--fs-radius:14px;
	--fs-radius-sm:9px;
	--fs-shadow:0 12px 34px -20px rgba(0,40,85,.38);
	--fs-shadow-sm:0 4px 14px -10px rgba(0,40,85,.30);
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	color:var(--fs-navy);
	max-width:1080px;
	margin:0 auto;
	padding:22px 20px 56px;
	box-sizing:border-box;
}
.fivestar-pdp-wrap *,
.fivestar-pdp-wrap *::before,
.fivestar-pdp-wrap *::after{ box-sizing:border-box; }

/* Breadcrumb ------------------------------------------------------------- */
.fivestar-breadcrumb{ font-size:12.5px; color:var(--fs-muted); margin-bottom:18px; }
.fivestar-breadcrumb a{ color:var(--fs-blue); text-decoration:none; }
.fivestar-breadcrumb a:hover{ color:var(--fs-cyan); }

/* Two-column layout — gallery is a FIXED, compact column ------------------ */
.fivestar-product__grid{
	display:grid;
	grid-template-columns:minmax(0,380px) minmax(0,1fr);
	gap:44px;
	align-items:start;
}

/* Gallery (capped so the image is never oversized) ----------------------- */
.fivestar-product__media{
	position:relative;
	background:var(--fs-white);
	border:1px solid var(--fs-border);
	border-radius:var(--fs-radius);
	padding:14px;
	box-shadow:var(--fs-shadow-sm);
}
.fivestar-product__media .woocommerce-product-gallery{ margin:0; max-width:100%; }
.fivestar-product__media .woocommerce-product-gallery__wrapper{ margin:0; }
.fivestar-product__media .woocommerce-product-gallery__image{ margin:0; }
.fivestar-product__media .woocommerce-product-gallery__image img{
	border-radius:var(--fs-radius-sm);
	max-height:360px;
	width:auto;
	max-width:100%;
	margin:0 auto;
	display:block;
	object-fit:contain;
}
/* QA v2 #2 — no zoom, no magnifier on the primary image.
   The real removal is remove_theme_support() in functions.php; these rules are
   the safety net for markup that reaches the page anyway (a cached render, or a
   plugin re-declaring gallery support after our removals have run).

   Both features need covering, and they attach to different elements:
     .woocommerce-product-gallery__trigger  is the lightbox's magnifier anchor.
     .zoomImg is what jQuery-zoom appends INSIDE .woocommerce-product-gallery__image
     when initZoom() runs. Hiding only the trigger would leave a working
     hover-magnifier with its icon hidden — worse than either state.

   The click-through on the main image is handled in 5star-single-product.js, not
   here: WooCommerce wraps the image in <a href="{full-size}"> unconditionally, so
   with photoswipe gone nothing intercepts that click and it would navigate to a
   bare .jpg. pointer-events was the obvious CSS answer and is deliberately NOT
   used — it inherits to the <img>, which would take away right-click "Save image
   as", and it does not stop keyboard users reaching the link with Tab. */
.fivestar-product__media .woocommerce-product-gallery__trigger{ display:none !important; }
.fivestar-product__media .zoomImg{ display:none !important; }
.fivestar-product__media .woocommerce-product-gallery__image img{ cursor:default; }

.fivestar-product__media .onsale{
	position:absolute; top:12px; left:12px; z-index:5;
	background:var(--fs-cyan); color:#fff;
	font-size:11px; font-weight:600; letter-spacing:.02em;
	padding:5px 11px; border-radius:999px; min-height:0; line-height:1; margin:0;
}
.fivestar-product__media .flex-control-thumbs{ margin:12px 0 0; display:flex; gap:8px; flex-wrap:wrap; padding:0; justify-content:center; }
.fivestar-product__media .flex-control-thumbs li{ list-style:none; width:52px; margin:0; }
.fivestar-product__media .flex-control-thumbs img{
	border:1px solid var(--fs-border); border-radius:7px; padding:3px; background:#fff; opacity:.7; transition:.15s;
}
.fivestar-product__media .flex-control-thumbs img.flex-active,
.fivestar-product__media .flex-control-thumbs img:hover{ opacity:1; border-color:var(--fs-cyan); }

/* Summary ---------------------------------------------------------------- */
.fivestar-product__summary{ position:sticky; top:22px; min-width:0; }
@media (max-width:860px){ .fivestar-product__summary{ position:static; } }

.fivestar-eyebrow{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.fivestar-chip{
	display:inline-flex; align-items:center;
	background:var(--fs-tint); color:var(--fs-navy-deep);
	font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
	padding:4px 10px; border-radius:999px; border:1px solid #d3ecf8;
}
.fivestar-product__title{
	font-size:clamp(23px,2.4vw,30px); line-height:1.15; font-weight:800;
	letter-spacing:-.015em; color:var(--fs-navy); margin:0;
}
.fivestar-product__rating{ margin:12px 0 2px; }
.fivestar-product__rating .star-rating{ color:var(--fs-cyan); font-size:14px; }

.fivestar-product__price{ margin:12px 0 2px; }
.fivestar-product__price .price{
	font-size:24px; font-weight:800; color:var(--fs-navy); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0;
}
.fivestar-product__price del{ color:var(--fs-muted); font-weight:500; font-size:17px; opacity:.85; }
.fivestar-product__price ins{ text-decoration:none; }
.fivestar-product__price .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; }

.fivestar-product__excerpt{ color:var(--fs-muted); font-size:14.5px; line-height:1.6; margin:14px 0; }
.fivestar-product__excerpt p{ margin:0 0 8px; }

/* Add to cart / variations ---------------------------------------------- */
.fivestar-product__cart{
	background:var(--fs-panel); border:1px solid var(--fs-border);
	border-radius:var(--fs-radius); padding:18px; margin:6px 0 14px;
}
.fivestar-product__cart table.variations{ margin:0 0 12px; width:100%; border-collapse:collapse; }
.fivestar-product__cart table.variations tr{ display:block; margin-bottom:10px; }
.fivestar-product__cart table.variations th{
	display:block; text-align:left; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
	color:var(--fs-blue); padding:0 0 6px; width:auto;
}
.fivestar-product__cart table.variations td{ display:block; padding:0; }
.fivestar-product__cart select{
	width:100%; min-height:44px; padding:0 40px 0 13px; border:1px solid var(--fs-border);
	border-radius:var(--fs-radius-sm); background:#fff; color:var(--fs-navy); font-size:14.5px; font-family:inherit;
	appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23406E99' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 13px center;
}
.fivestar-product__cart select:focus{ outline:none; border-color:var(--fs-cyan); box-shadow:0 0 0 3px rgba(0,159,219,.18); }
.fivestar-product__cart .reset_variations{ display:inline-block; margin-top:6px; font-size:12.5px; color:var(--fs-blue); }
.fivestar-product__cart .woocommerce-variation{ margin-bottom:10px; }
.fivestar-product__cart .woocommerce-variation-price .price{ font-size:20px; font-weight:800; color:var(--fs-navy); }
.fivestar-product__cart .woocommerce-variation-availability{ font-size:13px; color:var(--fs-muted); }

/* QA v1 #11 — New / Upgrade / Lost are one device per request, so the quantity
   control is suppressed and only "Review request" shows.
   MKT_TM_Products::force_single_quantity() already makes WooCommerce render the
   hidden variant (min == max); this is the backstop if a future Woo template
   changes. Scoped to .fs-single-qty, which the PDP only emits for those three
   offerings — content-single-product.php is the SITE-WIDE single-product
   template, so an unscoped rule would also hide the spinner on accessories and
   any product with no offering alignment, where quantity is still meaningful. */
.fivestar-product.fs-single-qty .fivestar-product__cart .quantity{ display:none !important; }
.fivestar-product__cart .single_add_to_cart_button{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	min-height:48px; padding:0 26px; border:0; cursor:pointer;
	background:linear-gradient(180deg,var(--fs-cyan),#0089c2); color:#fff;
	font-size:15px; font-weight:700; letter-spacing:.01em; font-family:inherit;
	border-radius:999px; box-shadow:var(--fs-shadow-sm); transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.fivestar-product__cart .single_add_to_cart_button:hover{ transform:translateY(-1px); box-shadow:var(--fs-shadow); }
.fivestar-product__cart .single_add_to_cart_button.disabled{ opacity:.45; cursor:not-allowed; }

/* Meta ------------------------------------------------------------------- */
.fivestar-product__meta{ font-size:13px; color:var(--fs-muted); line-height:1.8; }
.fivestar-product__meta .sku_wrapper,
.fivestar-product__meta .posted_in,
.fivestar-product__meta .tagged_as{ display:block; }
.fivestar-product__meta a{ color:var(--fs-blue); text-decoration:none; }
.fivestar-product__meta a:hover{ color:var(--fs-cyan); }

/* Tabs / details --------------------------------------------------------- */
.fivestar-product__details{ margin-top:44px; }
.fivestar-product__details .woocommerce-tabs ul.tabs{
	display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 18px; border-bottom:1px solid var(--fs-border);
}
.fivestar-product__details .woocommerce-tabs ul.tabs::before{ display:none; }
.fivestar-product__details .woocommerce-tabs ul.tabs li{
	list-style:none; margin:0; padding:0; background:transparent; border:0; border-radius:0;
}
.fivestar-product__details .woocommerce-tabs ul.tabs li a{
	display:inline-block; padding:10px 4px; margin-bottom:-1px; font-weight:700; font-size:14px;
	color:var(--fs-muted); text-decoration:none; border-bottom:2.5px solid transparent;
}
.fivestar-product__details .woocommerce-tabs ul.tabs li.active a,
.fivestar-product__details .woocommerce-tabs ul.tabs li a:hover{ color:var(--fs-navy); border-bottom-color:var(--fs-cyan); }
.fivestar-product__details .woocommerce-tabs ul.tabs li::before,
.fivestar-product__details .woocommerce-tabs ul.tabs li::after{ display:none; }
.fivestar-product__details .woocommerce-Tabs-panel{ color:#2b3646; font-size:14.5px; line-height:1.68; }
.fivestar-product__details .woocommerce-Tabs-panel h2{ font-size:18px; color:var(--fs-navy); font-weight:800; margin-top:0; }
.fivestar-product__details table.shop_attributes{ border:1px solid var(--fs-border); border-radius:var(--fs-radius-sm); overflow:hidden; }
.fivestar-product__details table.shop_attributes th{ color:var(--fs-navy); background:var(--fs-panel); font-size:13.5px; }
.fivestar-product__details table.shop_attributes td{ color:var(--fs-muted); font-style:normal; font-size:13.5px; }

/* Responsive collapse ---------------------------------------------------- */
@media (max-width:860px){
	.fivestar-product__grid{ grid-template-columns:1fr; gap:24px; }
	.fivestar-product__media{ max-width:420px; margin:0 auto; }
}

/* Accessibility ---------------------------------------------------------- */
.fivestar-pdp-wrap a:focus-visible,
.fivestar-pdp-wrap button:focus-visible,
.fivestar-pdp-wrap select:focus-visible{ outline:3px solid rgba(0,159,219,.5); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
	.fivestar-pdp-wrap *{ transition:none !important; }
}

/* =========================================================================
   v1.2 — AT&T-inspired option tiles + sticky buy bar
   ========================================================================= */

/* Hide the native <select> once tiles are built (kept for Woo JS + a11y) */
.fivestar-product .fs-select-hidden{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Option tiles (Storage / Color / etc.) */
.fivestar-product .fs-swatches{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 2px; }
.fivestar-product .fs-swatch{
	appearance:none; cursor:pointer; font-family:inherit;
	display:flex; flex-direction:column; align-items:center; gap:3px;
	min-width:96px; padding:11px 16px; text-align:center;
	background:#fff; color:var(--fs-navy);
	border:1.5px solid var(--fs-border); border-radius:12px;
	line-height:1.2;
	transition:border-color .14s, box-shadow .14s, background .14s, transform .1s;
}
.fivestar-product .fs-swatch__cap{ font-size:14.5px; font-weight:700; }
.fivestar-product .fs-swatch__price{ font-size:12px; font-weight:600; color:var(--fs-muted); }
.fivestar-product .fs-swatch.is-active .fs-swatch__price{ color:var(--fs-blue); }
.fivestar-product .fs-swatch:hover{ border-color:var(--fs-cyan); }
.fivestar-product .fs-swatch:active{ transform:translateY(1px); }
.fivestar-product .fs-swatch.is-active{
	border-color:var(--fs-navy); background:var(--fs-tint);
	box-shadow:inset 0 0 0 1px var(--fs-navy);
}
.fivestar-product .fs-swatch.is-disabled{
	opacity:.4; cursor:not-allowed; text-decoration:line-through;
}
.fivestar-product .fs-swatch:focus-visible{ outline:3px solid rgba(0,159,219,.5); outline-offset:2px; }

/* Give the variation rows a touch more air, AT&T-style */
.fivestar-product__cart table.variations tr{ margin-bottom:16px; }
.fivestar-product__cart table.variations th{ font-size:12.5px; margin-bottom:2px; }

/* =========================================================================
   v1.4 — Regular vs Special price chooser
   ========================================================================= */
.fivestar-product .fs-pricing{ margin:14px 0 6px; }
.fivestar-product .fs-pricing__hint{
	display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	color:var(--fs-blue); margin:0 0 8px;
}
.fivestar-product .fs-pricing__cards{ display:flex; flex-wrap:wrap; gap:12px; }
.fivestar-product .fs-price-card{
	appearance:none; cursor:pointer; font-family:inherit; text-align:left;
	flex:1 1 160px; min-width:150px;
	display:flex; flex-direction:column; gap:4px;
	padding:14px 16px; background:#fff; color:var(--fs-navy);
	border:1.5px solid var(--fs-border); border-radius:var(--fs-radius-sm);
	transition:border-color .14s, box-shadow .14s, background .14s, transform .1s;
	position:relative;
}
.fivestar-product .fs-price-card:hover{ border-color:var(--fs-cyan); }
.fivestar-product .fs-price-card.is-active{
	border-color:var(--fs-navy); background:var(--fs-tint);
	box-shadow:inset 0 0 0 1px var(--fs-navy);
}
.fivestar-product .fs-price-card.is-active::after{
	content:"\2713"; position:absolute; top:10px; right:12px;
	width:18px; height:18px; border-radius:50%; background:var(--fs-navy); color:#fff;
	font-size:11px; line-height:18px; text-align:center; font-weight:700;
}
.fivestar-product .fs-price-card.is-hidden{ display:none; }
.fivestar-product .fs-price-card__label{
	font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fs-muted);
}
.fivestar-product .fs-price-card.is-active .fs-price-card__label{ color:var(--fs-navy-deep); }
.fivestar-product .fs-price-card__amt{ font-size:22px; font-weight:800; color:var(--fs-navy); }
.fivestar-product .fs-price-card__amt .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; }
.fivestar-product .fs-price-card:focus-visible{ outline:3px solid rgba(0,159,219,.5); outline-offset:2px; }

/* Hide WooCommerce's own variation price line only when our chooser is shown */
.fivestar-product.fs-has-chooser .fivestar-product__cart .woocommerce-variation-price{ display:none; }

/* v1.4b — when the current selection has no special price, collapse the
   chooser to a plain single price (no "Choose your price", no cards chrome). */
.fivestar-product .fs-pricing.is-single .fs-pricing__hint{ display:none; }
.fivestar-product .fs-pricing.is-single .fs-price-card[data-choice="special"]{ display:none; }
.fivestar-product .fs-pricing.is-single .fs-pricing__cards{ gap:0; }
.fivestar-product .fs-pricing.is-single .fs-price-card[data-choice="regular"]{
	flex:0 0 auto; border:0; background:transparent; box-shadow:none; padding:0; cursor:default;
}
.fivestar-product .fs-pricing.is-single .fs-price-card[data-choice="regular"] .fs-price-card__label{ display:none; }
.fivestar-product .fs-pricing.is-single .fs-price-card[data-choice="regular"]::after{ display:none; }
.fivestar-product .fs-pricing.is-single .fs-price-card__amt{ font-size:24px; }

/* =========================================================================
   v1.5 — Special-pricing hint + rounded Storage label & options control
   ========================================================================= */

/* Hint line under the storage tiles (only rendered when a special exists). */
.fivestar-product .fs-swatch-hint{
	margin:8px 0 2px;
	font-size:12.5px;
	font-weight:600;
	line-height:1.45;
	color:var(--fs-cyan);
}

/* "Storage Options" label -> rounded pill chip (no longer a square box). */
.fivestar-product__cart table.variations th{
	display:inline-block;
	width:auto;
	background:var(--fs-tint);
	color:var(--fs-navy-deep);
	border:1px solid #d3ecf8;
	border-radius:999px;
	padding:5px 14px;
	margin:0 0 10px;
}

/* The native select that displays the storage options -> matching pill. */
.fivestar-product__cart select{
	border-radius:999px;
	padding-left:16px;
}

/* =========================================================================
   v1.6 — Lighter type treatment (consistency with catalog v1.33)
   A typographic pass only: drops 700/800 weights to 600, softens the
   "shouty" uppercase+tracked micro-labels to clean sentence case, tightens
   heading tracking, and harmonizes the neutral tokens with the catalog
   (ink/muted/line). The AT&T navy/cyan brand accent is intentionally kept.
   ========================================================================= */

/* Neutral tokens nudged to the catalog values for cross-surface harmony. */
.fivestar-pdp-wrap{ --fs-muted:#5A6675; --fs-border:#E8ECF2; }

/* Headings & amounts: 800 -> 600, a touch more tracking control. */
.fivestar-product__title{ font-weight:600; letter-spacing:-.02em; }
.fivestar-product__price .price{ font-weight:600; }
.fivestar-product__cart .woocommerce-variation-price .price{ font-weight:600; }
.fivestar-product .fs-price-card__amt{ font-weight:600; }
.fivestar-product .fs-pricing.is-single .fs-price-card__amt{ font-weight:600; }
.fivestar-product__details .woocommerce-Tabs-panel h2{ font-weight:600; }

/* Primary actions: 700 -> 600, no forced tracking. */
.fivestar-product__cart .single_add_to_cart_button{ font-weight:600; letter-spacing:0; }

/* Storage-tile captions: 700 -> 600; secondary price to a lighter muted. */
.fivestar-product .fs-swatch__cap{ font-weight:600; }
.fivestar-product .fs-swatch__price{ font-weight:500; }
.fivestar-product .fs-swatch-hint{ font-weight:500; }

/* Micro-labels: drop the uppercase + letter-spacing, ease weight to 600.
   (Storage-options pill keeps its rounded chip shape from v1.5.) */
.fivestar-product__cart table.variations th{
	font-weight:600; text-transform:none; letter-spacing:0;
}
.fivestar-product .fs-pricing__hint{
	font-weight:600; text-transform:none; letter-spacing:0; color:var(--fs-muted);
}
.fivestar-product .fs-price-card__label{
	font-weight:600; text-transform:none; letter-spacing:0;
}

/* Eyebrow chips read as clean tags (like the catalog carrier badges). */
.fivestar-chip{ font-weight:500; text-transform:none; letter-spacing:.01em; }

/* Details tabs: 700 -> 600. */
.fivestar-product__details .woocommerce-tabs ul.tabs li a{ font-weight:600; }

/* =========================================================================
   v1.7 — Unify the PDP call-to-action accent with the catalog (#0A6FF0)
   Recolors ONLY the two CTAs (main Request button + sticky buy-bar button)
   to the catalog accent, flat solid (no gradient) for a cleaner, consistent
   look. Storage-tile active rings, chips, and focus states keep the AT&T
   navy/cyan brand palette. Themeable via --fs-cta.
   ========================================================================= */
.fivestar-pdp-wrap{ --fs-cta:#0A6FF0; --fs-cta-deep:#084FB0; }

.fivestar-product__cart .single_add_to_cart_button{
	background:var(--fs-cta); box-shadow:none;
}
.fivestar-product__cart .single_add_to_cart_button:hover{
	background:var(--fs-cta-deep);
	box-shadow:0 10px 24px -14px rgba(10,111,240,.55);
}

/* =========================================================================
   v1.8 — Color Options section
   Sits directly beneath the Storage Options tiles (rendered by
   woocommerce_after_variations_table). Reuses the storage tile chrome
   (.fs-swatch) for a consistent layout, adds a color dot, and — for a single
   color — presents a static, non-interactive tile.
   ========================================================================= */
.fivestar-product .fivestar-colors{ margin:2px 0 4px; }

/* "Color Options" label -> same rounded tint pill as the Storage label. */
.fivestar-product .fivestar-colors__label{
	display:inline-block; width:auto;
	background:var(--fs-tint); color:var(--fs-navy-deep);
	border:1px solid #d3ecf8; border-radius:999px;
	font-size:12.5px; font-weight:600; letter-spacing:0;
	padding:5px 14px; margin:0 0 10px;
}

/* Color swatch dot (centered above the name, matching the storage column layout). */
.fivestar-product .fs-swatch--color .fs-swatch__dot{
	width:22px; height:22px; border-radius:50%;
	background:var(--fs-dot,#cfd4da);
	border:1px solid rgba(0,40,85,.16);
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
	margin-bottom:2px;
}
.fivestar-product .fs-swatch--color .fs-swatch__cap{ font-weight:600; }

/* Single color: informational only — no active ring, hover, or pointer. */
.fivestar-product .fs-swatch--color.is-static{
	cursor:default; background:#fff;
	border-color:var(--fs-border);
}
.fivestar-product .fs-swatch--color.is-static:hover{
	border-color:var(--fs-border); box-shadow:none; transform:none;
}

/* Hide the Categories line in the product meta (SKU + tags remain). The
   alignment categories don't need to be shown to shoppers. */
.fivestar-product .fivestar-product__meta .posted_in{ display:none; }

/* =========================================================================
   v1.9 — User Information section
   Read-only First / Last / Email for the signed-in tenant user. Renders under
   Color Options (via woocommerce_after_variations_table) and above the Request
   button, for the New / Upgrade / Lost product offerings.
   ========================================================================= */
.fivestar-product .fivestar-userinfo{ margin:4px 0 6px; }

.fivestar-product .fivestar-userinfo__label{
	display:inline-block; width:auto;
	background:var(--fs-tint); color:var(--fs-navy-deep);
	border:1px solid #d3ecf8; border-radius:999px;
	font-size:12.5px; font-weight:600; letter-spacing:0;
	padding:5px 14px; margin:0 0 10px;
}

.fivestar-product .fivestar-userinfo__grid{
	display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.fivestar-product .fivestar-userinfo__field{
	display:flex; flex-direction:column; gap:3px;
	background:#fff; border:1px solid var(--fs-border);
	border-radius:var(--fs-radius-sm); padding:10px 13px;
}
.fivestar-product .fivestar-userinfo__field--wide{ grid-column:1 / -1; }
.fivestar-product .fivestar-userinfo__k{
	font-size:11.5px; font-weight:600; color:var(--fs-muted);
}
.fivestar-product .fivestar-userinfo__v{
	font-size:14.5px; font-weight:600; color:var(--fs-navy);
	word-break:break-word;
}
.fivestar-product .fivestar-userinfo__note{
	margin:10px 0 0; font-size:12px; font-weight:500; line-height:1.45; color:var(--fs-muted);
}
/* QA v1 #8 (follow-up) — the note moved ABOVE the fields, so the base rule's
   top-only margin left it glued to the grid below. */
.fivestar-product .fivestar-userinfo__note--inline{ margin:2px 0 12px; }

@media (max-width:520px){
	.fivestar-product .fivestar-userinfo__grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   v1.10 — User Information: active subscription block (Upgrade / Lost)
   Fields sourced from external Azure SQL, shown under the identity fields.
   ========================================================================= */
.fivestar-product .fivestar-userinfo__subhead{
	margin:14px 0 8px; padding-top:12px;
	border-top:1px solid var(--fs-border);
	font-size:12px; font-weight:600; letter-spacing:.02em;
	text-transform:uppercase; color:var(--fs-muted);
}
.fivestar-product .fivestar-userinfo__badge{
	display:inline-block; padding:2px 12px; border-radius:999px;
	font-size:12.5px; font-weight:600; line-height:1.7;
	background:#eef1f5; color:var(--fs-navy);
}
.fivestar-product .fivestar-userinfo__badge.is-yes{ background:#e6f4ea; color:#067647; }
.fivestar-product .fivestar-userinfo__badge.is-no{ background:#fdeceb; color:#B42318; }
.fivestar-product .fivestar-userinfo__unavail{
	background:#fff; border:1px dashed var(--fs-border); border-radius:var(--fs-radius-sm);
	padding:12px 13px; font-size:13px; font-weight:500; color:var(--fs-muted);
}
.fivestar-product .fivestar-userinfo__diag{
	display:block; margin-top:5px; font-size:12px; color:#B42318; word-break:break-word;
}

/* Phone-number selector (Upgrade, multiple lines). */
.fivestar-product .fivestar-userinfo__selectwrap{ margin-bottom:10px; }
.fivestar-product .fivestar-userinfo__phone-select{
	width:100%; margin-top:5px;
	background:#fff; color:var(--fs-navy);
	border:1.5px solid var(--fs-border); border-radius:var(--fs-radius-sm);
	padding:10px 12px; font-size:14.5px; font-weight:600; font-family:inherit;
	cursor:pointer; appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='%23002855'%20d='M6%208L0%202l1.4-1.4L6%205.2%2010.6.6%2012%202z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:11px;
	padding-right:34px;
}
.fivestar-product .fivestar-userinfo__phone-select:focus{
	outline:none; border-color:var(--fs-cta); box-shadow:0 0 0 3px rgba(10,111,240,.15);
}

/* =========================================================================
   v1.12 — Shipping Address Information section (editable USA fields)
   Renders under User Information via woocommerce_after_variations_table (25).
   ========================================================================= */
.fivestar-product .fivestar-shipping{ margin:6px 0 6px; }

.fivestar-product .fivestar-shipping__label{
	display:inline-block; width:auto;
	background:var(--fs-tint); color:var(--fs-navy-deep);
	border:1px solid #d3ecf8; border-radius:999px;
	font-size:12.5px; font-weight:600; letter-spacing:0;
	padding:5px 14px; margin:0 0 10px;
}

.fivestar-product .fivestar-shipping__grid{
	display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.fivestar-product .fivestar-shipping__field{ display:flex; flex-direction:column; gap:4px; }
.fivestar-product .fivestar-shipping__field--wide{ grid-column:1 / -1; }

.fivestar-product .fivestar-shipping__k{
	font-size:11.5px; font-weight:600; color:var(--fs-muted);
}
.fivestar-product .fivestar-shipping__opt{ font-weight:500; color:var(--fs-muted); opacity:.8; }
/* 1.29.5 — the Email Address hint, shown only when that field is required
   (Upgrade / Lost). Matches the note styling rather than inventing a third
   scale of small grey text. */
.fivestar-product .fivestar-shipping__hint{
	display:block; margin-top:5px; font-size:12px; line-height:1.5;
	color:var(--fs-muted); opacity:.9;
}

/* 1.29.21 — UAT 2026-09-23 #3. The Ship To status-updates box, under the
   Email Address it depends on. Same box geometry as the keep-plan control
   (.fivestar-fan__keep-box) so the two checkboxes on this page match. */
.fivestar-product .fivestar-shipping__check{
	display:flex; align-items:flex-start; gap:9px; margin-top:8px; cursor:pointer;
	font-size:13px; line-height:1.45; font-weight:500; color:#1d2939;
}
.fivestar-product .fivestar-shipping__checkbox{
	width:17px; height:17px; flex:none; margin:2px 0 0; accent-color:var(--fs-cta); cursor:pointer;
}
.fivestar-product .fivestar-shipping__check.is-disabled{ cursor:default; color:var(--fs-muted); }
.fivestar-product .fivestar-shipping__check.is-disabled .fivestar-shipping__checkbox{ cursor:default; }
/* 1.29.21 — UAT 2026-09-23 #2. A tenant's single Account Name, shown as the
   value it is rather than a drop-down with one entry. Styled as a filled,
   read-only field so it still reads as part of the form. */
.fivestar-product .fivestar-fan__fixed{
	padding:10px 12px; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--fs-navy);
	background:var(--fs-tint); border:1.5px solid #d3ecf8; border-radius:var(--fs-radius-sm);
}
.fivestar-product .is-fan-muted .fivestar-fan__fixed{ background:#f3f4f6; border-color:var(--fs-border); }
.fivestar-product select.mkt-fan-account[hidden]{ display:none !important; }

.fivestar-product .fivestar-shipping__input{
	width:100%; background:#fff; color:var(--fs-navy);
	border:1.5px solid var(--fs-border); border-radius:var(--fs-radius-sm);
	padding:10px 12px; font-size:14.5px; font-weight:500; font-family:inherit;
	line-height:1.3;
}
.fivestar-product .fivestar-shipping__input:focus{
	outline:none; border-color:var(--fs-cta); box-shadow:0 0 0 3px rgba(10,111,240,.15);
}
.fivestar-product .fivestar-shipping__input::placeholder{ color:#9aa3ad; }
.fivestar-product .fivestar-shipping__input:invalid{ border-color:var(--fs-border); } /* don't shout until submit */
.fivestar-product .fivestar-shipping__textarea{ min-height:78px; resize:vertical; line-height:1.45; }
.fivestar-product .fivestar-shipping__field--comments{ margin-top:14px; }

.fivestar-product .fivestar-shipping__select{
	cursor:pointer; font-weight:600; appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20fill='%23002855'%20d='M6%208L0%202l1.4-1.4L6%205.2%2010.6.6%2012%202z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:34px;
}
.fivestar-product .fivestar-shipping__note{
	margin:10px 0 0; font-size:12px; font-weight:500; line-height:1.45; color:var(--fs-muted);
}
/* QA v1 #7 / #8 — the note now sits ABOVE the control it describes, so the
   base rule's top-only margin left it glued to the field below. */
.fivestar-product .fivestar-shipping__note--inline{ margin:2px 0 10px; }

/* 1.29.13 — Preferred Area Code (Add New and Port-In). Its own row after the
   address grid, half width so a three-digit box does not stretch across the
   form, with the same 10px rhythm the grid rows above use. */
.fivestar-product .fivestar-shipping__grid--areacode{ margin-top:10px; }

@media (max-width:520px){
	.fivestar-product .fivestar-shipping__grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   v1.13 — PDP Back control (Task 3)
   An action control that returns to the tenant Device Catalog for the current
   offering + carrier. It sits in a row WITH the breadcrumb (which is a trail),
   so the two coexist without duplicating each other. Renders on all three
   product offerings: New, Upgrade, Lost.
   ========================================================================= */
.fivestar-product .fivestar-crumbrow{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:18px;
}
.fivestar-product .fivestar-crumbrow .fivestar-breadcrumb{ margin-bottom:0; }

.fivestar-product .fivestar-back{
	display:inline-flex;
	align-items:center;
	gap:7px;
	flex:none;
	padding:7px 13px 7px 10px;
	border:1px solid var(--fs-border);
	border-radius:999px;
	background:var(--fs-white);
	color:var(--fs-cta);
	font-size:12.5px;
	font-weight:600;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.fivestar-product .fivestar-back:hover,
.fivestar-product .fivestar-back:focus-visible{
	border-color:var(--fs-cta);
	background:#F3F8FF;
	color:var(--fs-cta-deep);
}
.fivestar-product .fivestar-back:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(10,111,240,.15);
}
.fivestar-product .fivestar-back svg{
	width:12px; height:12px; flex:none;
	transition:transform .15s ease;
}
.fivestar-product .fivestar-back:hover svg{ transform:translateX(-2px); }

@media (max-width:520px){
	.fivestar-product .fivestar-crumbrow{ gap:10px; }
	.fivestar-product .fivestar-back{ width:100%; justify-content:center; }
}

/* =========================================================================
   v1.14 — Device Owner Information (Task 2)
   The section reads the AT&T master subscription report. Identifier-style
   values (phone, account/contract/FAN, IMEIs) get tabular figures so columns
   of digits line up and a transposed character is easy to spot.
   ========================================================================= */
.fivestar-product .fivestar-userinfo__v--mono{
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
	letter-spacing:.01em;
}

/* =========================================================================
   v1.15 — FAN / Rate Plan Alignment + Device Owner Information blocks.
   Both reuse the shipping section's field styles (same input rhythm), so this
   only needs the block chrome to match .fivestar-userinfo / .fivestar-shipping.
   ========================================================================= */
.fivestar-product .fivestar-fan__label,
.fivestar-product .fivestar-owner__label{
	display:inline-block; width:auto;
	background:var(--fs-tint); color:var(--fs-navy-deep);
	border:1px solid #d3ecf8; border-radius:999px;
	font-size:12.5px; font-weight:600; letter-spacing:0;
	padding:5px 14px; margin:0 0 10px;
}
.fivestar-product .fivestar-owner__label{ margin-bottom:14px; }
.fivestar-product .mkt-fan-plan:disabled{
	background:#F7F9FC;
	color:#98A2B3;
	cursor:not-allowed;
}

/* =========================================================================
   v1.16 — Required-field error state (Task 8)
   Applied by the plugin's inline PDP JS (mkt-invalid) both on pre-flight and
   from the server's `fields` list, so the failure lands next to the input
   rather than only in the message bar above the button.
   ========================================================================= */
.fivestar-product .mkt-invalid,
.fivestar-product .mkt-invalid:focus{
	border-color:#F04438 !important;
	box-shadow:0 0 0 3px rgba(240,68,56,.12) !important;
}
.fivestar-product .mkt-invalid::placeholder{ color:#E28D86; }

/* =========================================================================
   v1.17 — Rate Plan pricing (Task 9) + explicit "Ship to the device owner"
   Prices sit beneath the plan select, not inside the <option> labels: a list
   of "Plan (CODE) — $39.99 list / $24.99 discounted" strings is unscannable,
   and the numbers only matter for the plan actually chosen.
   ========================================================================= */
.fivestar-product .fivestar-fan__prices{
	display:grid; grid-template-columns:1fr 1fr; gap:10px;
	margin:12px 0 2px; padding:12px 14px;
	background:var(--fs-tint); border:1px solid #d3ecf8; border-radius:12px;
}
.fivestar-product .fivestar-fan__price{ display:flex; flex-direction:column; gap:3px; }
.fivestar-product .fivestar-fan__price .fivestar-userinfo__v{
	font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; font-weight:600;
}
.fivestar-product .fivestar-fan__price--discount .fivestar-userinfo__v{ color:var(--fs-cta); }
@media (max-width:520px){ .fivestar-product .fivestar-fan__prices{ grid-template-columns:1fr; } }

/* =========================================================================
   Keep the current rate plan (Task 5, theme 1.29.0).
   Sits directly under the section label and above Account Name, because it
   decides whether the two controls below it are used at all.
   ========================================================================= */
.fivestar-product .fivestar-fan__keep{ margin:0 0 14px; }
.fivestar-product .fivestar-fan__keep-label{
	display:flex; align-items:flex-start; gap:10px; cursor:pointer;
	font-size:14px; line-height:1.45; color:#1d2939; font-weight:600;
}
/* 18px with a 2px nudge puts the box on the first line's cap height rather
   than its baseline, so it stays attached to the question when the text
   wraps to two lines on a narrow screen. */
.fivestar-product .fivestar-fan__keep-box{
	width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--fs-cta); cursor:pointer;
}
.fivestar-product .fivestar-fan__kept{
	display:grid; grid-template-columns:1fr 1fr; gap:10px;
	margin:10px 0 0; padding:12px 14px;
	background:var(--fs-tint); border:1px solid #d3ecf8; border-radius:12px;
}
.fivestar-product .fivestar-fan__kept[hidden]{ display:none; }
@media (max-width:520px){ .fivestar-product .fivestar-fan__kept{ grid-template-columns:1fr; } }
/* 1.29.12 — the unaligned note. `grid-column:1/-1` because the panel above is
   a two-column grid and a sentence dropped into it would otherwise sit in one
   column beside a value, reading as a caption for that value rather than as a
   statement about the plan. Amber, not red: the request PROCEEDS, and a red
   note beside a control that still works teaches people to ignore red. */
.fivestar-product .fivestar-fan__keep-note{
	grid-column:1 / -1; margin:2px 0 0; padding:9px 11px;
	background:#fffaeb; border:1px solid #fedf89; border-radius:9px;
	font-size:12.5px; line-height:1.5; color:#93370d; font-weight:500;
}

/* The muted state is applied to the FIELD, not the control, so the label
   dims with it. A greyed select under a full-contrast label reads as a
   rendering fault rather than a deliberate state. Held at .62 rather than
   lower: this text still has to be readable, because it is what explains
   what the disabled control would have done. */
.fivestar-product .is-fan-muted{ opacity:.62; }
.fivestar-product .is-fan-muted select{ cursor:not-allowed; background-color:#f3f4f6; }

/* 1.29.4 — the .fivestar-shipping__copy rules ("Ship to the device owner")
   were removed with the control itself. The Requestor types the recipient's
   First Name and Last Name directly; nothing pre-fills them. */

/* =========================================================================
   v1.18 — Simple-product PDP sections (Task 11)
   The sections now render on simple products too, where there is no variations
   table above them. Without this the first block sits flush against the price.
   ========================================================================= */
.fivestar-product form.cart:not(.variations_form) .fs-option-block:first-of-type{
	margin-top:20px;
}
.fivestar-product form.cart:not(.variations_form) .fs-option-block{
	margin-bottom:18px;
}

/* =========================================================================
   v1.19 — Special price is the price (theme 1.26.1)

   Where a Special applies it IS this tenant's price, so the Regular card is a
   READ-ONLY reference figure — muted and disabled, never a control. It still
   has to be legible: --fs-muted (#5A6473) on the tint clears WCAG AA
   comfortably. Deliberately no strikethrough — that asserts a was/now sale,
   a stronger claim than "this is the list price".

   Note :hover and :focus deliberately do NOT lift this card. An earlier pass
   restored full contrast on hover, which was right while Regular was still
   selectable and is wrong now: a read-only figure that brightens under the
   cursor invites a click that does nothing.
   ========================================================================= */

/* Regular, while a Special is in force. Always paired with [disabled] by
   buildPricing() / the template — the class is the paint, not the lock. */
.fivestar-product .fs-price-card.is-muted{
	border-color:var(--fs-border);
	background:#FAFBFD;
	cursor:default;
}
.fivestar-product .fs-price-card.is-muted .fs-price-card__label,
.fivestar-product .fs-price-card.is-muted .fs-price-card__amt{
	color:var(--fs-muted);
}
.fivestar-product .fs-price-card.is-muted .fs-price-card__amt{ font-weight:500; }

/* The base .fs-price-card:hover rule still fires on a disabled button, so
   neutralise it explicitly rather than relying on the attribute alone. */
.fivestar-product .fs-price-card.is-muted:hover,
.fivestar-product .fs-price-card[disabled]:hover{
	border-color:var(--fs-border);
	background:#FAFBFD;
}
.fivestar-product .fs-price-card[disabled]{ cursor:default; }

/* "Your price" pill — carries the meaning that greying alone only implies,
   and is what explains why Regular can't be picked. Rendered always, revealed
   by state, so simple and variable products behave alike without JS having to
   inject it. */
.fivestar-product .fs-price-card__label{ display:flex; align-items:center; gap:7px; }
.fivestar-product .fs-price-card__badge{
	display:none;
	font-size:10px; font-weight:600; line-height:1; letter-spacing:.01em;
	padding:3px 8px; border-radius:999px;
	background:var(--fs-navy); color:#fff;
	text-transform:none; white-space:nowrap;
}
.fivestar-product .fs-price-card.is-active .fs-price-card__badge{ display:inline-block; }

/* is-single collapses the chooser to one plain price. buildPricing() clears
   .is-muted and re-enables the card on that path, but pin it here too so a
   stale class can never grey out the only price on the page. */
.fivestar-product .fs-pricing.is-single .fs-price-card.is-muted{
	background:transparent; border-color:transparent; cursor:default;
}
.fivestar-product .fs-pricing.is-single .fs-price-card.is-muted .fs-price-card__label,
.fivestar-product .fs-pricing.is-single .fs-price-card.is-muted .fs-price-card__amt{
	color:var(--fs-navy);
}
.fivestar-product .fs-pricing.is-single .fs-price-card__badge{ display:none; }

/* =========================================================================
   Device Upgrade Status Information (theme 1.29.6, task list 2026-08-19 #15)

   This block renders OUTSIDE form.cart — it hooks
   woocommerce_before_add_to_cart_form so it sits above the variations table.
   The .fs-option-block spacing rules above are scoped to
   `form.cart .fs-option-block`, so none of them reach it and it needs its own.

   The .fivestar-userinfo__* classes it borrows ARE scoped to .fivestar-product
   (the summary wrapper), and .fivestar-product__cart is inside that, so the
   grid, key/value and badge styling all apply unchanged.
   ========================================================================= */
.fivestar-product .fivestar-upgstatus{
	margin:0 0 20px;
}
.fivestar-product .fivestar-upgstatus .fivestar-owner__label{
	margin-bottom:12px;
}
/*
 * The grid is deliberately NOT restyled here.
 *
 * The first cut of this block set its own `grid-template-columns` plus a
 * `max-width:640px` collapse. Both were wrong, and only rendering it showed
 * why: the shared `.fivestar-userinfo__grid` rule is ALREADY `1fr 1fr`, so the
 * column rule was redundant — and the shared collapse breakpoint is **520px**,
 * not 640px. Between those two widths this block would have been the only one
 * on the page stacked to a single column while Requestor Information, Device
 * Owner and the rest stayed two-up. A layout bug with no wrong string in it,
 * which no assertion in the harness would have caught (convention §15).
 *
 * Inheriting the shared rule keeps this block on the same breakpoint as every
 * other section, permanently.
 */

/* =========================================================================
   Required Carrier Information Needed (theme 1.29.9, task list 2026-08-19 #12)

   The block reuses .fivestar-shipping__* for its grid, labels, inputs and
   hints, so it inherits the same two-column layout and the same 520px collapse
   as every other section — see the 1.29.6 note above for what happens when a
   block declares its own breakpoint instead.

   Only two things are genuinely new: the outer spacing, and a sub-heading for
   the "Account Holder Details" group inside the grid.
   ========================================================================= */
.fivestar-product .fivestar-portin{
	margin-bottom:18px;
}
.fivestar-product .fivestar-portin__subhead{
	display:block; margin:6px 0 0;
	padding-top:12px; border-top:1px solid var(--fs-border);
	font-size:12px; font-weight:600; letter-spacing:.02em;
	text-transform:uppercase; color:var(--fs-muted);
}

/* Customer User Defined Labels (theme 1.29.10, task list 2026-08-19 #14).
   Reuses the shipping grid so it inherits the same two-column layout and the
   same 520px collapse as every other block — see the 1.29.6 note above for
   what happens when a block declares its own breakpoint instead. The only
   addition is top spacing, since it follows a full-width textarea. */
.fivestar-product .fivestar-shipping__grid--udl{ margin-top:4px; }

/* =========================================================================
   Device Feature Selections (theme 1.29.11, task list 2026-08-26 item 3)

   A native <details> disclosure, deliberately. See the note on
   mkt_feature_selections_field() for the two reasons; the one that shows up
   here is that NOTHING below is positioned. Plugin 3.6.33 spent a build
   discovering that an absolutely-positioned list inside an overflow:hidden
   ancestor is cut off rather than scrolled, and .fivestar-product is such an
   ancestor's neighbourhood. The list is in flow, the page reflows around it,
   and there is no edge for it to be clipped against.

   Reuses .fivestar-portin__subhead for the heading and .fivestar-shipping__note
   for the intro so the block inherits the section's type scale, and declares no
   breakpoint of its own — see the 1.29.6 note above for what happens when a
   block declares one.
   ========================================================================= */
.fivestar-product .fivestar-feat{ margin-top:14px; }

.fivestar-product .fivestar-feat__dd{
	margin-top:8px; border:1.5px solid var(--fs-border);
	border-radius:var(--fs-radius-sm); background:#fff; overflow:hidden;
}
.fivestar-product .fivestar-feat__summary{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:11px 13px; cursor:pointer; list-style:none;
	font-size:14.5px; font-weight:600; color:var(--fs-navy);
	background:#fff; transition:background .15s;
}
/* The UA marker is a triangle in Blink and a disclosure widget in WebKit, and
   neither can be styled — both are removed and replaced by .__chev below. */
.fivestar-product .fivestar-feat__summary::-webkit-details-marker{ display:none; }
.fivestar-product .fivestar-feat__summary::marker{ content:""; }
.fivestar-product .fivestar-feat__summary:hover{ background:var(--fs-panel); }
.fivestar-product .fivestar-feat__dd[open] .fivestar-feat__summary{
	border-bottom:1px solid var(--fs-border);
}
.fivestar-product .fivestar-feat__sum.is-chosen{ color:var(--fs-navy-deep); }

.fivestar-product .fivestar-feat__chev{
	flex:0 0 auto; width:10px; height:10px; margin-right:2px;
	border-right:2px solid var(--fs-muted); border-bottom:2px solid var(--fs-muted);
	transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.fivestar-product .fivestar-feat__dd[open] .fivestar-feat__chev{
	transform:rotate(-135deg) translate(-2px,-2px);
}

/* A cap plus overflow-y, so a tenant aligned to forty features gets a scrolling
   list rather than a page of checkboxes wedged between two form fields.
   420px is NINE rows at the 47px measured below, chosen the way 3.6.33 chose
   520px for the wizard's rate plans: high enough that most alignments are
   wholly visible without scrolling, low enough that the accessories question
   underneath stays reachable. The first cut was 260px — about five and a half
   rows — which is the same "shows only three at a time" complaint that build
   was answering, one surface along. */
.fivestar-product .fivestar-feat__list{
	max-height:420px; overflow-y:auto; padding:4px;
}

.fivestar-product .fivestar-feat__row{
	display:flex; align-items:center; gap:10px;
	padding:8px 9px; border-radius:7px; cursor:pointer;
	transition:background .12s;
}
.fivestar-product .fivestar-feat__row:hover{ background:var(--fs-panel); }
/* Visually hidden, NOT display:none — a display:none checkbox leaves the tab
   order and the row becomes unreachable by keyboard. */
.fivestar-product .fivestar-feat__cb{
	position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
.fivestar-product .fivestar-feat__tick{
	flex:0 0 auto; display:flex; align-items:center; justify-content:center;
	width:19px; height:19px; border:1.5px solid var(--fs-border); border-radius:5px;
	background:#fff; color:transparent; font-size:12px; line-height:1; transition:.12s;
}
.fivestar-product .fivestar-feat__cb:checked + .fivestar-feat__tick{
	background:var(--fs-cyan); border-color:var(--fs-cyan); color:#fff;
}
/* The input is hidden, so the focus ring has to move to the box it drives —
   without this the control is keyboard-operable and invisibly so. */
.fivestar-product .fivestar-feat__cb:focus-visible + .fivestar-feat__tick{
	outline:none; box-shadow:0 0 0 3px rgba(0,159,219,.30);
}
.fivestar-product .fivestar-feat__name{
	flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--fs-navy);
	display:flex; flex-direction:column; gap:1px;
}
.fivestar-product .fivestar-feat__code{
	font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--fs-muted);
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.fivestar-product .fivestar-feat__charge{
	flex:0 0 auto; font-size:13.5px; font-weight:700; color:var(--fs-navy);
	font-variant-numeric:tabular-nums;
}
.fivestar-product .fivestar-feat__charge.is-none{
	font-size:11.5px; font-weight:600; color:var(--fs-muted);
}
.fivestar-product .fivestar-feat__cb:checked ~ .fivestar-feat__charge{ color:var(--fs-navy-deep); }
.fivestar-product .fivestar-feat__row:has(.fivestar-feat__cb:checked){ background:var(--fs-tint); }

/* 1.29.15 — Included with this device (task list #8). Default features the
   administrator set: shown open, ticked and locked, above the optional list. */
.fivestar-product .fivestar-feat__included{
	margin:10px 0 10px; border:1px solid #ABEFC6; border-radius:10px; background:#F6FEF9; overflow:hidden;
}
.fivestar-product .fivestar-feat__inc-cap{
	display:block; padding:8px 13px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
	text-transform:uppercase; color:#067647; border-bottom:1px solid #D1FADF;
}
.fivestar-product .fivestar-feat__list--included{ max-height:none; }
.fivestar-product .fivestar-feat__row.is-included{ cursor:default; background:transparent; }
.fivestar-product .fivestar-feat__row.is-included:hover{ background:transparent; }
.fivestar-product .fivestar-feat__row.is-included .fivestar-feat__tick{ background:#12B76A; border-color:#12B76A; color:#fff; }
.fivestar-product .fivestar-feat__inc{
	flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
	color:#067647; background:#ECFDF3; border:1px solid #ABEFC6; border-radius:999px; padding:2px 8px;
}

/* 1.29.16 — the carrier's rate plan name, under a Friendly Name
   (task list 2026-09-16 #1). */
.fivestar-fan__carrierplan { margin: 6px 0 0; }
.fivestar-fan__carrierplan[hidden] { display: none !important; }

/* 1.29.17 — Special price installment term (task list 2026-09-16 #2). */
.fivestar-product .fs-price-card__cond{ font-size:12px; font-weight:500; line-height:1.35; color:var(--fs-muted); text-transform:none; letter-spacing:0; }
.fivestar-product .fs-price-card.is-active .fs-price-card__cond{ color:var(--fs-navy-deep); }
.fivestar-product .fs-price-card__cond[hidden]{ display:none; }
.fivestar-product .fs-pricing__termhint{ margin:8px 0 0; font-size:13px; color:var(--fs-muted); }
.fivestar-product .fs-pricing__termhint[hidden]{ display:none; }
.fivestar-product .fs-pricing.is-term-open .fs-price-card[data-choice="special"]:not(.is-hidden){ border-style:dashed; }
.fivestar-product .fs-pricing.is-term-open .fs-pricing__termhint{ color:var(--fs-navy); font-weight:700; }

/* =========================================================================
   1.29.18 — the Special price's installment disclaimer WRAPS INSIDE ITS CARD.

   Reported 2026-09-17: on the live device page the sentence ran straight out
   of the Special Price card and across its neighbour. It wraps correctly
   against this stylesheet alone (harness render-3.6.61-pdp-pricing.php), so
   the cause is inherited: the card is a <button>, and the parent theme /
   Elementor / WooCommerce set `white-space:nowrap` on buttons. A single long
   sentence in a nowrap button has no wrap opportunity at all, so it overflows
   a border that is drawn at the card's own width.

   Stated here rather than assumed of the environment: the card and every part
   of it declare normal wrapping, `!important` because the rule being
   overridden is itself a blunt element-level one we do not control, and
   `min-width:0` so a flex item can actually narrow to its wrapped width.
   The disclaimer is also a BLOCK on its own line, full card width, which is
   what makes it read as a description of the amount above it.
   ========================================================================= */
.fivestar-product .fs-price-card,
.fivestar-product .fs-price-card__label,
.fivestar-product .fs-price-card__amt,
.fivestar-product .fs-price-card__cond{
	white-space:normal !important;
	overflow-wrap:break-word;
	word-break:normal;
	min-width:0;
	max-width:100%;
}
.fivestar-product .fs-price-card__cond{
	display:block; width:100%;
	margin-top:2px;
	text-align:left;
	hyphens:none;
}
/* The badge stays on one line — it is two words in a pill, and wrapping it
   would break the pill, not help it. */
.fivestar-product .fs-price-card__badge{ white-space:nowrap !important; }

/* Room to wrap in: a card carrying a disclaimer starts wider, so the sentence
   reads in two or three lines instead of one word per line on a narrow
   summary column. The cards still flex, and a card with no disclaimer keeps
   its old basis. */
.fivestar-product .fs-price-card:has(.fs-price-card__cond:not([hidden])){
	flex-basis:210px;
}
/* Fallback for browsers without :has() — the term modes are the only states
   that render a disclaimer, and they are on the wrapper. */
.fivestar-product .fs-pricing[data-term-mode="24"] .fs-price-card,
.fivestar-product .fs-pricing[data-term-mode="36"] .fs-price-card,
.fivestar-product .fs-pricing[data-term-mode="both"] .fs-price-card{
	flex-basis:210px;
}
@media (max-width:560px){
	/* One card per row on a phone: three 210px cards in a 320px column would
	   otherwise wrap to one word per line however normal the wrapping is. */
	.fivestar-product .fs-price-card{ flex:1 1 100%; }
}

/* 1.29.19 — UAT 2026-09-21 #3: Special Feature Price — price, tag, list beneath. */
.fivestar-product .fivestar-feat__charge.is-special{ text-align:right; line-height:1.25; }
.fivestar-product .fivestar-feat__sptag{
	display:inline-block; margin-left:6px; padding:0 7px; border-radius:20px;
	background:#ECFDF3; color:#067647; font-size:10.5px; font-weight:700; vertical-align:1px;
}
.fivestar-product .fivestar-feat__splist{ display:block; font-size:11px; font-weight:500; color:var(--fs-muted); }

/* =========================================================================
   1.29.24 — a card per price option (plugin 3.6.94, Task List 10112026 #1).
   Special Price (Retail struck through) / Retail, 24-month agreement,
   36-month agreement. No condition sentence (D3); one plain line each (D4).
   ========================================================================= */
.fivestar-product .fs-price-card__was{ font-size:12px; font-weight:500; color:var(--fs-muted); text-decoration:line-through; }
.fivestar-product .fs-price-card__was .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; }
.fivestar-product .fs-price-card__desc{ font-size:12px; font-weight:500; line-height:1.35; color:var(--fs-muted); text-transform:none; letter-spacing:0; }
.fivestar-product .fs-price-card.is-active .fs-price-card__desc{ color:var(--fs-navy-deep); }
.fivestar-product .fs-pricing.is-single .fs-price-card__desc,
.fivestar-product .fs-pricing.is-single .fs-price-card__was{ display:none; }
.fivestar-product .fs-pricing.is-term-open .fs-price-card{ border-style:dashed; }
.fivestar-product .fs-pricing.is-term-open .fs-pricing__termhint{ color:var(--fs-navy-deep); font-weight:600; }
@media (max-width:560px){ .fivestar-product .fs-price-card{ flex:1 1 100%; } }

/* =========================================================================
   1.29.25 — four prices per storage option (plugin 3.6.97, Task List
   10122026, device page Direction 1). Retail struck through once, above the
   cards, when it is not one of them (P1); an installment's "/mo" sits in its
   amount (P3); each card's sentence wraps inside it (cf. 1.29.18).
   ========================================================================= */
.fivestar-product .fs-pricing__retail{ display:flex; align-items:baseline; gap:6px; margin:0 0 4px; font-size:13px; color:var(--fs-muted); }
.fivestar-product .fs-pricing__retail[hidden]{ display:none; }
.fivestar-product .fs-pricing__retail-k{ font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.fivestar-product .fs-pricing__retail-v{ text-decoration:line-through; font-weight:600; }
.fivestar-product .fs-pricing__retail-v .woocommerce-Price-amount{ font-variant-numeric:tabular-nums; }
.fivestar-product .fs-price-card__per{ margin-left:1px; font-size:13px; font-weight:700; color:var(--fs-muted); }
.fivestar-product .fs-price-card.is-active .fs-price-card__per{ color:var(--fs-navy-deep); }
.fivestar-product .fs-price-card__desc{
	display:block; width:100%; margin-top:2px; text-align:left;
	white-space:normal !important; overflow-wrap:break-word; word-break:normal; hyphens:none; min-width:0; max-width:100%;
}
.fivestar-product .fs-price-card:has(.fs-price-card__desc){ flex:1 1 150px; min-width:150px; }

/* =========================================================================
   1.29.26 — two Special Prices (plugin 3.6.98, device page Direction 1): the
   cards sit in two labeled rows, One-time and Monthly.
   ========================================================================= */
.fivestar-product .fs-pricing__cards.is-grouped{ display:block; }
.fivestar-product .fs-pricing__group + .fs-pricing__group{ margin-top:12px; }
.fivestar-product .fs-pricing__glabel{ display:block; margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--fs-muted); }
.fivestar-product .fs-pricing__gcards{ display:flex; flex-wrap:wrap; gap:12px; }

/* 1.29.27 (plugin 3.6.99) — Task List 10132026, Direction A: on the Upgrade and
   Lost pages, one muted line under the price says why a line is offered Retail
   only ("This line is under contract until 03/01/2027, so Retail pricing
   applies."). The price above it is the plain Retail amount. */
.fivestar-product .fs-pricing__line{ display:flex; align-items:flex-start; gap:6px; margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--fs-muted); }
.fivestar-product .fs-pricing__line-ico{ flex:0 0 auto; margin-top:2px; color:var(--fs-blue); }