/* =============================================================================
   Bogdanbor Child — Single Product Page
   Mobile-first · premium wine aesthetic · no jQuery dependency.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page wrapper — offset for the fixed header
   ----------------------------------------------------------------------------- */
.sp-main {
	padding-top: var(--header-height, 80px);
}

/* Suppress WooCommerce default single-product wrappers that Blocksy may inject */
.sp-article .woocommerce-breadcrumb {
	display: none; /* breadcrumb shown via .sp-breadcrumb instead */
}

/* -----------------------------------------------------------------------------
   Two-column layout
   Mobile: single column (image on top, details below)
   ≥ 900px: 55 / 45 side-by-side
   ----------------------------------------------------------------------------- */
.sp-layout {
	display:        flex;
	flex-direction: column;
}

@media (min-width: 900px) {
	.sp-layout {
		flex-direction:  row;
		align-items:     start;
		min-height:      calc(100vh - var(--header-height, 80px));
	}
}

/* -----------------------------------------------------------------------------
   Image column
   ----------------------------------------------------------------------------- */
.sp-image-col {
	flex-shrink: 0;
	position:    relative;
}

@media (min-width: 900px) {
	.sp-image-col {
		width:    55%;
		position: sticky;
		top:      var(--header-height, 80px);
		/* Prevent sticky from overflowing when content is shorter than image */
		align-self: start;
	}
}

.sp-image-wrap {
	position: relative;
	overflow: hidden;
	background: #f0ede8;
}

.sp-hero-img {
	display:      block;
	width:        100%;
	height:       auto;
	aspect-ratio: 2 / 3;
	object-fit:   cover;
	object-position: center top;
}

@media (min-width: 900px) {
	.sp-hero-img {
		aspect-ratio:  auto;
		min-height:    calc(100vh - var(--header-height, 80px));
		object-fit:    cover;
	}
}

/* No-image placeholder */
.sp-image-placeholder {
	width:        100%;
	aspect-ratio: 2 / 3;
	background:   #f0ede8;
}

@media (min-width: 900px) {
	.sp-image-placeholder {
		aspect-ratio: auto;
		min-height:   calc(100vh - var(--header-height, 80px));
	}
}

