/* ============================================================
   Components - matches all mockup HTML files
   ============================================================

   NOTE: Polaroid grain uses inline SVG data-URI background.
   ============================================================ */

/* ------------------------------------------------------------
   1. Polaroid Cards
   ------------------------------------------------------------ */

.pnza-polaroid {
	display: block;
	position: relative;
	background: #fff;
	padding: 18px 18px 28px;
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.1);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	transform: rotate(var(--rotation, 0deg));
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

/* nth-child rotations */
.pnza-polaroid:nth-child(3n+1) { --rotation: -2.5deg; }
.pnza-polaroid:nth-child(3n+2) { --rotation: 1.5deg; }
.pnza-polaroid:nth-child(3n+3) { --rotation: -1deg; }

.pnza-polaroid:hover {
	transform: rotate(0deg) scale(1.05) !important;
	box-shadow: 4px 8px 28px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

.pnza-polaroid__image {
	position: relative;
	overflow: hidden;
	line-height: 0;
	aspect-ratio: 1 / 1;
	background: #eee;
	margin-bottom: 14px;
}

.pnza-polaroid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

/* Hover image fades in on :hover without disrupting the polaroid frame. */
.pnza-polaroid--has-hover .pnza-polaroid__img--primary {
	transition: opacity 0.45s cubic-bezier(.2, .7, .3, 1);
}

.pnza-polaroid--has-hover .pnza-polaroid__img--hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.45s cubic-bezier(.2, .7, .3, 1);
}

.pnza-polaroid--has-hover:hover .pnza-polaroid__img--primary {
	opacity: 0;
}

.pnza-polaroid--has-hover:hover .pnza-polaroid__img--hover {
	opacity: 1;
}

/* Grain overlay on the full polaroid frame (white border + image area) */
.pnza-polaroid::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 4;
}

/* Grain overlay */
.pnza-grain {
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
}

/* Light-leak overlay */
.pnza-leak {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 20% 80%, rgba(255, 157, 92, 0.15), transparent 50%);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 3;
}

/* Caption area */
.pnza-polaroid__caption {
	padding: 0 2px;
}

.pnza-polaroid__title {
	display: block;
	font-family: 'Amatic SC', cursive;
	font-size: var(--fs-polaroid-title);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: #38392E;
	text-transform: lowercase;
}

.pnza-polaroid__price {
	display: block;
	font-family: 'Space Mono', monospace;
	font-size: var(--fs-14);
	color: #888;
	text-transform: uppercase;
	letter-spacing: var(--ls-uppercase);
	margin-top: 4px;
}

/* ------------------------------------------------------------
   2. Doodle Hover Underline
   ------------------------------------------------------------ */

.doodle-hover {
	position: relative;
	display: inline-block;
	max-width: fit-content;
}

.doodle-hover .hover-underline,
.hover-underline {
	position: absolute;
	bottom: -6px;
	left: -4px;
	width: calc(100% + 8px);
	height: 10px;
	overflow: visible;
	pointer-events: none;
}

.doodle-hover .hover-underline path,
.hover-underline path {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: stroke-dashoffset 0.4s ease;
}

.doodle-hover:hover .hover-underline path {
	stroke-dashoffset: 0;
}

