/* =========================================================================
   Maglula Mobile UX — STAGING ONLY
   Every rule below lives inside @media (max-width: 1023.98px) — phones AND
   tablets (UI-02), matching the theme's own mobile/desktop switch (UI-01).
   Desktop (>= 1024px) is untouched.
   ========================================================================= */

@media (max-width: 1023.98px) {

	/* ---------------------------------------------------------------------
	   1. Typography & spacing pass
	   --------------------------------------------------------------------- */
	/* Gap before the P/N list. DOM evidence (staging, live measurement,
	   UpLULA + a second variable product): on any product with a color
	   variations form, `form.variations_form.cart` sits between the price
	   row and the P/N `.description-row`, carrying the theme's own default
	   ~33px margin-bottom — by far the largest single contributor to the
	   gap Yuval flagged as too large. Products with no color variations
	   (most of the catalog) have no such form here at all, so this rule is
	   a no-op for them — nothing to reduce, nothing else changes. The P/N
	   grid itself, and all its data, are completely untouched.
	*/
	body.single-product .summary.entry-summary .variations_form.cart {
		margin-bottom: 12px !important;
	}
	/* Separation before "Major USA Dealers for this product". DOM evidence
	   (staging, UpLULA): the dealer container itself has zero top spacing
	   of its own — the only space above it came from the last accordion
	   row's 6px margin-bottom (rule below), which read as accidental
	   rather than an intentional section break. Scoped to the dealer
	   container itself, so it only ever adds space where a dealer section
	   actually exists (a no-op on the one product that has none). */
	body.single-product .dealers-for-product-container {
		margin-top: 26px !important;
	}
	body.single-product .summary-content-row,
	body.single-product .note-content-row {
		display: block !important; /* safety net: guarantees the accordion
			toggle/panel stack vertically even if a future style adds a
			flex/grid layout to the row itself */
		margin-bottom: 6px !important;
	}
	body.single-product .summary-content-row p,
	body.single-product .note-content-text p {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}
	body.single-product .summary-content-row h2,
	body.single-product .note-content-row h2 {
		font-size: 20px !important;
		margin-top: 22px !important;
		margin-bottom: 10px !important;
	}
	body.single-product .summary-content-row ul,
	body.single-product .summary-content-row li {
		font-size: 16px !important;
		line-height: 1.5 !important;
	}
	/* Accordion heading margin reset — scoped selector (type + 2 classes)
	   deliberately outweighs the ".summary-content-row h2" rule above so it
	   wins regardless of stylesheet order once JS adds this class to the
	   real (moved, not cloned) <h2> that becomes the toggle bar. */
	body.single-product .summary-content-row .mux-accordion-heading,
	body.single-product .note-content-row .mux-accordion-heading {
		margin: 0 !important;
	}

	/* ---------------------------------------------------------------------
	   2. Gallery arrows — subtle overlay buttons that drive the existing
	      Swiper instance directly (its own navigation module is configured
	      but has no bound DOM elements, so we add our own rather than
	      rewire it). Small white circles with a dark icon, not a dark disc.
	   --------------------------------------------------------------------- */
	body.single-product .woocommerce-product-gallery {
		position: relative;
	}
	.mux-gallery-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 20;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.88);
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		cursor: pointer;
		color: #1c1c1c; /* SVG uses stroke="currentColor" */
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
		-webkit-tap-highlight-color: transparent;
	}
	.mux-gallery-arrow svg {
		width: 15px;
		height: 15px;
		display: block;
	}
	.mux-gallery-arrow.mux-gallery-prev { left: 8px; }
	.mux-gallery-arrow.mux-gallery-next { right: 8px; }

	/* ---------------------------------------------------------------------
	   3. Color swatches — hide the "Color" label, clean single selection
	      ring. DOM-verified on staging (read-only inspection, UpLULA):

	      - The label lives in `table.variations tr > td.label > label`,
	        standard WooCommerce core markup, sibling to `td.value`
	        (which contains our already-verified `.select_box_colorpicker`).
	        Hidden below via :has() scoped to that exact row — confirmed
	        working directly against the live DOM, not a guess.
	      - The selected swatch already gets `.selected` added by the
	        theme's own script (confirmed: `select_option_colorpicker
	        select_option selected`), and its only pre-existing "marker" is
	        a soft box-shadow glow (no separate marker element — each
	        swatch is a single <span> with a background-color/image and no
	        children). That glow is what reads as a "redundant" marker next
	        to a crisp ring, so it's suppressed below and replaced with one
	        clean outline.
	      - Sizing/spacing (width/height/margin/wrap) is intentionally NOT
	        set here — verification found the live swatch width/margin are
	        re-asserted by something in the theme/plugin stack that plain
	        stylesheet rules could not reliably beat, even scoped and
	        !important (not an inline style, not a CSS cascade layer — both
	        checked and ruled out). That part is handled in JS instead
	        (sizeColorSwatches / sizeGallerySwatches), which was verified to
	        win reliably. See the JS file for the sizing/wrap rules and the
	        fit numbers.
	   --------------------------------------------------------------------- */
	body.single-product table.variations tr:has(.select_box_colorpicker) td.label {
		display: none !important;
	}
	/* Single, clean outer selection ring, replacing the theme's own softer
	   box-shadow glow so there's exactly one selection indicator. */
	body.single-product .select_option_colorpicker.selected,
	body.single-product .select_option_colorpicker.active,
	body.single-product .select_option_colorpicker[aria-checked="true"] {
		outline: 2px solid #1c1c1c !important;
		outline-offset: 2px !important;
		box-shadow: none !important;
		border-radius: 50%;
	}

	/* Gallery pagination dots are hidden ONLY once JS has confirmed a
	   color-swatch box exists and has actually been moved into this exact
	   spot (class added by moveColorSwatchesIntoGallery in the JS file) —
	   products without color swatches keep their normal dots untouched.
	   Positioning matches the measured live dots geometry on staging (the
	   dots sit at the bottom edge of .woocommerce-product-gallery, which
	   already has position:relative from the gallery-arrows rule above),
	   so the swatch row lands in the same visual slot the dots occupied,
	   above the arrows' z-index so it's never covered, and inset far
	   enough from each edge to clear the 30px prev/next arrow circles
	   sitting at left:8px / right:8px. */
	body.single-product .woocommerce-product-gallery.mux-gallery-has-swatches .swiper-pagination {
		display: none !important;
	}
	.mux-gallery-swatches {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 6px;
		z-index: 15;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0 40px; /* matches ARROW_CLEARANCE in the JS file's
			sizeGallerySwatches(), so this padding doubles as a hard max-width
			safety cap (via .select_box_colorpicker's max-width:100% below) if
			that computed sizing is ever slightly off. */
		pointer-events: none; /* the wrapper itself is just a positioning box;
			only the real swatch box inside is interactive (below) */
	}
	.mux-gallery-swatches .select_box_colorpicker {
		pointer-events: auto;
		max-width: 100%;
	}
	/* Circular swatches inside the gallery. Root cause (verified live via
	   getComputedStyle + a full doc.styleSheets scan): the theme's own
	   circle-shaping rules for .select_option_colorpicker (and its inner
	   span) are scoped with the full ancestor chain
	   ".woocommerce div.product .variations .value .select_box_colorpicker
	   .select_option_colorpicker", which stops matching once the real box
	   is relocated out of table.variations/.value and into this wrapper —
	   confirmed both the outer element and the inner span fell back to
	   border-radius:0 (square) once moved, even though the selected swatch
	   still looked round (that's this file's OWN selection-ring rule in
	   section 3 above, unrelated to the base shape). Re-declared here,
	   scoped to this wrapper only, so products whose swatches are NOT moved
	   into the gallery (no colors, or gallery/pagination never appeared)
	   are completely unaffected. */
	.mux-gallery-swatches .select_option_colorpicker {
		border-radius: 50% !important;
	}
	.mux-gallery-swatches .select_option_colorpicker span {
		border-radius: 50% !important;
	}

	/* ---------------------------------------------------------------------
	   4. P/N list — two-column grid; all part numbers stay visible, none
	      hidden or truncated. Scoped with :has(> p:nth-child(2)) — only rows
	      with 2+ direct paragraph children (the P/N-list shape) get the
	      grid; a `.description-row` with a single paragraph (a single part
	      number, or plain body copy) is left completely alone.
	      Catalog-wide confirmation completed across all 31 published
	      products: every row with 2+ real part numbers matches and grids
	      correctly (verified directly against the live DOM, not just
	      visually, on the 8-color UpLULA row), and every single-part-number
	      row correctly does not match. One structurally unusual row
	      (`x12-t12`: one real `<p>` plus two pre-existing empty `<h6>`
	      elements, unrelated content authoring, not part of this feature)
	      was found and confirmed to still resolve correctly, since it only
	      has one genuine part number either way — see the project's Known
	      Issues doc for that content note.
	   --------------------------------------------------------------------- */
	body.single-product .description-row:has(> p:nth-child(2)) {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		column-gap: 16px !important;
		row-gap: 10px !important;
		background: transparent !important;
		border-radius: 0 !important;
		padding: 0 !important;
	}
	body.single-product .description-row:has(> p:nth-child(2)) p {
		margin: 0 !important;
		font-size: 15px !important;
		line-height: 1.35 !important;
	}
	/* Two-line hierarchy (section 4): the P/N code is the strong/primary
	   line, the color/name is a secondary, lighter line directly beneath
	   it. Applied by JS (initPnHierarchy) only to paragraphs that match the
	   catalog's standard "p/n: CODE (Name)" text shape — any paragraph that
	   doesn't match that shape is left completely untouched (graceful
	   no-op), so this can never corrupt or hide real product data on a
	   structurally different row. */
	body.single-product .description-row .mux-pn-code {
		display: block;
		font-size: 15px;
		font-weight: 700;
		color: #1c1c1c;
	}
	body.single-product .description-row .mux-pn-name {
		display: block;
		font-size: 14px;
		font-weight: 400;
		color: #6b6b6b;
	}
	body.single-product .description-row .mux-pn-extra {
		font-weight: 600;
	}

	/* ---------------------------------------------------------------------
	   5. Accordions — "Option C — Defined Accordion Row" (Yuval-finalized
	      design). Every .summary-content-row and the Intellectual Property
	      (.note-content-row) section. DOM-verified (UpLULA): each row's
	      <h2> has only a text node inside (no nested elements), so the
	      standard accessible accordion pattern applies cleanly —
	      <h2><button aria-expanded aria-controls><span class="mux-accordion-label">
	      text</span>chevron</button></h2>. JS moves the heading's real text
	      (never clones it) into a real native <button> nested inside the
	      same (also moved, not cloned) <h2>, so there is exactly one
	      visible heading and the interactive control is a genuine button.
	      The whole row is a subtle, clearly-defined bar (light neutral
	      background + hairline border) rather than a heavy white card —
	      entire row clickable, label left, a noticeably larger chevron
	      right (down when closed, rotated up when open).
	   --------------------------------------------------------------------- */
	.mux-accordion-toggle {
		display: flex;
		width: 100%;
		min-height: 48px;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		cursor: pointer;
		padding: 13px 14px;
		background: #f6f6f4;
		border: 1px solid #e3e2df;
		border-radius: 8px;
		font: inherit;
		color: inherit;
		text-align: left;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
	}
	.mux-accordion-label {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.25;
		white-space: nowrap; /* one-line requirement; JS (fitLabelOneLine)
			shrinks font-size as needed before falling back to this as a
			last-resort visual safety net — see JS comment. */
		overflow: hidden;
	}
	.mux-accordion-chevron {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		color: #55534d;
		transition: transform 0.2s ease;
	}
	.mux-accordion-chevron svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	.mux-row-expanded .mux-accordion-chevron { transform: rotate(180deg); }

	/* Smaller, secondary variant — used only for the optional photo-upload
	   sub-accordion inside the review form (section 11), so it visually
	   reads as a lesser/nested control, never competing with the main
	   Option-C rows above it. */
	.mux-accordion-toggle-secondary {
		min-height: 44px;
		padding: 10px 14px;
		background: #fff;
		border-color: #ddd;
	}
	.mux-accordion-toggle-secondary .mux-accordion-label {
		font-size: 15px;
		font-weight: 500;
	}
	.mux-accordion-toggle-secondary .mux-accordion-chevron {
		width: 20px;
		height: 20px;
	}

	/* Grid-based expand/collapse: no fixed max-height ceiling, so unusually
	   long content is never clipped. The outer element is the animated
	   grid track (0fr collapsed, 1fr expanded); the inner wrapper clips
	   during the transition only, never after it settles. */
	.mux-accordion-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease;
	}
	.mux-row-expanded .mux-accordion-panel {
		grid-template-rows: 1fr;
	}
	.mux-accordion-panel-inner {
		overflow: hidden;
		min-height: 0;
	}

	/* ---------------------------------------------------------------------
	   6. Reviews — spacing pass + show-more control.

	      Spacing: DOM evidence (staging, live measurement, UpLULA) —
	      `#comments ol.commentlist > li` carries a large (~43px) default
	      margin-bottom, and the star rating / review text / meta line each
	      add their own default margin-bottom on top of that. Reduced here,
	      generically (any real review <li>, not one product's markup);
	      font-size/line-height are untouched so readability is unaffected.
	      The optional per-review photo wrapper is empty on the (large)
	      majority of reviews that have no photo, but still carried its own
	      20px margin-bottom even then — zeroed only in the empty case via
	      :empty, so a review that DOES have a photo keeps clear space
	      around it.

	      Show-more control: reuses the exact same Option-C accordion
	      classes as the main content accordions (.mux-accordion-toggle /
	      .mux-accordion-label / .mux-accordion-chevron — see section 5)
	      rather than duplicating that visual language, so this is
	      guaranteed to look identical (defined row, subtle border/
	      background, label left, chevron right, full row clickable,
	      48px+ touch target). Only a small top-margin and the chevron's
	      own rotated-when-expanded state are added here.
	   --------------------------------------------------------------------- */
	#comments ol.commentlist > li {
		margin-bottom: 18px !important;
	}
	#comments ol.commentlist > li.mux-hidden-review {
		display: none;
	}
	#comments ol.commentlist .star-rating {
		margin-bottom: 6px !important;
	}
	#comments ol.commentlist .description > p:not(.meta) {
		margin-bottom: 6px !important;
	}
	#comments ol.commentlist .description > p.meta {
		margin-bottom: 4px !important;
	}
	#comments ol.commentlist .kt-reviews-image-container:empty {
		margin: 0 !important;
	}
	#mux-show-more-reviews {
		margin-top: 8px;
	}
	#mux-show-more-reviews.mux-expanded .mux-accordion-chevron {
		transform: rotate(180deg);
	}

	/* ---------------------------------------------------------------------
	   7. Write a Review — mobile reflow. Visual hierarchy and spacing only:
	      no field is added, removed, reordered, or hidden; validation,
	      CAPTCHA, cookie consent, authorization and the reCAPTCHA badge are
	      all left exactly as they behave today. The photo-upload area is
	      relabeled by JS (text only) and stays visually secondary to Send.
	   --------------------------------------------------------------------- */
	body.single-product #review_form_wrapper form.comment-form p.comment-form-rating,
	body.single-product #review_form_wrapper form.comment-form p.comment-form-author,
	body.single-product #review_form_wrapper form.comment-form p.comment-form-email {
		margin-bottom: 12px !important;
	}
	body.single-product #review_form_wrapper form.comment-form p.comment-form-cookies-consent {
		margin-top: 10px !important;
		margin-bottom: 14px !important;
	}
	body.single-product #review_form_wrapper form.comment-form p.comment-form-comment {
		margin-bottom: 16px !important;
	}
	body.single-product #review_form_wrapper form.comment-form div.text-before-upload-file {
		margin-bottom: 8px !important;
		font-size: 13px !important;
		opacity: 0.8;
	}
	body.single-product #review_form_wrapper form.comment-form #rating {
		appearance: none;
		-webkit-appearance: none;
		border: none;
		border-bottom: 1px solid #000;
		border-radius: 0;
		background: transparent;
		font-size: 15px;
		padding: 4px 0;
		width: 100%;
		height: auto;
	}
	/* Make Send the clear primary action. DOM evidence (staging, read-only):
	   .btn-form-submit is a real <button> whose arrow icon is an inline SVG
	   with fill:#fff hard-coded in its own <style> — i.e. it was designed to
	   sit on a filled/dark background, but renders with a transparent
	   background here, leaving it looking like plain text rather than a
	   button. Filling it in with a solid dark pill makes it unmistakably
	   the primary action, full-width for an easy mobile tap target. Font
	   size/weight/padding from the previous version are kept. */
	body.single-product #review_form_wrapper form.comment-form .submit-form-box .btn-form-submit {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		box-sizing: border-box;
		font-size: 16px !important;
		font-weight: 700 !important;
		padding: 14px 20px !important;
		background: #1c1c1c !important;
		color: #fff !important;
		border: none !important;
		border-radius: 999px !important;
	}
	body.single-product #review_form_wrapper form.comment-form .submit-form-box .btn-form-submit .btn-text {
		color: #fff !important;
	}
	body.single-product #review_form_wrapper form.comment-form .submit-form-box .btn-form-submit .arow-image svg .cls-1 {
		fill: #fff !important;
	}
	/* Keep the photo upload visually secondary/optional. DOM evidence
	   (staging, read-only): the plugin renders this as a large full-width
	   grey pill (~100px tall, 41px internal padding) that visually competes
	   with — and in practice out-weighs — the Send button above. Shrunk to
	   a compact, lightly-bordered, inline control so it reads as an optional
	   extra rather than the form's primary action. No functional change:
	   still the same <label for="wcpr_image_upload">, same hidden file
	   input, same click-to-upload behavior. */
	body.single-product #review_form_wrapper form.comment-form .wcpr-comment-form-images .image-upload-label {
		display: inline-block !important;
		width: auto !important;
		height: auto !important;
		padding: 9px 18px !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		background: transparent !important;
		border: 1px solid #ccc !important;
		border-radius: 999px !important;
		opacity: 0.85;
	}

	/* Section 11 — photo upload becomes a secondary, default-CLOSED mini
	   accordion. JS (initReviewPhotoAccordion) inserts a new
	   .mux-photo-accordion-wrap in place of the (sibling, not parent)
	   explanatory paragraph, then moves both the real paragraph and the
	   real upload container into its panel together, verbatim and
	   unchanged. Reuses the same generic .mux-accordion-panel /
	   .mux-row-collapsed / .mux-row-expanded classes/behavior as the main
	   content accordions. */
	body.single-product #review_form_wrapper form.comment-form .mux-photo-accordion-wrap {
		margin-top: 4px;
		margin-bottom: 10px;
	}
	body.single-product #review_form_wrapper form.comment-form .mux-photo-accordion-wrap .mux-accordion-panel-inner {
		padding-top: 10px;
	}
	body.single-product #review_form_wrapper form.comment-form .mux-photo-accordion-wrap .text-before-upload-file {
		margin-top: 0 !important;
	}
}

/* ====================================================================
   UI-02 TABLET — product-page layout (this file loads only on product
   pages). Gallery cap + reading column only take effect where the
   viewport is wider than the cap; below that they simply fit.
   ==================================================================== */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.single-product .woocommerce-product-gallery {
		max-width: 620px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body.single-product.woocommerce div.product .summary-and-image-wrapper .product-summary-wrapper,
	.single-product .added-summary-content,
	.single-product .comments-section-block {
		max-width: 760px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}
}

/* Review order for 768.02-1023.98: the Customizer already does this <=768.
   Body-qualified so it beats the Customizer's later, unconditional
   "#comments / #review_form_wrapper { width: 48% !important }". */
@media (min-width: 768.02px) and (max-width: 1023.98px) {
	body.single-product.woocommerce #reviews {
		flex-direction: column;
	}
	body.single-product.woocommerce #reviews #review_form_wrapper {
		width: 100% !important;
		order: 1;
	}
	body.single-product.woocommerce #reviews #comments {
		width: 100% !important;
		order: 2;
	}
}