/* =============================================================================
   SECTION WRAPPER
   ============================================================================= */

.product-test {
	padding-top:    50px;
	padding-bottom: 100px;
}

/* =============================================================================
   BREADCRUMBS
   ============================================================================= */

.product-breadcrumb {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           6px;
	font-size:     14px;
	color:         var(--color-text-secondary);
	margin-bottom: 24px;
}

.product-breadcrumb__link {
	color: var(--color-text-secondary);
}

.product-breadcrumb__link:hover {
	color:           var(--color-accent);
	text-decoration: none;
}

.product-breadcrumb__sep {
	color: var(--color-text-secondary);
}

.product-breadcrumb__current {
	font-weight: var(--weight-bold);
	color:       var(--color-text-primary);
}

/* =============================================================================
   ABOVE-FOLD LAYOUT
   ============================================================================= */

.product-above-fold {
	display:     flex;
	align-items: stretch;
	gap:         25px;
}

/* =============================================================================
   GALLERY CARD
   ============================================================================= */

.product-gallery {
	flex:             1;
	min-width:        0;
	overflow:         hidden;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	position:         sticky;
	top:              calc(110px + 24px);
	align-self:       flex-start;
}

.admin-bar .product-gallery {
	top: 135px;
}

.product-gallery__img {
	display:    block;
	width:      100%;
	height:     auto;
	object-fit: cover;
}

/* =============================================================================
   RIGHT COLUMN WRAPPER
   ============================================================================= */

.product-right-col {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	gap:            25px;
}

/* =============================================================================
   IDENTITY CARD
   ============================================================================= */

.product-identity {
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	padding:          35px 40px;
}

.product-identity__title {
	font-size:     var(--text-h2);
	color:         var(--color-accent);
	margin-bottom: 5px;
}

.product-identity__description {
	color:         var(--color-text-secondary);
	margin-bottom: 25px;
}

.product-identity__badges {
	display:    flex;
	flex-wrap:  wrap;
	gap:        10px;
	margin-top: 15px;
}

.product-identity__badge-wrap {
	position: relative;
	display:  inline-flex;
}

.product-identity__badge {
	display: block;
	width:   auto;
	height:  50px;
}

.product-identity__badge-tip {
	position:         absolute;
	bottom:           calc(100% + 8px);
	left:             50%;
	transform:        translateX(-50%);
	background-color: var(--color-text-primary);
	color:            #ffffff;
	border-radius:    6px;
	padding:          6px 10px;
	font-size:        14px;
	white-space:      nowrap;
	pointer-events:   none;
	visibility:       hidden;
	opacity:          0;
	transition:       opacity 150ms ease, visibility 150ms ease;
	z-index:          10;
}

.product-identity__badge-tip::after {
	content:          '';
	position:         absolute;
	top:              100%;
	left:             50%;
	transform:        translateX(-50%);
	border:           5px solid transparent;
	border-top-color: var(--color-text-primary);
}

.product-identity__badge-wrap:hover .product-identity__badge-tip {
	visibility: visible;
	opacity:    1;
}

.product-identity__meta {
	margin-top: 15px;
}

.product-identity__meta-line {
	color:         var(--color-text-secondary);
	margin-bottom: 0;
}

.product-identity__meta-link {
	color:           var(--color-text-secondary);
	text-decoration: underline;
}

.product-identity__meta-link:hover {
	color: var(--color-accent);
}

/* =============================================================================
   BUY BOX CARD
   ============================================================================= */

.product-buybox {
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	overflow:         hidden;
}

/* -- Divider ---------------------------------------------------------------- */

.product-buybox__divider {
	border:     none;
	border-top: 1px solid var(--color-border-subtle);
	margin:     0;
}

/* -- Zone 2: Configure ------------------------------------------------------ */

.product-buybox__variants {
	display:          flex;
	flex-direction:   column;
	gap:              20px;
	padding:          35px 40px 20px 40px;
	background-color: var(--color-bg-subtle);
}

.product-buybox__clear {
	align-self:      flex-start;
	background:      none;
	border:          none;
	padding:         0;
	font-size:       14px;
	color:           var(--color-text-secondary);
	cursor:          pointer;
	text-decoration: underline;
}

.product-buybox__clear:hover {
	color: var(--color-accent);
}