/* Mobile: underlines always visible on content links */
@media (max-width: 1099px) {
	.pnza-content-link .hover-underline path {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------------------
   3. Doodle Circle Hover
   ------------------------------------------------------------ */

/*
  CRITICAL: The circle color must NEVER match the element's text color.
  Use a contrasting accent color.
*/

.doodle-circle-hover {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.doodle-circle-hover .hover-circle {
	position: absolute;
	inset: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	pointer-events: none;
	overflow: visible;
}

.doodle-circle-hover .hover-circle path {
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	transition: stroke-dashoffset 0.5s ease;
}

.doodle-circle-hover:hover .hover-circle path {
	stroke-dashoffset: 0;
}

.doodle-circle-hover:hover {
	opacity: 1 !important;
}

/* Force full opacity on SVG path inside hover circles */
.doodle-circle-hover .hover-circle path {
	opacity: 1 !important;
}

.doodle-circle-hover__circle svg path {
	opacity: 1 !important;
}

/* Also support the __circle child element pattern used in PHP templates */
.doodle-circle-hover__circle {
	position: absolute;
	inset: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.doodle-circle-hover__circle svg {
	width: 100%;
	height: 100%;
}

.doodle-circle-hover:hover .doodle-circle-hover__circle,
.doodle-circle-hover--wide:hover .doodle-circle-hover__circle {
	opacity: 1;
}

/* Wide variant for buttons */
.doodle-circle-hover--wide .hover-circle {
	inset: -20px -40px;
	width: calc(100% + 80px);
	height: calc(100% + 40px);
}

.doodle-circle-hover--wide .hover-circle path {
	stroke-dasharray: 800;
	stroke-dashoffset: 800;
}

.doodle-circle-hover--wide .doodle-circle-hover__circle {
	inset: -20px -40px;
	width: calc(100% + 80px);
	height: calc(100% + 40px);
}

/* ------------------------------------------------------------
   4. Handwriting Reveal
   ------------------------------------------------------------ */

/* Fade-in for images that should not pop in once their bytes arrive.
   image-fade.js adds `.is-loaded` on the load event. */
img.pnza-fade,
video.pnza-fade {
	opacity: 0;
	transition: opacity 0.6s ease;
}

img.pnza-fade.is-loaded,
video.pnza-fade.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	img.pnza-fade,
	video.pnza-fade {
		transition: none;
		opacity: 1;
	}
}

/*
  Uses clip-path to reveal text. NO ink/stroke animation.
  The .in-view class is added by viewport-animations.js.
*/

.pnza-handwrite {
	overflow: visible;
	display: inline-block;
}

.pnza-handwrite text {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1s ease;
}

.pnza-handwrite.in-view text {
	clip-path: inset(0 0% 0 0);
}

/* ------------------------------------------------------------
   5. Draw-in (SVG path animation)
   ------------------------------------------------------------ */

.pnza-draw-in path {
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	transition: stroke-dashoffset 0.6s ease 0.8s;
}

.pnza-draw-in.in-view path {
	stroke-dashoffset: 0;
}

/* Tape strip decoration */
.pnza-tape {
	pointer-events: none;
}

/* ------------------------------------------------------------
   6. Newsletter Input
   ------------------------------------------------------------ */

.pnza-newsletter {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	position: relative;
}

.pnza-newsletter__field {
	flex: 1;
	position: relative;
}

.pnza-newsletter__input {
	background: transparent;
	border: none;
	padding: 8px 0;
	width: 260px;
	font-family: 'Outfit', sans-serif;
	font-size: var(--fs-16);
	outline: none;
	color: inherit;
}

.pnza-newsletter__input::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

[data-theme="light"] .pnza-newsletter__input {
	color: #38392E;
}

[data-theme="light"] .pnza-newsletter__input::placeholder {
	color: #aaa;
}

[data-theme="dark"] .pnza-newsletter__input {
	color: #F5F0E8;
}

[data-theme="dark"] .pnza-newsletter__input::placeholder {
	color: #666;
}

.pnza-newsletter__underline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 260px;
	height: 12px;
	overflow: visible;
	display: block;
	pointer-events: none;
}

.pnza-newsletter__btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	margin-bottom: -2px;
	line-height: 0;
}

.pnza-newsletter__btn svg {
	width: 48px;
	height: 32px;
}

/* ------------------------------------------------------------
   7. Doodle Decoration
   ------------------------------------------------------------ */

.pnza-doodle-decoration {
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.pnza-doodle-decoration svg {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------
   8. Buttons
   ------------------------------------------------------------ */

.pnza-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	padding: 14px 32px;
	border-radius: 0;
	text-transform: lowercase;
	position: relative;
	cursor: pointer;
	border: none;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	line-height: var(--lh-heading);
	font-size: var(--fs-16);
	letter-spacing: 0.02em;
}

.pnza-btn:hover {
	transform: translateY(-1px);
}

.pnza-btn--primary {
	background: var(--accent);
	color: #fff;
	padding: 16px 40px;
	transform: rotate(-1deg);
}

.pnza-btn--primary:hover {
	box-shadow: 0 4px 16px rgba(243, 147, 83, 0.35);
}

.pnza-btn--black {
	background: #000;
	color: #F5F0E8;
	padding: 14px 32px;
}

.pnza-btn--black:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.pnza-btn--ghost {
	background: transparent;
	border: 2px solid currentColor;
	padding: 14px 36px;
	font-weight: 600;
	font-size: var(--fs-16);
}

.pnza-btn--ghost:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ------------------------------------------------------------
   Mini-pill button — matches the home mini-cart "vezi coșul"
   look. Used for add-to-cart on product pages, "vezi toate
   produsele" CTA, and the mini-cart panel buttons themselves so
   every CTA in the buying flow shares the same shape.
   ------------------------------------------------------------ */
.pnza-btn--mini-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: var(--fs-15);
	text-decoration: none;
	text-transform: lowercase;
	border-radius: 9999px;
	border: 1px solid #f4ecd8;
	background: transparent;
	color: #f4ecd8;
	letter-spacing: 0.01em;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s ease;
}

.pnza-btn--mini-pill:hover,
.pnza-btn--mini-pill:focus-visible {
	background: rgba(217, 179, 110, 0.15);
	border-color: #d9b36e;
	color: #d9b36e;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(217, 179, 110, 0.18);
}

/* Grain layer is hidden for mini-pill — it'd fight the soft pill look. */
.pnza-btn--mini-pill::after { display: none; }

/* Grain texture on all buttons */
.pnza-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	pointer-events: none;
}

