.clear-both {
	clear: both;
}

#asm-product-shipping-calc {
	//display: none;
}

#kwm-product-ship-calc {
	width: 550px;
	margin: 10px 0px;
	border: 1px solid #cecece;
	border-radius: 10px;
	padding: 10px;
}

#ship_calc_title {
	font-weight: 600;
	text-align: center;
	margin-bottom: 5px;
}

.ship_calc {
	font-size: 1rem;
	padding: 3px;
}

.ship_calc_zip_title {
	float: left;
	width: 100px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ship_calc_zip {
	float: left;
	margin-bottom: 8px;
}

.ship_calc_input {
	height: 30px;
}

#ship_calc_zip_country_break {
	clear: both;
}

.ship_calc_country_title {
	float: left;
	width: 100px;
	font-weight: 600;
}

.ship_calc_country {
	float: left;
}

.ship_calc_sel {
	height: 30px;
}

#ship_calc_button_break {
	/*	clear: both;*/
}

.ship_calc_submit {
	float: left;
	padding-left: 10px;
}

#calc-button {
	width: 100%;
	margin-right: 0;
	margin-bottom: 0;
	-ms-flex-item-align: end;
	align-self: flex-end;
	padding: 0px 5px;
	font-size: var(--text-m);
	border: 1px solid var(--action);
	border-radius: var(--radius);
	background-color: var(--action);
	color: #ffffff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}

#calc_results {
	margin-top: 10px;
}

#ajax_results {}

.ajax_rates {
	float: left;
	width: 75px;
}

.ajax_methods {
	float: left;
}

.ajax_dates {
	float: left;
	font-weight: 600;
}

/* ==========================================================================
   PHONE BREAKPOINT  (Cornerstone "small" — max-width: 550px)
   --------------------------------------------------------------------------
   1. #kwm-product-ship-calc had a hard `width: 550px` while the product-info
      column is only ~277px on a 390px phone — the box overflowed ~273px and
      pushed the Country select + GO button off screen.
   2. #asm-product-shipping-calc is a non-floated block inside the floated
      <dl class="productView-info"> list, so the preceding floats intruded and
      "Zip Code:" collided with "Buy in bulk and save". Fixed with clear:both.
   3. The info list is capped at ~75% width on mobile, wasting ~90px. Released
      to 100% so the card fills the column.
   4. Labels/fields were 100px float columns — now stacked, full width.
   5. Type scale and vertical rhythm tightened (card ~242px instead of ~280px).
   6. Gap above the card uses PADDING, not margin: the element is cleared, and
      clearance absorbs margin-top (any value gave the same 0px gap).

   NOTE: .ajax_rates / .ajax_methods / .ajax_dates keep their float layout on
   purpose — the results markup uses an empty .ajax_rates div as a 75px spacer
   to indent the "Get it By..." line under the carrier name. Unfloating them
   turns that spacer into a full-width empty row and breaks the grouping.

   Anything above 550px is byte-for-byte unchanged.
   ========================================================================== */