/* Sale badge */
.sp-badge {
	position:       absolute;
	top:            1.5rem;
	left:           1.5rem;
	padding:        0.3rem 0.875rem;
	background:     #7b3b2f;
	color:          #ffffff;
	font-family:    var( --font-ui );
	font-size:      var( --text-micro );
	letter-spacing: var( --tracking-widest );
	text-transform: uppercase;
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Details column
   ----------------------------------------------------------------------------- */
.sp-details-col {
	display:        flex;
	flex-direction: column;
	gap:            1.75rem;
	padding:        2.5rem 1.5rem 3rem;
}

@media (min-width: 900px) {
	.sp-details-col {
		width:              45%;
		padding:            4.5rem 4rem 5rem;
		max-height:         calc(100vh - var(--header-height, 80px));
		overflow-y:         auto;
		overscroll-behavior: contain;
	}
}

@media (min-width: 1280px) {
	.sp-details-col {
		padding: 5rem 5rem 6rem;
	}
}

/* -----------------------------------------------------------------------------
   Breadcrumb
   ----------------------------------------------------------------------------- */
.sp-breadcrumb .woocommerce-breadcrumb {
	display:        block;
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	letter-spacing: var( --tracking-widest );
	color:          #766860; /* was #b0a090 — 2.44:1 on #fafbfc, now ≥4.5:1 (WCAG 1.4.3) */
	text-transform: uppercase;
}

.sp-breadcrumb .woocommerce-breadcrumb a {
	color:           inherit;
	text-decoration: none;
	transition:      color 0.2s;
}

.sp-breadcrumb .woocommerce-breadcrumb a:hover {
	color: #7b3b2f;
}

.sp-breadcrumb .woocommerce-breadcrumb a:focus-visible {
	outline:        2px solid #7b3b2f;
	outline-offset: 2px;
	border-radius:  2px;
}

/* -----------------------------------------------------------------------------
   Meta row — category + vintage
   ----------------------------------------------------------------------------- */
.sp-meta {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
}

.sp-category {
	font-family:    var( --font-ui );
	font-size:      var( --text-micro );
	letter-spacing: var( --tracking-widest );
	text-transform: uppercase;
	color:          #7b3b2f;
}

.sp-vintage {
	font-family:    var( --font-ui );
	font-size:      var( --text-micro );
	letter-spacing: var( --tracking-widest );
	text-transform: uppercase;
	color:          #b0a090;
}

.sp-vintage::before {
	content:      '·';
	margin-right: 0.75rem;
	color:        #d0c8c0;
}

/* -----------------------------------------------------------------------------
   Product title
   ----------------------------------------------------------------------------- */
.sp-title {
	font-family:    var( --font-serif );
	font-size:      clamp(1.625rem, 3.5vw, 2.5rem);
	font-weight:    400;
	line-height:    var( --leading-tight );
	letter-spacing: var( --tracking-tight );
	color:          #1a1a1a;
	margin:         0;
}

/* -----------------------------------------------------------------------------
   Price
   ----------------------------------------------------------------------------- */
.sp-price .price,
.sp-price .woocommerce-Price-amount {
	font-family: var( --font-serif );
	font-size:   1.375rem;
	color:       #1a1a1a;
}

.sp-price del {
	color:        #bbb;
	font-size:    1.0625rem;
	margin-right: 0.5rem;
}

.sp-price ins {
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Short description
   ----------------------------------------------------------------------------- */
.sp-short-desc {
	font-size:   0.9375rem;
	line-height: 1.85;
	color:       #555;
}

.sp-short-desc p {
	margin: 0;
}

.sp-short-desc p + p {
	margin-top: 0.75em;
}

/* -----------------------------------------------------------------------------
   Add-to-cart form
   Override WooCommerce defaults to match brand aesthetic.
   ----------------------------------------------------------------------------- */

/* Quantity + button row */
.sp-add-to-cart .cart {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	flex-wrap:   wrap;
}

/* Quantity wrapper — explicit width so input is never collapsed */
.sp-add-to-cart .quantity {
	flex-shrink: 0;
	width:       5rem;
}

/* Target WooCommerce's actual rendered class: .input-text.qty.text */
.sp-add-to-cart input.qty {
	display:         block;
	width:           100%;
	padding:         0.75rem 0.5rem;
	border:          1px solid rgba(0, 0, 0, 0.18);
	border-radius:   0;
	background:      #ffffff;
	font-size:       0.9375rem;
	color:           #1a1a1a;
	text-align:      center;
	box-sizing:      border-box;
	appearance:      textfield;
	-moz-appearance: textfield;
	/* Remove height: 100% — rely on padding to match button height */
}

.sp-add-to-cart input.qty::-webkit-inner-spin-button,
.sp-add-to-cart input.qty::-webkit-outer-spin-button {
	appearance: none;
}

.sp-add-to-cart input.qty:focus {
	outline:      none;
	border-color: #1a1a1a;
}

.sp-add-to-cart input.qty:focus-visible {
	outline:        2px solid #7b3b2f;
	outline-offset: 2px;
	border-color:   #1a1a1a;
}

/* Add to cart button */
.woocommerce .sp-add-to-cart .single_add_to_cart_button.button,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button {
	flex:            1;
	min-width:       160px;
	padding:         0.75rem 2rem;
	background:      #1a1a1a;
	border:          1px solid #1a1a1a;
	border-radius:   0;
	color:           #ffffff;
	font-family:     var( --font-ui );
	font-size:       var( --text-xs );
	font-weight:     400;
	letter-spacing:  var( --tracking-widest );
	text-transform:  uppercase;
	cursor:          pointer;
	transition:
		background-color 0.25s ease,
		color            0.25s ease,
		border-color     0.25s ease;
}

.woocommerce .sp-add-to-cart .single_add_to_cart_button.button:hover,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button:hover {
	background-color: #7b3b2f;
	border-color:     #7b3b2f;
	color:            #ffffff;
}

.woocommerce .sp-add-to-cart .single_add_to_cart_button.button:focus-visible,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button:focus-visible {
	outline:        2px solid #7b3b2f;
	outline-offset: 3px;
}

/* Loading state */
.woocommerce .sp-add-to-cart .single_add_to_cart_button.button.loading,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button.loading {
	opacity:        0.65;
	pointer-events: none;
	position:       relative;
}

.woocommerce .sp-add-to-cart .single_add_to_cart_button.button.loading::after {
	content:          '';
	display:          inline-block;
	width:            10px;
	height:           10px;
	margin-left:      10px;
	border:           1.5px solid currentColor;
	border-top-color: transparent;
	border-radius:    50%;
	vertical-align:   middle;
	animation:        bogdanbor-spin 0.6s linear infinite;
}

@keyframes bogdanbor-spin {
	to { transform: rotate(360deg); }
}

/* Disabled/out-of-stock state */
.woocommerce .sp-add-to-cart .single_add_to_cart_button.button:disabled,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button:disabled {
	opacity:        0.45;
	pointer-events: none;
}

/* Added-to-cart confirmation (brief, set by single-product.js) */
.woocommerce .sp-add-to-cart .single_add_to_cart_button.button.added,
.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button.added {
	background-color: #7b3b2f;
	border-color:     #7b3b2f;
	color:            #ffffff;
	transition:
		background-color 0.3s ease,
		border-color     0.3s ease,
		color            0.3s ease;
}

/* -----------------------------------------------------------------------------
   Shipping info box
   ----------------------------------------------------------------------------- */
.sp-shipping-box {
	display:     flex;
	align-items: center;
	gap:         1rem;
	padding:     1rem 1.25rem;
	background:  #faf9f7;
	border:      1px solid rgba(0, 0, 0, 0.07);
}

.sp-shipping-icon {
	flex-shrink: 0;
	color:       #7b3b2f;
}

.sp-shipping-text {
	display:        flex;
	flex-direction: column;
	gap:            0.125rem;
}

.sp-shipping-text strong {
	font-size:   0.8125rem;
	font-weight: 500;
	color:       #1a1a1a;
	line-height: 1.4;
}

.sp-shipping-text span {
	font-size:      0.75rem;
	letter-spacing: 0.02em;
	color:          #6c6660; /* was #888 — 3.36:1 on #faf9f7, now ≥4.5:1 (WCAG 1.4.3) */
	line-height:    1.4;
}

/* -----------------------------------------------------------------------------
   Long description section
   ----------------------------------------------------------------------------- */
.sp-description {
	padding:    5rem 1.5rem 6rem;
	background: #faf9f7;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (min-width: 900px) {
	.sp-description {
		padding: 7rem 2.5rem 8rem;
	}
}

.sp-description-inner {
	max-width: 740px;
	margin:    0 auto;
}

.sp-description-heading {
	font-family:    var( --font-ui );
	font-size:      var( --text-xs );
	font-weight:    400;
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
	color:          #766860; /* was #b0a090 — 2.41:1 on #faf9f7, now ≥4.5:1 (WCAG 1.4.3) */
	margin:         0 0 2.75rem;
}

.sp-description-body {
	font-family: var( --font-serif );
	font-size:   var( --text-base );
	line-height: var( --leading-loose );
	color:       #333;
}

.sp-description-body p {
	margin: 0 0 1.5em;
}

.sp-description-body p:last-child {
	margin-bottom: 0;
}

.sp-description-body ul,
.sp-description-body ol {
	margin:      0 0 1.5em 1.25em;
	padding:     0;
}

.sp-description-body li {
	margin-bottom: 0.5em;
}

/* Decorative divider before description heading */
.sp-description-heading::before {
	content:        '';
	display:        block;
	width:          2rem;
	height:         1px;
	background:     #d0c8c0;
	margin-bottom:  1.75rem;
}

/* -----------------------------------------------------------------------------
   Reduced motion — respect OS preference
   Selectors must match the specificity of the transition rules above
   (.woocommerce/.woocommerce-page prefix) so this block wins the cascade.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.woocommerce .sp-add-to-cart .single_add_to_cart_button.button,
	.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button {
		transition: none;
	}

	.woocommerce .sp-add-to-cart .single_add_to_cart_button.button.loading::after,
	.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button.loading::after {
		animation: none;
	}

	.woocommerce .sp-add-to-cart .single_add_to_cart_button.button.added,
	.woocommerce-page .sp-add-to-cart .single_add_to_cart_button.button.added {
		transition: none;
	}

	.sp-breadcrumb .woocommerce-breadcrumb a {
		transition: none;
	}
}