.pnza-btn--black::after {
	mix-blend-mode: screen;
}

/* ============================================================
   Dark Mode - Components
   ============================================================ */

/* Polaroid cards */
[data-theme="dark"] .pnza-polaroid {
	background: #fff;
	box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .pnza-polaroid:hover {
	box-shadow: 4px 8px 28px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .pnza-polaroid__image {
	background: #333;
}

[data-theme="dark"] .pnza-polaroid__title {
	color: #38392E;
}

[data-theme="dark"] .pnza-polaroid__price {
	color: #888;
}

/* Newsletter */
[data-theme="dark"] .pnza-newsletter__underline path {
	stroke: #666;
}

[data-theme="dark"] .pnza-newsletter__btn svg path {
	stroke: #F5F0E8;
}

/* Doodle decorations */
[data-theme="dark"] .pnza-doodle-decoration svg path,
[data-theme="dark"] .pnza-doodle-decoration svg line,
[data-theme="dark"] .pnza-doodle-decoration svg circle {
	stroke: #C9B681;
}

/* Hover underline in content areas */
[data-theme="dark"] .pnza-content-link .hover-underline path {
	stroke: #C9B681;
}

/* ============================================================
   Texture overlay - subtle grain on surfaces
   ============================================================ */

.pnza-header::before,
.pnza-contact__form::before,
.pnza-contact__form-card::before,
.pnza-btn--cta::before,
.pnza-btn--black::before,
.pnza-btn--add-to-cart::before,
.pnza-product__cart-btn::before,
.pnza-about__story-text::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

.pnza-header,
.pnza-contact__form,
.pnza-contact__form-card,
.pnza-btn--cta,
.pnza-btn--black,
.pnza-btn--add-to-cart,
.pnza-product__cart-btn,
.pnza-about__story-text {
	position: relative;
}

/* ============================================================
   Dark mode: soft orange flare overlay (full viewport)
   ============================================================ */

[data-theme="dark"] body::after {
	content: '';
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background:
		radial-gradient(ellipse at 10% 85%, rgba(243, 147, 83, 0.04), transparent 50%),
		radial-gradient(ellipse at 90% 15%, rgba(255, 157, 92, 0.03), transparent 45%),
		radial-gradient(ellipse at 50% 50%, rgba(201, 182, 129, 0.02), transparent 60%);
	pointer-events: none;
	z-index: 9998;
	mix-blend-mode: screen;
}

/* ------------------------------------------------------------
   Polaroid Lightbox (shared across about, press kit, etc.)
   ------------------------------------------------------------ */

.pnza-review-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.4s ease;
}

.pnza-review-lightbox.is-open {
	background: rgba(0, 0, 0, 0.7);
	pointer-events: auto;
}

.pnza-review-lightbox.is-closing {
	background: rgba(0, 0, 0, 0);
	transition: background 0.3s ease-in;
}

.pnza-review-lightbox__backdrop {
	position: absolute;
	inset: 0;
}

.pnza-review-lightbox__polaroid {
	position: relative;
	background: #fff;
	padding: 18px 18px 48px;
	max-width: 380px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	transform: scale(0.8) rotate(-2deg);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.pnza-review-lightbox.is-open .pnza-review-lightbox__polaroid {
	transform: scale(1) rotate(1.5deg);
	opacity: 1;
}

.pnza-review-lightbox.is-closing .pnza-review-lightbox__polaroid {
	transform: scale(0.9) rotate(-3deg);
	opacity: 0;
	transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

.pnza-review-lightbox__image-wrap {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.pnza-review-lightbox__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.pnza-review-lightbox__grain {
	position: absolute;
	inset: 18px 18px 48px;
	pointer-events: none;
	opacity: 0.12;
	mix-blend-mode: multiply;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.pnza-review-lightbox__leak {
	position: absolute;
	inset: 18px 18px 48px;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(ellipse at 70% 30%, rgba(255, 157, 92, 0.2), transparent 55%);
}

.pnza-review-lightbox__caption {
	font-family: 'Amatic SC', cursive;
	font-size: var(--fs-display-xs);
	font-weight: 700;
	color: #38392E;
	text-align: center;
	margin-top: var(--sp-2);
}

.pnza-review-lightbox__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: #d9b36e;
	width: 0;
	transition: width linear;
}