/**
 * AMA WooCommerce Single Product — editorial layout matching the AMA theme.
 * Pairs with woocommerce/content-single-product.php + ama-single-product.js.
 *
 * @package AMAIndiaTwentySix
 */

.ama-sp {
	--sp-navy:   var(--ama-navy, #1a2744);
	--sp-maroon: var(--ama-maroon, #8a3a2a);
	--sp-cream:  var(--ama-cream, #f5f0e8);
	--sp-paper:  #fbf8f1;
	--sp-text:   var(--ama-text, #0d1524);
	--sp-muted:  var(--ama-muted, #534c45);
	--sp-border: var(--ama-border, #d6cfc4);
	--sp-gold:   #b8893b;
	--sp-green:  #1d6b3f;
	color: var(--sp-text);
	font-family: var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
	max-width: 1240px;
	margin: 0 auto;
}

/* ══ Top: gallery + summary ════════════════════════════════════════════════ */
.ama-sp__top { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 56px; align-items: start; }

/* ── Gallery ───────────────────────────────────────────────────────────── */
/* White mat, not navy: `contain` leaves a margin on any cover that is not
   exactly the frame's ratio, and a dark mat drew a hard band around every
   one of them. On white it reads as space, not as a border. The striped
   navy placeholder below is unaffected — it paints its own background. */
.ama-sp__gallery-main {
	position: relative; aspect-ratio: 3 / 4; overflow: hidden;
	background: #fff; border-radius: 4px;
}
/* Elementor's frontend.css has `.elementor img { height: auto }` (0,1,1), which
   outranks a single class and collapsed the cover to its own aspect ratio,
   leaving the navy container background as a strip under the image. Repeated
   class = (0,2,0), which wins on class count. */
/* `fill`, not `contain`/`cover`: the frame has to be one size across the grid,
   and covers run from about 0.65 to 0.71 wide/tall. `cover` cropped them,
   `contain` left a mat; `fill` stretches each cover to the 3/4 frame instead,
   so the whole image is always visible edge to edge. The stretch is
   horizontal and runs from ~6% on a 0.71 cover to ~15% on a 0.65 one. */
.ama-sp__gallery-img.ama-sp__gallery-img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* ── Hover magnifier + click to enlarge ─────────────────────────────────── */
/* The link fills the frame so the whole picture is clickable, and carries the
   zoom cursor as the only hint that there is more to see. */
.ama-sp__gallery-link {
	display: block; width: 100%; height: 100%;
	cursor: zoom-in;
}
/* The magnified copy is painted as the frame's background; the <img> fades out
   over it. 200% is a 2× magnification of the full-size file. */
.ama-sp__gallery-main {
	background-repeat: no-repeat;
	background-size: 200%;
	background-position: center;
}
.ama-sp__gallery-main.is-zoomed .ama-sp__gallery-img { opacity: 0; }
.ama-sp__gallery-img { transition: opacity .12s ease; }

/* Lightbox */
body.ama-sp-lb-open { overflow: hidden; }
.ama-sp-lb {
	position: fixed; inset: 0; z-index: 99999;
	display: none; align-items: center; justify-content: center;
	padding: 32px;
	background: rgba(13, 21, 36, .92);
	cursor: zoom-out;
}
.ama-sp-lb.is-open { display: flex; }
.ama-sp-lb__img {
	max-width: 100%; max-height: 100%;
	object-fit: contain;
	cursor: default;
	border-radius: 2px;
	background: #fff;
}
.ama-sp-lb__close {
	position: absolute; top: 16px; right: 20px;
	width: 44px; height: 44px;          /* WCAG 2.5.8 target size */
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; line-height: 1;
	color: #fff; background: transparent; border: 0; cursor: pointer;
}
.ama-sp-lb__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* No hover magnifier on touch, so no zoom-in cursor promise either. */
@media (hover: none), (pointer: coarse) {
	.ama-sp__gallery-link { cursor: pointer; }
}
.ama-sp__ph {
	display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 100%; padding: 16px;
	background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 16px), var(--sp-navy);
}
.ama-sp__ph-label {
	font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
	color: rgba(255,255,255,.45);
}
.ama-sp__gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.ama-sp__thumb {
	/* Portrait like the main image: a square thumb would have to stretch a cover
	   by about half its width to fill, which is a different picture. */
	aspect-ratio: 3 / 4; padding: 0; border: 1px solid var(--sp-border); border-radius: 3px;
	overflow: hidden; cursor: pointer; background: #fff;
}
/* (0,1,1) would only tie with `.elementor img` and be settled by load order;
   repeating the parent class makes it (0,2,1) and independent of it. */
.ama-sp__thumb.ama-sp__thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.ama-sp__thumb.is-active { border-color: var(--sp-gold); box-shadow: 0 0 0 1px var(--sp-gold); }

/* ── Summary ───────────────────────────────────────────────────────────── */
.ama-sp__eyebrow { margin: 0 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ama-sp__cat { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-maroon); }
.ama-sp__year { font-size: 0.75rem; color: var(--sp-muted); }
.ama-sp__pill {
	font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 2px; color: #fff; background: var(--sp-green);
}

/* h1.ama-sp__title — element+class + !important so the Elementor Kit's global
   heading styles can't override the size/family (per the theme's Kit-specificity
   rule). Adjust the clamp() (min, fluid, max) to taste. */
.ama-sp h1.ama-sp__title {
	font-family: var(--font-serif, Georgia, "Times New Roman", serif);
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	line-height: 1.25; font-weight: 700;
	margin: 0 0 8px; color: var(--sp-navy);
}
/* The short description, with the editor's own formatting intact. It is a div
   holding real block content now (wpautop's paragraphs, and any list the editor
   added), so the outer margin is kept on the box and the first/last child are
   flattened against it — otherwise a paragraph's own margin would double the
   gap above the rating row. */
.ama-sp__subtitle { margin: 0 0 16px; font-size: 1.0625rem; font-style: italic; color: var(--sp-muted); }
.ama-sp__subtitle > :first-child { margin-top: 0; }
.ama-sp__subtitle > :last-child { margin-bottom: 0; }
.ama-sp__subtitle ul,
.ama-sp__subtitle ol { padding-left: 1.25em; margin-bottom: 0; }

.ama-sp__rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; font-size: 0.8125rem; color: var(--sp-muted); }
.ama-sp__stars { position: relative; font-size: 0.95rem; letter-spacing: 1px; color: var(--sp-border); }
.ama-sp__stars::before {
	content: "★★★★★"; position: absolute; inset: 0; width: var(--rating, 0%); overflow: hidden;
	color: var(--sp-gold); white-space: nowrap;
}
.ama-sp__rating-num { font-weight: 700; color: var(--sp-text); }
.ama-sp__reviews { color: var(--sp-muted); text-decoration: underline; }
.ama-sp__reviews:hover { color: var(--sp-maroon); }

/* Hide the eyebrow status pills (Virtual, etc) and the publish-year — neither
   adds meaning on a product page. Delete a line to restore. */
.ama-sp__eyebrow .ama-sp__pill { display: none; }
.ama-sp__eyebrow .ama-sp__year { display: none; }

.ama-sp__price { font-size: 2rem; font-weight: 700; color: var(--sp-navy); margin: 0 0 14px; }
.ama-sp .ama-sp__price del { color: var(--sp-muted); font-weight: 400; font-size: 1.1rem; margin-right: 10px; }
.ama-sp .ama-sp__price ins { text-decoration: none; color: var(--sp-maroon); }
.ama-sp__price .woocommerce-Price-amount { font-size: inherit; }

.ama-sp__stock { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; margin: 0 0 22px; }
/* In the eyebrow row it is pushed to the right-hand end and carries no bottom
   margin — the row owns the spacing. `auto` on the left margin is what moves
   it, so it stays put whether or not the category and year are present. */
.ama-sp__eyebrow .ama-sp__stock { margin: 0 0 0 auto; }
.ama-sp__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.ama-sp__stock--in { color: var(--sp-green); }
.ama-sp__stock--in::before { background: var(--sp-green); }
.ama-sp__stock--out { color: var(--sp-maroon); }
.ama-sp__stock--out::before { background: var(--sp-maroon); }

/* ── Add-to-cart (WooCommerce form, restyled) ──────────────────────────── */
/* Explicit rows, regardless of the order plugins inject their markup:
     1. ShopEngine Wishlist + Compare (side by side)
     2. the selector — calendar / quantity / variation (full width)
     3. the add-to-cart button (full width, last)
   All are children of form.cart; flex `order` + a 100% basis build the rows. */
.ama-sp__cart .cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 26px; }

/* Row 1 — ShopEngine wishlist + comparison. */
.ama-sp__cart .shopengine-wishlist,
.ama-sp__cart .shopengine_add_to_list_action { order: 1; }
.ama-sp__cart .shopengine-comparison,
.ama-sp__cart .shopengine_comparison_add_to_list_action { order: 2; }

/* Row 2 — the selector (each item takes its own full-width row). */
.ama-sp__cart #ama-ts-picker,
.ama-sp__cart .variations,
.ama-sp__cart .ama-sp-var { order: 3; flex: 1 0 100%; margin: 0; }
.ama-sp__cart .quantity {
	order: 3; flex: 1 0 100%;
	display: flex; justify-content: flex-start; align-items: center;
	border: 0; border-radius: 0; overflow: visible;
}
.ama-sp__cart .quantity input.qty {
	width: 76px; text-align: center; padding: 12px 8px; font-size: 0.95rem;
	border: 1px solid var(--sp-border); border-radius: 4px; background: #fff; color: var(--sp-text);
	-moz-appearance: textfield;
}
.ama-sp__cart .quantity input.qty::-webkit-outer-spin-button,
.ama-sp__cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Row 3 — button (and the variable-product price/button wrap) full-width, last. */
.ama-sp__cart .single_variation_wrap { order: 4; flex: 1 0 100%; }
.ama-sp__cart .single_add_to_cart_button,
.ama-sp__cart button.single_add_to_cart_button {
	order: 4; flex: 1 0 100%; width: 100%; min-width: 0;
	background: var(--sp-navy) !important; color: #fff !important;
	border: none !important; border-radius: 4px !important;
	padding: 14px 28px !important; font-size: 0.9375rem !important; font-weight: 700 !important;
	letter-spacing: .02em; cursor: pointer; transition: background .15s ease;
	text-transform: none;
}
.ama-sp__cart .single_add_to_cart_button:hover { background: var(--sp-maroon) !important; }
.ama-sp__cart .single_add_to_cart_button::after { content: " →"; }
.ama-sp__cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* ── Variation selector — radio cards built by ama-single-product.js ───── */
/* Inserted into form.cart by the JS, so it needs an order and a full-width
   basis like the cards it heads — without them it shrinks to its content and
   the label runs into the selected value. */
.ama-sp__cart .ama-sp-var__head { order: 3; flex: 1 0 100%; }
.ama-sp-var__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.ama-sp-var__head-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted); }
.ama-sp-var__head-selected { font-size: 0.8125rem; color: var(--sp-muted); }
.ama-sp-var__head-selected strong { color: var(--sp-text); }
/* Variation radio cards. The options are <button>s, so the Elementor Kit's
   global button styling (bright-red bg, inline-block) would otherwise override
   single-class rules — hence element+class selectors + !important on the visual
   props (same remedy used elsewhere in this theme). */
.ama-sp .ama-sp-var {
	display: flex !important; flex-direction: column !important; gap: 0;
	list-style: none; margin: 0 0 22px; padding: 0;
	border: 1px solid var(--sp-border); border-radius: 6px; overflow: hidden;
}
.ama-sp button.ama-sp-var__opt {
	display: flex !important; align-items: center; gap: 14px; width: 100%; text-align: left;
	padding: 14px 18px !important; margin: 0 !important;
	background: #fff !important; color: var(--sp-text) !important;
	border: none !important; border-bottom: 1px solid var(--sp-border) !important; border-radius: 0 !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
	font: inherit !important; line-height: 1.3 !important; min-height: 0 !important;
	-webkit-appearance: none; appearance: none; cursor: pointer; transition: background .12s ease;
}
.ama-sp button.ama-sp-var__opt:last-child { border-bottom: none !important; }
.ama-sp button.ama-sp-var__opt:hover { background: var(--sp-paper) !important; }
.ama-sp button.ama-sp-var__opt.is-active { background: var(--sp-cream) !important; box-shadow: inset 0 0 0 2px var(--sp-navy) !important; }
.ama-sp button.ama-sp-var__opt.is-disabled { cursor: not-allowed; }

/* Availability colour-coding: green rail = in stock, muted/red = sold out. */
.ama-sp button.ama-sp-var__opt.is-instock { box-shadow: inset 4px 0 0 var(--sp-green, #2e7d46) !important; }
.ama-sp button.ama-sp-var__opt.is-instock.is-active { box-shadow: inset 4px 0 0 var(--sp-green, #2e7d46), inset 0 0 0 2px var(--sp-navy) !important; }
.ama-sp button.ama-sp-var__opt.is-soldout { box-shadow: inset 4px 0 0 #b9b3a8 !important; background: var(--sp-paper) !important; }
.ama-sp button.ama-sp-var__opt.is-soldout .ama-sp-var__name,
.ama-sp button.ama-sp-var__opt.is-soldout .ama-sp-var__price { color: var(--sp-muted) !important; }
.ama-sp button.ama-sp-var__opt.is-soldout .ama-sp-var__name { text-decoration: line-through; }
.ama-sp button.ama-sp-var__opt.is-soldout .ama-sp-var__radio { opacity: .4; }

/* Stock pill inside a card. */
.ama-sp-var__stock { display: inline-block; margin-top: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; }
.ama-sp-var__stock--in  { color: var(--sp-green, #2e7d46); background: rgba(46,125,70,.1); }
.ama-sp-var__stock--out { color: #8a8378; background: rgba(138,131,120,.15); }
.ama-sp-var__radio { width: 18px; height: 18px; border: 2px solid var(--sp-border); border-radius: 50%; flex-shrink: 0; position: relative; }
.ama-sp .ama-sp-var__opt.is-active .ama-sp-var__radio { border-color: var(--sp-navy); }
.ama-sp .ama-sp-var__opt.is-active .ama-sp-var__radio::after { content: ""; position: absolute; inset: 3px; background: var(--sp-navy); border-radius: 50%; }
.ama-sp-var__main { flex: 1; min-width: 0; }
.ama-sp-var__name { font-weight: 700; font-size: 0.9375rem; color: var(--sp-text); }
.ama-sp-var__desc { display: block; font-size: 0.78125rem; color: var(--sp-muted); margin-top: 2px; font-weight: 400; }
.ama-sp-var__price { font-weight: 700; font-size: 0.9375rem; color: var(--sp-text); white-space: nowrap; }
.ama-sp-var__price .woocommerce-Price-amount,
.ama-sp-var__price bdi { color: var(--sp-text) !important; }

/* Hide WooCommerce's default variation table once the cards are in. */
.ama-sp.ama-sp--has-var-cards .variations { display: none !important; }

/* Dropdown mode (many options): skin WC's native <select> instead of cards. */
.ama-sp--var-select .variations td.label label { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sp-muted); }
.ama-sp--var-select .variations select {
	width: 100%; max-width: 100%; padding: 12px 40px 12px 16px;
	font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--sp-text);
	background: #fff; border: 1px solid var(--sp-border); border-radius: 6px;
	-webkit-appearance: none; appearance: none; cursor: pointer;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M2 4l5 6 5-6" fill="none" stroke="%23555" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat; background-position: right 14px center;
}
.ama-sp--var-select .variations select:focus-visible { outline: 3px solid var(--sp-navy); outline-offset: 1px; }
.ama-sp--var-select .variations select option:disabled { color: #b9b3a8; }
.ama-sp--var-select .variations .reset_variations { font-size: 0.8125rem; }

/* WC's live variation price + reset link (shown once a card is picked). */
.ama-sp .woocommerce-variation-price { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); }
.ama-sp .woocommerce-variation-price .woocommerce-Price-amount { color: var(--sp-navy) !important; }
.ama-sp .reset_variations { font-size: 0.75rem; color: var(--sp-maroon) !important; margin-left: 8px; }
.ama-sp .woocommerce-variation-availability { margin: 0 0 12px; font-size: 0.875rem; }

/* Fallback layout if the cards can't build (multi-attribute / AJAX variations /
   JS off) — make the raw WooCommerce variations form stack cleanly. */
.ama-sp .variations { display: block !important; width: 100%; margin: 0 0 16px; border: 0; }
.ama-sp .variations tbody,
.ama-sp .variations tr { display: block; }
.ama-sp .variations td,
.ama-sp .variations th { display: block; width: 100%; padding: 0 0 6px !important; border: 0 !important; }
.ama-sp .variations th.label label { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); font-weight: 700; }
.ama-sp .variations td.value select { width: 100%; padding: 11px 12px !important; border: 1px solid var(--sp-border) !important; border-radius: 4px !important; background: #fff !important; color: var(--sp-text) !important; }

/* ── Meta ──────────────────────────────────────────────────────────────── */
.ama-sp__meta { margin: 0; padding-top: 22px; border-top: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 8px; }
.ama-sp__meta-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; margin: 0; font-size: 0.8125rem; }
.ama-sp__meta-row dt { margin: 0; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); padding-top: 2px; }
.ama-sp__meta-row dd { margin: 0; color: var(--sp-text); }
.ama-sp__meta-row a { color: var(--sp-navy); text-decoration: none; }
.ama-sp__meta-row a:hover { color: var(--sp-maroon); text-decoration: underline; }

/* ══ Bottom: data tabs ═════════════════════════════════════════════════════ */
.ama-sp__detail { margin-top: 56px; }
.ama-sp .woocommerce-tabs ul.tabs {
	display: flex; gap: 28px; list-style: none; margin: 0 0 26px; padding: 0 0 0;
	border-bottom: 1px solid var(--sp-border);
}
.ama-sp .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; }
.ama-sp .woocommerce-tabs ul.tabs li a {
	display: inline-block; padding: 0 0 12px; font-size: 0.9375rem; font-weight: 600;
	color: var(--sp-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ama-sp .woocommerce-tabs ul.tabs li.active a,
.ama-sp .woocommerce-tabs ul.tabs li a:hover { color: var(--sp-navy); border-bottom-color: var(--sp-maroon); }
/* No max-width here. It used to be capped at 760px for comfortable line length,
   but .ama-sp is 1240px wide, so the description stepped in by 480px against
   everything above it and read as the page shrinking at the tabs. The panel now
   follows the page container like the rest of the layout. */
.ama-sp .woocommerce-Tabs-panel { font-size: 0.95rem; line-height: 1.8; color: var(--sp-text); }
.ama-sp .woocommerce-Tabs-panel h2 { font-family: var(--font-serif, Georgia, serif); font-size: 1.3rem; color: var(--sp-navy); }
.ama-sp .woocommerce-Tabs-panel p:first-child { margin-top: 0; }

/* ══ Related: "You may also like" ══════════════════════════════════════════ */
.ama-sp__related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--sp-border); }
.ama-sp__related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ama-sp__related-title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--sp-navy); margin: 0; }
.ama-sp__related-all { font-size: 0.8125rem; font-weight: 600; color: var(--sp-maroon); text-decoration: none; white-space: nowrap; }
.ama-sp__related-all:hover { text-decoration: underline; }
.ama-sp__related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.ama-sp-rel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sp-border); border-radius: 4px; overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: transform .18s ease, box-shadow .18s ease; }
.ama-sp-rel:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.11); }
/* PORTRAIT, like the shop card: a 4/3 landscape frame cut a portrait cover
   down to a horizontal band of its middle. */