.product-buybox__variant-label {
	display:       block;
	font-weight:   var(--weight-bold);
	margin-bottom: 6px;
}

.product-select-wrapper {
	position: relative;
}

.product-select-wrapper::after {
	content:           '';
	position:          absolute;
	right:             14px;
	top:               50%;
	transform:         translateY(-50%);
	width:             10px;
	height:            6px;
	background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A4E52'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size:   contain;
	pointer-events:    none;
}

.product-select {
	width:              100%;
	height:             44px;
	padding:            0 40px 0 12px;
	border:             1px solid var(--color-border-subtle);
	border-radius:      6px;
	background-color:   var(--color-bg-primary);
	appearance:         none;
	-webkit-appearance: none;
	cursor:             pointer;
	font-size:          16px;
}

.product-select:focus {
	outline:      none;
	border-color: var(--color-accent);
}

.product-buybox__skus {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0 24px;
	padding-top: 15px;
	border-top:  1px solid var(--color-border-subtle);
}

.product-buybox__sku {
	font-size:     14px;
	color:         var(--color-text-secondary);
	margin-bottom: 0;
}

/* -- Zone 3: Buy ------------------------------------------------------------ */

.product-buybox__zone-buy {
	padding: 35px 40px;
}

.product-buybox__price-block {
	margin-bottom: 15px;
}

.product-buybox__field-label {
	display:        block;
	font-size:      14px;
	font-weight:    var(--weight-bold);
	letter-spacing: 1px;
	color:          var(--color-text-secondary);
	margin-bottom:  6px;
}

.product-buybox__price-label {
	display:       flex;
	align-items:   center;
	gap:           5px;
	margin-bottom: 0;
}

.product-tooltip-wrap {
	position:    relative;
	display:     inline-flex;
	align-items: center;
}

.product-tooltip-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	background:      none;
	border:          none;
	color:           var(--color-text-secondary);
	cursor:          pointer;
	flex-shrink:     0;
	line-height:     1;
}

.product-tooltip__content {
	position:         absolute;
	bottom:           calc(100% + 10px);
	left:             50%;
	transform:        translateX(-50%);
	width:            260px;
	background-color: var(--color-text-primary);
	border-radius:    8px;
	padding:          12px 14px;
	font-size:        14px;
	font-weight:      var(--weight-regular);
	line-height:      var(--leading-relaxed);
	color:            #ffffff;
	text-transform:   none;
	letter-spacing:   0;
	visibility:       hidden;
	opacity:          0;
	pointer-events:   none;
	transition:       opacity 150ms ease, visibility 150ms ease;
	z-index:          100;
	white-space:      normal;
}

.product-tooltip__content::after {
	content:          '';
	position:         absolute;
	top:              100%;
	left:             50%;
	transform:        translateX(-50%);
	border:           6px solid transparent;
	border-top-color: var(--color-text-primary);
}

.product-tooltip__content.is-visible {
	visibility:     visible;
	opacity:        1;
	pointer-events: auto;
}

.product-tooltip__content a {
	color:           #7dd3a8;
	text-decoration: underline;
}

.product-buybox__price {
	display:       flex;
	align-items:   center;
	gap:           8px;
	margin-bottom: 0;
}

.product-buybox__price-amount {
	font-size:   22px;
	font-weight: var(--weight-black);
	color:       var(--color-accent);
}

.product-buybox__price-unit {
	font-size: 14px;
	color:     var(--color-text-secondary);
}

.product-buybox__availability-block {
	margin-bottom: 24px;
}

