/*

    Product page specific styles.

*/

.t-page-prod--tab-buttons-top .x-a11y-tabs__item {
    padding: 0.25rem 0;
}


/* Make the breakpoint less for a non responsive table on this page. This overrides the core style */
.c-table-responsive {
	border-collapse: collapse;
	width: 100%;
}
.c-table-responsive_thead {
	display: none;
}
.c-table-responsive__row {
	border-bottom: var(--default-border-width) solid var(--gray-200);
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	margin-bottom: calc(var(--default-spacing-unit) / 2);
}
.c-table-responsive__cell {
	display: block;
	padding: calc(var(--default-spacing-unit) / 2);
}
.c-table-responsive__cell::before {
	content: attr(data-label);
	display: block;
	font-weight: 700;
	text-align: left;
    font-size: 0.875rem;
}
.c-table-responsive__cell--flex {
	display: flex;
	justify-content: space-between;
}

.t-product-details-accessories {
	[role=tablist] {
		justify-content: unset;
	}
	
	.t-tab-accessories {
		max-height: 20rem;
		overflow: clip auto;
	}
}

.x-product-layout-purchase {
	:is(.software-box, .software-box2) {
		.buttons {
			display: flex;
			gap: 0.5rem;
			line-height: initial;
			
			a {
				align-items: center;
				align-self: start;
				background-color: var(--white);
				border: var(--default-border-width) solid var(--blue-400);
				border-radius: 2em;
				color: var(--blue-400);
				cursor: pointer;
				display: inline-flex;
				font-family: inherit;
				font-size: 0.75rem;
				font-weight: 500;
				justify-content: center;
				padding: calc(0.333em - var(--default-border-width)) calc(1em - var(--default-border-width));
				text-decoration: none;
				transition: background-color 100ms, color 125ms ease-in-out;
				-webkit-user-select: none;
				user-select: none;
				
				&:is(:focus, :hover) {
					background-color: var(--blue-400);
					color: var(--white);
				}
			}
		}
	}
}

.t-related-products {
	.t-related-products__select {
		max-width: 10rem;
		
		.c-form-checkbox {
			width: unset;
			
			.c-form-checkbox__caption::before {
				margin-right: 0;
			}
		}
		
		.c-form-input {
			margin: 0;
			width: 48px;
		}
	}
	
	.t-related-products__code,
	.t-related-products__price {
		white-space: nowrap;
	}
	
	.t-related-products__name {
        order: -1;
		width: Calc(100% - 48px - 2rem);
        min-width: Calc(100% - 48px - 2rem);
        max-width: Calc(100% - 48px - 2rem);
	}

	.t-related-products__image {
		width: Calc(48px + 1rem);
        min-width: Calc(48px + 1rem);
        max-width: Calc(48px + 1rem);
        order: -2;
	}    
}

.t-related-products__name-text {
    padding-top:1em;
	font-weight: 500;
}

.c-table-responsive tr td:first-child,
.c-table-responsive tr th:first-child {
	padding-left:0.5rem;
}	

@media screen and (min-width: 30em) {
	.c-table-responsive_thead {
		display: table-header-group;
	}
	
	.c-table-responsive__row {
		display: table-row;
		margin-bottom: 0;
	}
	
	.c-table-responsive__cell {
		display: table-cell;
		padding: 0.5rem;
		text-align: left;
		vertical-align: top;
	}
	
	.c-table-responsive__cell--standard {
		padding: var(--default-spacing-unit);
	}
	
	.c-table-responsive__cell--wide {
		padding: calc(var(--default-spacing-unit) * 2);
	}
	
	.c-table-responsive__cell::before {
		content: "";
		display: none;
	}

    .t-related-products__name-text {
        padding-top:0;
    }  
  
}

.t-page-prod .x-a11y-tabs__link {
	background-color: var(--blue-400);
	border: var(--default-border-width) solid currentColor !important;
	border-radius: 2rem;
	color: var(--white);
	font-size: 0.875rem;
	font-weight: unset;
	padding: 0.5em 2em;

	&[aria-selected] {
		background-color: var(--blue-400);
		color: var(--white);
	}
	
	&:not([aria-selected]) {
		background-color: var(--white);
		color: var(--blue-400);
		
		&:is(:focus, :hover) {
			background-color: var(--blue-400);
			color: var(--white);
			outline: var(--default-border-width) solid var(--blue-400);
		}
	}
}