@media (max-width: 550px) {

	/* --- 3. let the product-info column (and the card) use the full width --- */
	.productView-product .productView-info {
		width: 100%;
		max-width: 100%;
	}

	/* the dt/dd label pairs sit flush once widened — give them a gap
	   ("SKU:42381900300" / "Bulk Pricing:Buy in bulk and save") */
	.productView-info .productView-info-name {
		padding-right: 6px;
	}

	/* ----------------------------------------------------------------------
	   QUALITY GUARANTEE BADGE
	   The theme sets this in the compiled Stencil stylesheet
	   (theme-a77aa930-770f-013f-6d33-2a957edf84bd.css), which you can't edit
	   directly, so it is overridden here:

	     .trellis-productView-machine .productView-badge,
	     .trellis-productView-manual  .productView-badge,
	     .trellis-productView-part    .productView-badge
	         { position:absolute; top:-5px; right:5px; width:80px; height:80px }
	     @media (min-width:551px) { right:15px; width:110px; height:110px }
	     @media (min-width:801px) { right:25px; top:-10px; width:125px; height:125px }

	   It is positioned against .productView-price (the nearest positioned
	   ancestor). The price row is only ~27px tall, so an 80px badge hangs
	   75px below it — straight over the rating row, covering "Write a Review".

	   Fix is two parts: shrink it to 64px on phones, and reserve a matching
	   gutter on the rating row so the review links wrap instead of running
	   underneath. Only the phone sizes change; 551px+ keeps the theme's own
	   110px / 125px badge.
	   ---------------------------------------------------------------------- */
	.trellis-productView-machine .productView-badge,
	.trellis-productView-manual .productView-badge,
	.trellis-productView-part .productView-badge {
		width: 64px;
		height: 64px;
		top: -2px;
		right: 0;
	}

	.productView-rating {
		padding-right: 72px;
	}

	/* --- 2 + 6. clear the floated rows above, then pad away from them --- */
	#asm-product-shipping-calc {
		clear: both;
		width: 100%;
		padding-top: 10px;
	}

	/* --- 1 + 5. card: fluid width, tighter box --- */
	#kwm-product-ship-calc {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0 0 8px;
		padding: 10px 12px 12px;
		border-radius: 8px;
		font-size: 0.875rem;
		line-height: 1.3;
	}

	#kwm-product-ship-calc *,
	#kwm-product-ship-calc *::before,
	#kwm-product-ship-calc *::after {
		box-sizing: border-box;
	}

	#kwm-product-ship-calc #ship_calc_title {
		font-size: 0.9375rem;
		line-height: 1.2;
		margin: 0 0 10px;
		padding-bottom: 8px;
		border-bottom: 1px solid #ececec;
	}

	#kwm-product-ship-calc .ship_calc {
		font-size: inherit;
		padding: 0;
	}

	/* --- 4. stack label above field --- */
	#kwm-product-ship-calc .ship_calc_zip_title,
	#kwm-product-ship-calc .ship_calc_country_title {
		float: none;
		width: 100%;
		margin: 0 0 4px;
		font-size: 0.8125rem;
		line-height: 1.2;
		letter-spacing: .2px;
	}

	#kwm-product-ship-calc .ship_calc_zip,
	#kwm-product-ship-calc .ship_calc_country {
		float: none;
		width: 100%;
		padding-left: 0;
		margin: 0 0 10px;
	}

	#kwm-product-ship-calc .ship_calc_submit {
		float: none;
		width: 100%;
		padding-left: 0;
		margin: 2px 0 0;
	}

	/* font-size stays at 16px so iOS Safari does not zoom on focus */
	#kwm-product-ship-calc .ship_calc_input,
	#kwm-product-ship-calc .ship_calc_sel {
		width: 100%;
		max-width: 100%;
		height: 36px;
		min-height: 36px;
		padding: 0 8px;
		font-size: 16px;
		line-height: 36px;
		border-radius: 4px;
	}

	#kwm-product-ship-calc #calc-button {
		width: 100%;
		height: 36px;
		min-height: 36px;
		padding: 0 8px;
		font-size: 0.8125rem;
		line-height: 34px;
		letter-spacing: .4px;
	}

	/* --- quote results: keep the float layout, just tighten it --- */
	/* no border-top here: #calc_results is always in the DOM and only gets
	   filled in after a quote, so a rule border drew a stray line under GO
	   on every page load. Margin alone is invisible while it is empty. */
	#kwm-product-ship-calc #calc_results {
		margin-top: 12px;
		padding-top: 0;
		border-top: 0;
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	#kwm-product-ship-calc .ajax_rates {
		width: 66px;
	}

	#kwm-product-ship-calc .ajax_dates {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   APPEND-ONLY PATCH — paste at the very bottom of product-calc.css.
   Do not delete or edit anything above. These rules come later in the file,
   so they override the earlier ones automatically.
   ========================================================================== */

@media (max-width: 550px) {

	/* --- 1. QUALITY GUARANTEE badge -------------------------------------
	   The theme sizes it 80x80 at top:-5px, positioned against
	   .productView-price. That row is only ~27px tall, so the badge hangs
	   ~75px below it and lands on top of "Write a Review".
	   Shrink it and reserve a matching gutter on the rating row.
	   Phone only — 551px+ keeps the theme's 110px / 125px badge.        */

	.trellis-productView-machine .productView-badge,
	.trellis-productView-manual .productView-badge,
	.trellis-productView-part .productView-badge {
		width: 64px;
		height: 64px;
		top: -2px;
		right: 0;
	}

	.productView-rating {
		padding-right: 72px;
	}

	/* --- 2. stray divider under the GO button ---------------------------
	   #calc_results is always in the DOM and only fills in after a quote,
	   so its border-top drew a line on every page load. Kill the border and
	   padding; the margin alone is invisible while the box is empty.      */

	#kwm-product-ship-calc #calc_results {
		padding-top: 0;
		border-top: 0;
	}
}