/**
 * Single product — Shopify look (v2, values measured from the live store).
 * Pairs with woocommerce/content-single-product.php. Rollback: delete both.
 */

/* ============ layout ============ */
.td-sp { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.td-sp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
@media (max-width: 900px) { .td-sp__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* min-width:0 is mandatory: the flexslider gallery reports the natural width
 * of the first photo (2500 px+) as its min-content size, so an `auto`-min
 * grid item blows the whole page out sideways on phones (Claude 2026-08-12). */
.td-sp__layout > *,
.td-sp .woocommerce-product-gallery,
.td-sp .flex-viewport { min-width: 0; max-width: 100%; }
.td-sp .flex-viewport { overflow: hidden; }
/* ROOT CAUSE (found 2026-08-12): content-single-product.php / -bundle.php wrap
 * the gallery in a .td-sp__gallery-track div with a comment claiming it
 * "stretches to match the description column's height ... so the sticky
 * .td-sp__gallery has room to travel" -- but that CSS rule never actually
 * existed in this file. Grid `align-items: start` (above) does NOT stretch
 * items to the row height by default, so .td-sp__gallery-track collapsed to
 * the gallery's own natural height (~900px). That left two visible bugs at
 * once: (1) the grid cell below the gallery, up to the taller info column's
 * height, rendered as unstyled blank space -- the reported "void" -- and
 * (2) position:sticky on .td-sp__gallery had a containing block exactly as
 * tall as itself, so there was zero room to travel and it behaved as static.
 * Fix: stretch the track to the grid row height (auto-sized to the tallest
 * column, i.e. the info column on tall PDPs) so the sticky gallery inside it
 * has somewhere to travel to, and the void is filled by the gallery visibly
 * following the scroll instead of empty space. */
.td-sp__gallery-track { align-self: stretch; }
.td-sp__gallery { position: sticky; top: 110px; }
@media (max-width: 900px) {
	.td-sp__gallery { position: static; }
	.td-sp__gallery-track { align-self: auto; }
}

/* ============ gallery: edge-to-edge image, rounded corners (Shopify) ============ */
.td-sp .woocommerce-product-gallery { width: 100% !important; float: none !important; }
.td-sp .woocommerce-product-gallery__image,
.td-sp .product .woocommerce-product-gallery__image {
	height: auto !important;
	background: #f6f6f6;
	border-radius: 16px;
	overflow: hidden;
}
.td-sp .woocommerce-product-gallery__image { aspect-ratio: 4 / 3; }   /* every slide same height — no jumping */
.td-sp .woocommerce-product-gallery__image a { display: block; aspect-ratio: 4 / 3; height: 100%; }
.td-sp .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover;                 /* fills the rounded frame like Shopify */
	position: static !important;
	transform: none !important;
	display: block;
}
.td-sp .woocommerce-product-gallery__image img.td-portrait {
	object-fit: contain;               /* tall images shrink, never crop */
	background: #fff;
}

/* plain grey chevron arrows, anchored to the centre of the 4:3 image area
 * (padding-top % is relative to WIDTH, so the anchor point never moves even
 * if the slider height changes) */
.td-sp .woocommerce-product-gallery { position: relative; }
.td-sp .flex-direction-nav {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.td-sp .flex-direction-nav li {
	position: absolute;
	top: calc(37.5% - 14px);   /* half of the 4:3 height (75%/2) minus half arrow */
	margin: 0 !important;
	z-index: 6;
}
.td-sp .flex-direction-nav .flex-nav-prev { left: 14px; }
.td-sp .flex-direction-nav .flex-nav-next { right: 14px; }
.td-sp .flex-direction-nav a {
	display: block;
	width: 28px;
	height: 28px;
	color: transparent !important;
	overflow: hidden;
	text-decoration: none !important;
	opacity: .65;
	transition: opacity .12s ease;
}
.td-sp .flex-direction-nav a::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	margin: 6px;
	border-right: 3px solid #9a9a9a;
	border-bottom: 3px solid #9a9a9a;
	transform: rotate(135deg);         /* < chevron */
	transition: border-color .12s ease;
}
.td-sp .flex-direction-nav a.flex-next::before { transform: rotate(-45deg); }  /* > */
.td-sp .flex-direction-nav a:hover { opacity: 1; }
.td-sp .flex-direction-nav a:hover::before { border-color: #444444; }
.td-sp .flex-direction-nav a.flex-disabled { opacity: 0 !important; pointer-events: none; }

/* thumbnails: 81px, 12px gaps, radius 16 — like Shopify */
.td-sp .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	padding: 14px 2px 6px;
	margin: 0;
	scrollbar-width: thin;
	list-style: none;
}
.td-sp .flex-control-thumbs li { flex: 0 0 81px; width: 81px !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.td-sp .flex-control-thumbs img {
	border-radius: 16px !important;
	border: 2px solid transparent;
	opacity: .55;
	aspect-ratio: 1;
	object-fit: cover;
	transition: opacity .12s ease, border-color .12s ease;
}
.td-sp .flex-control-thumbs img:hover { opacity: 1; }
.td-sp .flex-control-thumbs img.flex-active { opacity: 1; border-color: #010002; }

/* ============ right column (compact, fits the viewport) ============ */
.td-sp__info { width: 100% !important; float: none !important; margin: 0 !important; }
.td-sp__title {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	font-weight: 400 !important;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.1;
	letter-spacing: .5px;
	margin: 0 0 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.td-sp__subtitle {
	font-family: 'Anton', 'Arial Narrow', sans-serif;
	font-size: 15px;
	letter-spacing: 1.5px;
	color: #555555;          /* darker, per Filip */
	text-transform: uppercase;
	margin-top: 8px;         /* bigger gap from the title */
}

/* feature icons — 36px icons, 13px labels, tight rhythm */
.td-sp__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 6px;
	list-style: none !important;
	margin: 20px 0 4px !important;
	padding: 0 !important;
}
.td-sp__icons li {
	flex: 0 0 92px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	margin: 0 !important;
	cursor: default;
}
.td-sp__icons img { width: 36px; height: 36px; }
.td-sp__icons span { font-size: 13px; line-height: 1.25; color: #111; }

/* buy button: 60px tall black pill, price inside, no cart icon, no express pay */
.td-sp__buy { margin: 18px 0 26px; }
.td-sp__buy .quantity { display: none !important; }
.td-sp__buy form.cart { margin: 0 !important; }
.td-sp__buy .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	background: #010002 !important;
	color: #fff !important;
	border: 2px solid #010002 !important;
	border-radius: 30px !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	padding: 10px 30px !important;
	box-shadow: none;
	transition: background .12s ease, color .12s ease;
}
.td-sp__buy .single_add_to_cart_button:hover,
.td-sp__buy .single_add_to_cart_button:focus { background: #fee100 !important; color: #010002 !important; }
/* pressed = flat darker yellow, distinct from :hover — this rule's own
 * specificity (2 classes) already beats shopify-look.css's site-wide
 * .single_add_to_cart_button:active fallback, so it must be restated here
 * too, otherwise a real tap (which matches :hover AND :active at once)
 * shows this file's :hover color, never the darker "pressed" feedback.
 * Filip, 2026-08-13 (global-mobile fix #3). */
.td-sp__buy .single_add_to_cart_button:active { background: #d6b900 !important; color: #010002 !important; }
.td-sp__buy .single_add_to_cart_button i,
.td-sp__buy .single_add_to_cart_button svg,
.td-sp__buy .single_add_to_cart_button img,
.td-sp__buy .single_add_to_cart_button::before,
.td-sp__buy .single_add_to_cart_button .fa,
.td-sp__buy .single_add_to_cart_button [class*="icon"] { display: none !important; content: none !important; }
/* express checkout (GPay/Apple Pay) stays in the cart only — this rule
 * predates the Stripe plugin's move from the old "Payment Request Button"
 * API (the ids it targets below) to the newer "Express Checkout Element"
 * (id #wc-stripe-express-checkout-element, shared markup/id with cart +
 * checkout). The old ids no longer exist, so this had quietly stopped
 * doing anything; add the current id so the original "stays in the cart
 * only" decision actually still holds — this also sidesteps the empty
 * orphan-slot rendering bug that shows up when a wallet like Apple Pay
 * mounts a reserved box in a browser that can't actually use it (fixed for
 * real on cart/checkout in cart-checkout-shopify.css + cart-shopify.js). */
.td-sp .wc-stripe-payment-request-wrapper,
.td-sp .wc-stripe-product-checkout-container,
.td-sp #wc-stripe-payment-request-button,
.td-sp #wc-stripe-payment-request-wrapper,
.td-sp .payment-request-button,
.td-sp #wc-stripe-express-checkout-element,
.td-sp .wc-stripe-express-checkout-element { display: none !important; }

/* description */
.td-sp__description { font-size: 16.5px; line-height: 1.5; }
.td-sp__description h2, .td-sp__description h3 {
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 20px;
	margin: 24px 0 8px;
}
/* inline SVG heading icons (same as Shopify h2-icons) */
.td-sp__description .h2-icon {
	display: inline-block;
	vertical-align: -0.15em;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.35em;
	flex-shrink: 0;
}
.td-sp__description img, .td-sp__description iframe { max-width: 100%; border-radius: 12px; }
.td-sp__description ul { padding-left: 20px; }
/* 2026-08-12: content-area links (e.g. "here", Etsy/Instagram mentions inside
 * product descriptions) were falling back to browser-default blue, clashing
 * with the black/yellow/white brand. Brand link treatment, matching the
 * dark-amber underlined links already used in the transactional emails. */
.td-sp__description a { color: #96720a; text-decoration: underline; }
.td-sp__description a:hover, .td-sp__description a:focus { color: #010002; }

/* ============ You may also like ============ */
.td-sp__related { margin: 60px 0 0; }
.td-sp__related h2 {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	font-weight: 400 !important;
	font-size: 28px;
	margin: 0 0 22px;
}
.td-sp__related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 1000px) { .td-sp__related-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.td-sp__card {
	background: #fff;
	border: 1px solid #cccdce;
	border-radius: 16px;
	box-shadow: 4px 4px 3px #b9b9b9;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding-bottom: 18px;
	transition: transform .15s ease, box-shadow .15s ease;
}
.td-sp__card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 5px #b9b9b9; }
.td-sp__card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.td-sp__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-sp__card-price { margin: 14px 12px 2px; font-size: 15px; color: #333; }
.td-sp__card-price ins { text-decoration: none; }
.td-sp__card-title { font-weight: 700; font-size: 17px; line-height: 1.25; margin: 2px 14px 12px; flex: 1; }
.td-sp__card-title a { text-decoration: none; color: #000; }
.td-sp__card-btn {
	display: inline-block;
	margin: 0 auto;
	background: #010002;
	color: #fff !important;
	border-radius: 30px;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 34px;
	text-decoration: none !important;
	transition: background .12s ease, color .12s ease;
}
.td-sp__card-btn:hover { background: #fee100; color: #010002 !important; }

/* ============ tags — Shopify pills ============ */
.td-sp__tags { margin: 52px 0 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.td-sp__tags-label { width: 100%; color: #444; font-size: 17px; margin-bottom: 2px; }
.td-sp__tag {
	border: 1.6px solid #010002;
	border-radius: 30px;
	padding: 8px 26px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 18px;
	font-weight: 700 !important;
	color: #000 !important;
	text-decoration: none !important;
	transition: background .12s ease;
}
.td-sp__tag:hover { background: #fee100; }

/* ============ hide leftovers from the default layout ============ */
.td-sp .woocommerce-tabs,
.td-sp .product_meta,
.td-sp + .related,
.single-product div.product .related.products,
.single-product div.product .upsells.products { display: none !important; }