.ama-sp-rel__cover { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #fff; }
/* Same `.elementor img { height: auto }` fix as the gallery image above. */
.ama-sp-rel__img.ama-sp-rel__img { width: 100%; height: 100%; object-fit: fill; display: block; }
.ama-sp-rel__img--ph { width: 100%; height: 100%; display: block;
	background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 14px), var(--sp-navy); }
.ama-sp-rel__body { padding: 14px 16px 16px; }
.ama-sp-rel__eyebrow { margin: 0 0 5px; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-maroon); }
/* Element+class, like .ama-shop-card__title on the archive: a bare class loses
   to the Elementor Kit's global h3 typography, which rendered these titles at
   heading size. */
.ama-sp-rel .ama-sp-rel__title { margin: 0 0 4px; font-size: 1.2rem !important; line-height: 1.35 !important; font-weight: 700 !important; }
.ama-sp-rel .ama-sp-rel__title a { color: var(--sp-navy); text-decoration: none; }
.ama-sp-rel .ama-sp-rel__title a:hover { color: var(--sp-maroon); }
.ama-sp-rel__subtitle { margin: 0 0 8px; font-size: 0.8125rem; font-style: italic; color: var(--sp-muted); }
.ama-sp-rel__price { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--sp-text); }

/* ══ Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.ama-sp__top { grid-template-columns: 1fr; gap: 32px; }
	.ama-sp__gallery-main { max-width: 360px; }
	.ama-sp__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ama-sp__cart .single_add_to_cart_button { min-width: 0; }
	/* 2-up, matching the shop grid: with the portrait frame a single column
	   makes one related card taller than a phone screen. */
	.ama-sp__related-grid { grid-template-columns: repeat(2, 1fr); }
	.ama-sp__meta-row { grid-template-columns: 88px 1fr; }
}