/* Overlay Styling */
:root {
  --color-background: #ffffff;
  --color-text: #000000;
  --color-overlay-background: rgba(0, 0, 0, 0.7);
  --color-button-background: #005EFF;
  --color-blue-background: #0F0054;
  --color-button-text: #ffffff;
  --font-family: Arial, sans-serif;
  --font-size-base: 16px;
  --spacing-base: 1rem;
  --border-radius: 4px;
  --z-index-overlay: 99999999;
}

#overlay-window.tm-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay-background);
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-overlay);
}

#overlay-window .overlay-content {
  background-color: var(--color-background);
  color: var(--color-text);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tm-overlay__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-base);
  flex-shrink: 0;
  padding: var(--spacing-base);
  padding-bottom: calc(var(--spacing-base) * 0.75);
  border-bottom: 1px solid #e0e0e0;
}

.tm-overlay__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-family: var(--font-family);
  padding-right: 0.5rem;
}

.tm-overlay__close {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin: -0.5rem -0.5rem -0.5rem 0;
  padding: 0 0.75rem;
  border: 1px solid var(--color-blue-background);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-family);
}

.tm-overlay__close:hover,
.tm-overlay__close:focus-visible {
  background-color: #f2f2f2;
  outline: 2px solid var(--color-button-background);
  outline-offset: 2px;
}

#overlay-window .overlay-content form#overlay-form {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-base);
}

#overlay-window .overlay-content .product-unit {
  margin: 0 0 calc(var(--spacing-base) * 2);
  padding: 0;
  border: 0;
  min-width: 0;
}

.tm-overlay__legend {
  padding: 0;
  margin: 0 0 var(--spacing-base);
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-family);
}

#overlay-window .overlay-content .product-unit label {
  display: block;
  margin-bottom: calc(var(--spacing-base) / 4);
}

#overlay-window .overlay-content .product-unit input,
#overlay-window .overlay-content .product-unit select,
#overlay-window .overlay-content .product-unit textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 3px;
  border: 1px solid var(--color-blue-background);
  margin-bottom: var(--spacing-base);
  font-family: var(--wp--preset--font-family--base);
  font-size: var(--wp--preset--font-size--base);
}

#overlay-window .overlay-content .overlay-footer {
  padding: var(--spacing-base);
  background-color: #f2f2f2;
  text-align: right;
  position: sticky;
  bottom: 0;
}

#overlay-window .overlay-content button[type="submit"] {
  background-color: var(--color-button-background);
  color: var(--color-button-text);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-blue-background);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--base);
  font-size: var(--wp--preset--font-size--base);
  float: right;
}

#overlay-window .overlay-content .overlay-footer button[type="submit"]:hover {
  background-color: #005a8c;
}

body.overlay-active {
  overflow: hidden;
}

.tm-cart-meta__heading {
  margin: 0 0 0.35em;
  font-weight: 700;
  font-size: inherit;
}


.tm-cross-sells {
	margin-top: 20px;
    margin-bottom: 20px;
}

.tm-cross-sells h2 {
    font-size: var(--wp--preset--font-size--medium);
    margin-bottom: 10px;
}

.cross-sell-products {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.cross-sell-product {
    position: relative;
    max-width: 500px;
}

.cross-sell-product img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.cross-sell-product .custom-product-image {
	height: auto !important;
}

.cross-sell-product-image {
	border: 1px solid var(--color-blue-background);
}

.cross-sell-product-details {
	width: 100%;
	display: flex;
}
.cross-sell-product-info {
	width: 100%;
	padding: 0 15px;
	text-align: left;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cross-sell-product-info p {
	margin-bottom: 0 !important;
}
.cross-sell-product-button {
	width: 120px;
	/* Flex items shrink by default; without this, the button column gets
	   squeezed below 120px on narrow viewports (once the info column's
	   content needs more room than is available), causing "Added" to wrap
	   onto two lines instead of staying on one. */
	flex-shrink: 0;
	display: flex;
    justify-content: flex-end;
	flex-direction: column;
}
/* Matches the .cross-sell-product stack breakpoint in tm-woocommerce.css:
   once the image/info/button are stacked full-width, the row (info + button
   side by side) should stack too, and the button should size to the full
   row width instead of staying pinned at 120px. */
@media screen and (max-width: 394px) {
	.cross-sell-product-details {
		flex-direction: column;
		/* Matches .cross-sell-product's own gap (tm-woocommerce.css) so
		   image-to-content and content-to-button spacing read as equal. */
		gap: 15px;
	}
	.cross-sell-product-button {
		width: 100%;
		/* .cross-sell-product-info has its own 0 15px padding (unconditional,
		   above) - without matching it here, the button sits flush against
		   the left edge once stacked while the text above it is inset,
		   making the two look misaligned. */
		padding: 0 15px;
	}
}
.cross-sell-product button {
    display: block;
    width: 100%;
    height: fit-content;
}
.add-cross-sell-to-cart {
	margin-top: 0 !important;
	padding: 10px !important;
}
.add-cross-sell-to-cart:disabled[disabled] {
	cursor: default;
	pointer-events: none;
}

.cross-sell-product:hover::after {
    content: attr(data-info);
    display: block;
    position: absolute;
    background: #ffffff;
    color: #000000;
    border-radius: 0 0 0 5px;
    border: 1px solid var(--color-blue-background);
    border-top: 0;
    border-right: 0px;
    padding: 15px;
    z-index: 10;
    width: calc(100% - 30px);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    font-size: 16px;
}


.component_inner {
	display: none;
}

.woocommerce-checkout-review-order .component_table_item_indent {
	display: none;
}

.woocommerce-checkout-review-order .component_table_item_subtotal {
	display: none;
}

.component_title_text {
	font-size: var(--wp--preset--font-size--base);
	font-weight: normal;
}

.included-checks-title {
	margin-bottom: 5px !important;
	font-size: var(--wp--preset--font-size--medium);
}

.component_title_wrapper {
	margin-bottom: 10px;
}
.composite_component:last-child {
	margin-bottom: 35px;
}

.component_title_wrapper .component_title {
	margin-bottom: 10px !important;
	padding-left: 20px;
	position: relative;
	display: flex;
}
.component_title_wrapper .component_title:before {
	content: "•";
	position: absolute;
	top: 0;
	left: 0;
	color: #000;
	font-size: var(--wp--preset--font-size--base);
	font-weight: normal;
}

.check-information, .included-checks {
	font-size: 16px;

	li {
		line-height: 20px;
		margin-bottom: 5px;
	}
}
.meta-key {
	margin-bottom: 0px;
}
.meta-value {
	font-weight: 600;
}