.product-buybox__stock {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.product-stock-item {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   14px;
}

.product-stock-dot {
	display:       inline-block;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	flex-shrink:   0;
}

.product-stock-dot--in          { background-color: #2d7a4f; }
.product-stock-dot--backordered { background-color: #b06f1c; }

.product-buybox__qty-group {
	margin-bottom: 24px;
}

.product-buybox__qty-row {
	display:     flex;
	align-items: center;
	gap:         16px;
}

.product-buybox__qty-control {
	display: flex;
}

.product-buybox__qty-btn {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            40px;
	height:           40px;
	border:           1px solid var(--color-border-subtle);
	background-color: var(--color-bg-subtle);
	cursor:           pointer;
	flex-shrink:      0;
	transition:       background-color 150ms ease;
}

.product-buybox__qty-btn:first-child { border-radius: 6px 0 0 6px; }
.product-buybox__qty-btn:last-child  { border-radius: 0 6px 6px 0; }

.product-buybox__qty-btn:hover {
	background-color: var(--color-border-subtle);
}

.product-buybox__qty-input {
	width:            60px;
	height:           40px;
	border:           1px solid var(--color-border-subtle);
	border-left:      none;
	border-right:     none;
	text-align:       center;
	font-size:        15px;
	background-color: var(--color-bg-primary);
	appearance:       textfield;
	-moz-appearance:  textfield;
}

.product-buybox__qty-input::-webkit-outer-spin-button,
.product-buybox__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin:             0;
}

.product-buybox__qty-input:focus {
	outline:      none;
	border-color: var(--color-accent);
}

.product-buybox__qty-notice {
	font-size: 14px;
	color:     var(--color-text-secondary);
}

.product-buybox__cta {
	width:     100%;
	min-width: 0;
}

.product-buybox__cta--link {
	display: flex;
}

.product-buybox__cta:disabled {
	background-color: var(--color-border-subtle);
	border-color:     var(--color-border-subtle);
	color:            var(--color-text-secondary);
	cursor:           not-allowed;
	transform:        none;
	box-shadow:       none;
}

/* -- Backordered notice ----------------------------------------------------- */

.product-buybox__backorder-notice {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	margin-top:    10px;
	padding:       10px 12px;
	border-left:   3px solid #b06f1c;
	background:    rgba(176, 111, 28, 0.06);
	border-radius: 0 6px 6px 0;
	font-size:     14px;
	color:         var(--color-text-secondary);
	flex-shrink:   0;
}

.product-buybox__backorder-notice svg {
	flex-shrink: 0;
	color:       #b06f1c;
	margin-top: 3px;
}

.product-buybox__backorder-text {
	display:        flex;
	flex-direction: column;
}

.product-buybox__backorder-link {
	color:           #b06f1c;
	text-decoration: underline;
	font-weight: 800;
}

.product-buybox__backorder-link:hover {
	color: #8f5716;
}

/* =============================================================================
   DISCONTINUED CARD
   ============================================================================= */

.product-discontinued__heading {
	font-size:     var(--text-h3);
	color:         var(--color-text-primary);
	margin-bottom: 8px;
}

.product-discontinued__body {
	color:         var(--color-text-secondary);
	margin-bottom: 0;
}

.product-discontinued__replacement {
	margin-top: 16px;
	padding-top: 16px;
	border-top:  1px solid var(--color-border-subtle);
	color:       var(--color-text-secondary);
	margin-bottom: 0;
}

.product-discontinued__replacement-link {
	color:           var(--color-accent);
	text-decoration: underline;
}

.product-discontinued__replacement-link:hover {
	opacity: 0.8;
}

/* =============================================================================
   HELP CTA CARD
   ============================================================================= */

.product-help {
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	padding:          32px 40px;
}

.product-help__heading {
	font-weight: var(--weight-bold);
}

.product-help__subline {
	color:         var(--color-text-secondary);
	margin-top:    0;
	margin-bottom: 10px;
}

.product-help__links {
	display: flex;
	gap:     24px;
}

.product-help__link {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-size:   15px;
	font-weight: var(--weight-bold);
	color:       var(--color-accent);
}

.product-help__link:hover {
	text-decoration: none;
	opacity:         0.8;
}

/* =============================================================================
   ADD TO CART TOAST
   ============================================================================= */

.fss-cart-toast {
	position:         fixed;
	bottom:           24px;
	right:            24px;
	background-color: var(--color-text-primary);
	color:            #ffffff;
	padding:          12px 20px;
	border-radius:    6px;
	font-size:        14px;
	font-weight:      var(--weight-bold);
	opacity:          0;
	transform:        translateY(8px);
	transition:       opacity 200ms ease, transform 200ms ease;
	pointer-events:   none;
	z-index:          9999;
}

.fss-cart-toast.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.fss-cart-toast.is-error {
	background-color: #b00020;
}

/* =============================================================================
   RESPONSIVE -- 900px
   ============================================================================= */

@media (max-width: 900px) {

	.product-above-fold {
		flex-direction: column;
	}

}