/**
 * Product detail (PDP) skin: the stateful bits the Tailwind utilities cannot hold
 * (the selected colour swatch ring and the selected blade-length button). The
 * layout itself is utilities, safelisted in includes/compat/winden.php.
 */

/* Title: Oxygen's unlayered h1 rule overrides the Tailwind size utility (same as
   the archive), pinning it to ~32px; re-assert the PDP scale. */
.cur-pdp-title {
	font-size: clamp( 30px, 3.2vw, 46px ) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
	font-weight: 700 !important;
}

.single-product .cur-card-fit img{
	height:100% !important;
    object-fit: cover;
}

/* Colour swatch: thin hairline ring by default, a ringed-with-offset ring when
   selected (mirrors the staging ring-2 ring-fg ring-offset-2). */
.cur-pdp-cor {
	box-shadow: inset 0 0 0 1px rgba( 10, 10, 10, 0.18 );
}
.cur-pdp-cor:hover {
	box-shadow: inset 0 0 0 1px rgba( 10, 10, 10, 0.45 );
}
.cur-pdp-cor.is-on {
	box-shadow: 0 0 0 2px var( --color-bg, #fff ), 0 0 0 4px var( --color-fg, #0a0a0a );
}

/* Blade-length button: outlined by default, filled when selected. Oxygen's button
   reset (font-size:16px; text-transform:none) blows the label up, so re-assert. */
.cur-pdp-len {
	border: 1px solid var( --color-hair, #e5e5e5 );
	background: var( --color-bg, #fff );
	color: var( --color-fg, #0a0a0a );
	font-size: 11px !important;
	text-transform: uppercase !important;
}

/* Sticky-bar variant chips + popover options: same Oxygen button reset, smaller. */
.cur-pdp-chip {
	font-size: 10px !important;
	text-transform: uppercase !important;
}
.cur-pdp-pop .cur-pdp-len {
	font-size: 10px !important;
}
.cur-pdp-len:hover {
	border-color: var( --color-fg, #0a0a0a );
}
.cur-pdp-len.is-on {
	border-color: var( --color-fg, #0a0a0a );
	background: var( --color-fg, #0a0a0a );
	color: #fff;
}

/* Spec-line tag link: keeps the muted colour of the line, no underline; on hover
   it eases to the dark foreground after a short delay (it filters the shop by that
   tag, /loja/tag/<slug>/). Oxygen's global <a> colour rules win over `inherit`, so
   force it. */
.cur-pdp-spec-tag,
.cur-pdp-spec-tag:link,
.cur-pdp-spec-tag:visited {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 0.35s ease;
}
.cur-pdp-spec-tag:hover,
.cur-pdp-spec-tag:focus {
	color: var( --color-fg, #0a0a0a ) !important;
	text-decoration: none !important;
	transition: color 0.35s ease 0.12s;
}

/* Static value pill for informational (non-variation) attributes: the filled
   dark look of a selected blade-length option (they are the value, not a choice). */
.cur-pdp-attr-pill {
	border-color: var( --color-fg, #0a0a0a );
	background: var( --color-fg, #0a0a0a );
	color: #fff;
}

/* Gallery image: contain, fit by height, centred horizontally (cur-card-fit
   bottom-anchors for the sliders; the PDP wants it centred, no cover). */
.cur-pdp-gallery img {
	object-position: center !important;
}

/* Sticky-bar thumbnail: contain, fit to height, centred horizontally. */
.cur-pdp-stickybar .cur-card-fit img {
	object-position: center !important;
}

/* Add-to-cart busy state while the request is in flight. */
[data-curel-pdp-add].is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Hand cursor on the interactive controls (Oxygen's button reset drops it). */
[data-curel-pdp-step],
[data-curel-pdp-add],
.cur-pdp-cor,
.cur-pdp-len {
	cursor: pointer;
}

/* Technical-spec PDF link: muted, darkening on hover. */
.cur-pdp-pdf {
	color: var( --color-muted, #767676 );
}
.cur-pdp-pdf:hover {
	color: var( --color-fg, #0a0a0a );
}

/* Multi-image gallery: a horizontal snap scroller on mobile (one photo per view,
   the next peeking), a 2-column grid on sm+. Tiles that span both columns carry
   .cur-pdp-wide (the lead always; plus the last tile when the remainder after the
   lead is odd, so no column is left empty). A spanning tile also takes the wide
   ratio: at full gallery width the portrait 4/5 would be taller than it is wide. */
.cur-pdp-scroll {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0 -24px;
	padding: 0 24px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cur-pdp-scroll::-webkit-scrollbar {
	display: none;
}
.cur-pdp-scroll > * {
	flex: none;
	width: 85vw;
	scroll-snap-align: start;
}
@media ( min-width: 640px ) {
	.cur-pdp-scroll {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		overflow: visible;
		scroll-snap-type: none;
		margin: 0;
		padding: 0;
	}
	.cur-pdp-scroll > * {
		flex: initial;
		width: auto;
		scroll-snap-align: none;
	}
	/* Ratios come per gallery from the admin ("Grelha da galeria"). The lead always
	   spans, so it carries both classes: its rule sits after (same specificity) to
	   win, giving the featured image and the balanced last tile separate ratios. */
	.cur-pdp-scroll > .cur-pdp-wide {
		grid-column: span 2 / span 2;
		aspect-ratio: var( --cur-pdp-last-ratio, 3 / 2 );
	}
	.cur-pdp-scroll > .cur-pdp-lead {
		aspect-ratio: var( --cur-pdp-lead-ratio, 3 / 2 );
	}
}

/* Mobile pagination dots (shown only while the scroller is active). */
.cur-pdp-dots {
	display: none;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}
@media ( max-width: 639px ) {
	.cur-pdp-dots {
		display: flex;
	}
}
.cur-pdp-dot {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var( --color-fg, #0a0a0a );
	opacity: 0.25;
	transition: opacity 0.2s ease;
}
.cur-pdp-dot.is-active {
	opacity: 1;
}

/* Teaser band (Block 2): re-assert the large white title against Oxygen's
   unlayered h2 rule, and hint the parallax photo for smooth transforms. */
.cur-pdp-teaser-title {
	font-size: clamp( 36px, 5.4vw, 84px ) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.03em !important;
	color: #fff !important;
}
.cur-pdp-teaser-photo {
	will-change: transform;
}

/* Spec cards (Block 3): re-assert the section title and the card title against
   Oxygen's unlayered h2 / h3 rules. */
.cur-spec-title {
	font-size: clamp( 28px, 4vw, 56px ) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.02em !important;
}
.cur-spec-card-title {
	font-size: 22px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Gallery zoom
   -------------------------------------------------------------------------- */

/* #3 hover-inspect: on a real mouse, hovering magnifies the photo and drifts the
   spot under the cursor to the centre of the frame (product.js sets a translate+
   scale), so whatever you point at is enlarged in the middle. This suits the tall
   product shots (a vertical knife letterboxed in a wide frame): the tip sits near
   the bottom edge, so a magnify-toward-centre reaches it without the cursor having
   to touch the frame edge. Click still opens the full lightbox. Touch/keyboard get
   the plain frame; reduced-motion drops the zoom. */
.cur-pdp-zoomable {
	overflow: hidden;
}
/* Only frames that open the lightbox look clickable. */
.cur-pdp-zoomable[data-curel-zoom-lightbox] {
	cursor: zoom-in;
}
.cur-pdp-zoomable img {
	transform-origin: 0 0;
	transition: transform 0.2s ease-out;
}
@media ( hover: hover ) and ( pointer: fine ) {
	/* Faster follow while hovering; product.js drives the transform value. */
	.cur-pdp-zoomable.is-hovering img {
		transition: transform 0.08s ease-out;
		will-change: transform;
	}
	.cur-pdp-zoomable:focus-visible img {
		transform-origin: center center;
		transform: scale( 1.5 );
	}
}
.cur-pdp-zoomable:focus-visible {
	outline: 2px solid var( --color-fg, #0a0a0a );
	outline-offset: 3px;
}
@media ( prefers-reduced-motion: reduce ) {
	.cur-pdp-zoomable img {
		transition: none;
	}
	.cur-pdp-zoomable.is-hovering img,
	.cur-pdp-zoomable:focus-visible img {
		transform: none;
	}
}

/* #1 the lightbox: a full-viewport pan-zoom viewer, built in product.js and
   appended to <body>. Hidden until opened; fades in when .is-open is set. */
.cur-pdp-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.cur-pdp-lb.is-open {
	opacity: 1;
}
.cur-pdp-lb[hidden] {
	display: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.cur-pdp-lb {
		transition: none;
	}
}
.cur-pdp-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 10, 10, 0.92 );
}
.cur-pdp-lb-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	cursor: default;
}
.cur-pdp-lb[data-zoomed='true'] .cur-pdp-lb-stage {
	cursor: grab;
}
.cur-pdp-lb-img {
	position: relative;
	max-width: none;
	transform-origin: center center;
	opacity: 0;
	transition: opacity 0.2s ease;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}
.cur-pdp-lb-spinner {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 9999px;
	border: 3px solid rgba( 255, 255, 255, 0.25 );
	border-top-color: #fff;
	animation: cur-pdp-lb-spin 0.7s linear infinite;
	opacity: 0;
	pointer-events: none;
}
.cur-pdp-lb.is-loading .cur-pdp-lb-spinner {
	opacity: 1;
}
@keyframes cur-pdp-lb-spin {
	to {
		transform: rotate( 360deg );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.cur-pdp-lb-spinner {
		animation-duration: 1.4s;
	}
	.cur-pdp-lb-img {
		transition: none;
	}
}

/* Chrome buttons: shared look only (no positioning here, so the in-flow zoom-bar
   buttons stay in flow). Only close + prev/next are pulled out to the edges.
   The chrome is dark translucent, not light: the photos are mostly white/cream,
   so a white-tinted control disappears the moment a blade sits under it. The
   inset hairline keeps the edge readable against a dark photo too. */
.cur-pdp-lb button {
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	background: rgba( 10, 10, 10, 0.66 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border-radius: 9999px;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.cur-pdp-lb button:hover {
	background: rgba( 10, 10, 10, 0.8 );
}
.cur-pdp-lb button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.cur-pdp-lb button[hidden] {
	display: none;
}
.cur-pdp-lb button:disabled {
	opacity: 0.3;
	cursor: default;
}
.cur-pdp-lb-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 26px;
}
.cur-pdp-lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
}
.cur-pdp-lb-prev {
	left: 16px;
}
.cur-pdp-lb-next {
	right: 16px;
}
.cur-pdp-lb-counter {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	color: #fff;
	background: rgba( 10, 10, 10, 0.66 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border-radius: 9999px;
	padding: 7px 14px;
	font-size: 12px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}
/* One pill holding -/%/+ : the bar carries the backdrop, the buttons sit inside
   it transparent, so the group reads as a single control over any photo. */
.cur-pdp-lb-zoombar {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: rgba( 10, 10, 10, 0.66 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border-radius: 9999px;
}
.cur-pdp-lb-zoombar button {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.cur-pdp-lb-zoombar button:hover:not( :disabled ) {
	background: rgba( 255, 255, 255, 0.18 );
}
.cur-pdp-lb-zoom {
	width: 40px;
	height: 40px;
	font-size: 20px;
	font-weight: 500;
}
/* The live zoom read-out. Fixed width + tabular figures so stepping through
   97%/111%/203%/400% never resizes the pill and shuffles the +/- buttons. */
.cur-pdp-lb-reset {
	width: auto;
	min-width: 62px;
	padding: 0 8px;
	font-size: 12px;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
@media ( max-width: 639px ) {
	.cur-pdp-lb-nav {
		width: 42px;
		height: 42px;
	}
	.cur-pdp-lb-prev {
		left: 8px;
	}
	.cur-pdp-lb-next {
		right: 8px;
	}
}