/*!
 * Desenvolvido por: DriveWeb | Rodrigo Soares | © DriveWeb — Todos os direitos reservados
 * https://driveweb.pt · contacto@driveweb.pt · WhatsApp +351 913 671 493
 * DW Experience v0.2.0 — Experience Layer para teardamoda.pt (Razzi + WooCommerce)
 * Redesenho visual premium inspirado no padrão Swatch: produto dominante, grelha arejada,
 * hover que revela ação, cor da marca. Aditivo e reversível. Não altera carrinho/checkout.
 * Marca: verde #1f5f5b · dourado #c9a24a
 */

:root {
	--dw-green: #1f5f5b;
	--dw-gold: #c9a24a;
	--dw-surface: #f4f1ec;      /* fundo premium suave das imagens */
	--dw-ink: #1d1d1b;
	--dw-radius: 16px;
	--dw-shadow: 0 18px 40px rgba(31, 95, 91, .16);
}

/* ---- 1. Transições de página tipo app (View Transitions API) ---- */
@view-transition { navigation: auto; }
@keyframes dw-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-fade-out { from { opacity: 1; } to { opacity: 0; } }
::view-transition-old(root) { animation: dw-fade-out .22s ease both; }
::view-transition-new(root) { animation: dw-fade-in  .28s ease both; }

/* ================================================================
   2. GRELHA DE PRODUTOS — produto dominante, arejado (estilo Swatch)
   ================================================================ */
.dw-experience-on ul.products.layout-grid {
	grid-gap: 40px 28px;
	gap: 40px 28px;
}

/* Imagem grande, quadrada, fundo premium, cantos suaves */
.dw-experience-on ul.products li.product .product-thumbnail {
	position: relative;
	border-radius: var(--dw-radius);
	overflow: hidden;
	background: var(--dw-surface);
}
.dw-experience-on ul.products li.product .product-thumbnail img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	padding: 10%;
	box-sizing: border-box;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
/* Hover: a peça respira — zoom suave da imagem + a segunda imagem do Razzi troca */
.dw-experience-on ul.products li.product:hover .product-thumbnail img:not(.hover-image) {
	transform: scale(1.06);
}

/* Cartão eleva com sombra premium */
.dw-experience-on ul.products li.product {
	transition: transform .38s ease;
}
.dw-experience-on ul.products li.product:hover {
	transform: translateY(-6px);
}
.dw-experience-on ul.products li.product:hover .product-thumbnail {
	box-shadow: var(--dw-shadow);
}

/* ---- 3. Tipografia da ficha: categoria dourada, nome forte, preço na cor da marca ---- */
.dw-experience-on ul.products li.product .product-category,
.dw-experience-on ul.products li.product .posted_in {
	color: var(--dw-gold) !important;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
	font-weight: 600;
}
.dw-experience-on ul.products li.product .product-title,
.dw-experience-on ul.products li.product .woocommerce-loop-product__title,
.dw-experience-on ul.products li.product h2,
.dw-experience-on ul.products li.product h3 {
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: .01em;
	margin-top: 6px;
}
.dw-experience-on ul.products li.product .price {
	color: var(--dw-green);
	font-weight: 700;
}
.dw-experience-on ul.products li.product .price del { color: #9a9a9a; font-weight: 400; }
.dw-experience-on ul.products li.product .price ins { text-decoration: none; }

/* ---- 4. CTA revelado no hover (desktop): botão "adicionar" surge suave ---- */
@media (hover: hover) and (min-width: 769px) {
	.dw-experience-on ul.products li.product .add-to-cart-loop,
	.dw-experience-on ul.products li.product .wd-add-btn,
	.dw-experience-on ul.products li.product .button.add_to_cart_button {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .3s ease, transform .3s ease;
	}
	.dw-experience-on ul.products li.product:hover .add-to-cart-loop,
	.dw-experience-on ul.products li.product:hover .wd-add-btn,
	.dw-experience-on ul.products li.product:hover .button.add_to_cart_button {
		opacity: 1;
		transform: none;
	}
}

/* ---- 5. Badges elegantes (ESGOTADO / NOVIDADE / EM ALTA) ---- */
.dw-experience-on ul.products li.product .product-label span,
.dw-experience-on ul.products li.product .onsale,
.dw-experience-on ul.products li.product .featured {
	border-radius: 999px !important;
	letter-spacing: .08em;
	font-size: 10px !important;
	font-weight: 700;
	padding: 5px 12px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* ================================================================
   6. FICHA DE PRODUTO — imagem dominante, respiro
   ================================================================ */
.dw-experience-on.single-product .product .woocommerce-product-gallery {
	border-radius: var(--dw-radius);
	overflow: hidden;
	background: var(--dw-surface);
}
.dw-experience-on.single-product .product div.summary .price {
	color: var(--dw-green);
	font-weight: 700;
}
.dw-experience-on.single-product .single_add_to_cart_button {
	letter-spacing: .04em;
}

/* ================================================================
   6b. BOTÃO "ADICIONAR AOS FAVORITOS" — discreto, não competir com o
   preto do "Adicionar ao carrinho" (só o de carrinho é o CTA sólido).
   Contorno na cor da marca + coração. Estilo padrão de wishlist.
   ================================================================ */
.dw-experience-on .wcboost-wishlist-button.wcboost-wishlist-button--theme,
.dw-experience-on div.summary .rz-wishlist-button.razzi-button {
	background: transparent !important;
	color: var(--dw-green) !important;
	border: 1.5px solid rgba(31, 95, 91, .30) !important;
	box-shadow: none !important;
	font-weight: 600;
}
.dw-experience-on .wcboost-wishlist-button.wcboost-wishlist-button--theme:hover,
.dw-experience-on div.summary .rz-wishlist-button.razzi-button:hover {
	background: rgba(31, 95, 91, .06) !important;
	border-color: var(--dw-green) !important;
	color: var(--dw-green) !important;
}
/* coração na cor da marca em vez de branco sobre preto */
.dw-experience-on .wcboost-wishlist-button--theme svg,
.dw-experience-on .wcboost-wishlist-button--theme .wcboost-wishlist-button__icon,
.dw-experience-on .wcboost-wishlist-button--theme .wcboost-wishlist-button__icon svg {
	color: var(--dw-green) !important;
	fill: none !important;
	stroke: var(--dw-green) !important;
}
.dw-experience-on .wcboost-wishlist-button--theme.wcboost-wishlist-button--added svg {
	fill: var(--dw-gold) !important;
	stroke: var(--dw-gold) !important;
}

/* ---- 6c. CTAs sobre imagem (hero/secções): outline elegante que
   ganha preenchimento branco no hover — convida ao clique sem gritar ---- */
.dw-experience-on .razzi-button-link.razzi-button {
	border-width: 1.5px !important;
	transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .18s ease;
}
.dw-experience-on .razzi-button-link.razzi-button:hover {
	background: #fff !important;
	color: #1f5f5b !important;
	border-color: #fff !important;
}

/* ---- 6d. ARREDONDAMENTO consistente (8px) — botões e imagens de
   produto na mesma linguagem visual; uniformiza os que estavam a 100%
   (pill) ou a 0 (reto). Subtil, elegante. ---- */
.dw-experience-on .single_add_to_cart_button,
.dw-experience-on a.button,
.dw-experience-on button.button,
.dw-experience-on .wp-element-button,
.dw-experience-on .razzi-button,
.dw-experience-on .razzi-button-link,
.dw-experience-on .add_to_cart_button,
.dw-experience-on .checkout-button,
.dw-experience-on #place_order,
.dw-experience-on .wcboost-wishlist-button.wcboost-wishlist-button--theme,
.dw-experience-on .button.wc-forward {
	border-radius: 8px !important;
}
/* imagens / cartões de produto com o mesmo raio suave */
.dw-experience-on ul.products li.product img,
.dw-experience-on .product-loop-thumbnail,
.dw-experience-on .product-loop-thumbnail img,
.dw-experience-on .wd-product .product-image-link img,
.dw-experience-on .woocommerce-product-gallery__image img {
	border-radius: 8px !important;
	overflow: hidden;
}

/* ---- 6e. NOTIFICAÇÕES WooCommerce como TOAST discreto (experiência de
   compra premium): fora do carrinho/checkout/conta, onde os avisos ficam
   inline. Substitui a barra verde tosca do tema por um cartão no canto. ---- */
body.dw-experience-on:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper {
	position: fixed; top: 20px; right: 20px; left: auto;
	z-index: 99999; width: min(360px, calc(100vw - 40px)); margin: 0; pointer-events: none;
}
body.dw-experience-on:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message,
body.dw-experience-on:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-info {
	pointer-events: auto;
	background: #fff !important; color: #1a1a1a !important;
	border: 1px solid rgba(0,0,0,.07) !important; border-left: 4px solid #1f5f5b !important;
	border-radius: 10px !important; box-shadow: 0 14px 38px rgba(0,0,0,.16) !important;
	padding: 14px 16px !important; margin: 0 0 12px 0 !important;
	font-size: 14px !important; line-height: 1.4;
	display: flex !important; align-items: center; gap: 12px; justify-content: space-between;
	animation: dw-toast-in .35s ease both;
}
@keyframes dw-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.dw-experience-on .woocommerce-notices-wrapper .woocommerce-message.dw-toast-out,
.dw-experience-on .woocommerce-notices-wrapper .woocommerce-info.dw-toast-out { animation: dw-toast-out .4s ease both; }
@keyframes dw-toast-out { to { opacity: 0; transform: translateX(24px); } }
body.dw-experience-on:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message .button,
body.dw-experience-on:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-notices-wrapper .woocommerce-message a.wc-forward {
	background: #1f5f5b !important; color: #fff !important;
	padding: 6px 13px !important; border-radius: 6px !important;
	font-size: 12.5px !important; white-space: nowrap; margin: 0 !important; float: none !important; flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .dw-experience-on .woocommerce-notices-wrapper .woocommerce-message { animation: none; } }

/* ---- 6f. NOTIFY.JS do tema (wishlist/compare) — mesmo padrão de toast
   discreto do woocommerce-message: cartão branco, borda verde marca. ---- */
.dw-experience-on .notifyjs-corner { top: 20px !important; right: 20px !important; }
.dw-experience-on .notifyjs-razzi-base {
	background: #fff !important; color: #1a1a1a !important;
	border: 1px solid rgba(0,0,0,.07) !important; border-left: 4px solid #1f5f5b !important;
	border-radius: 10px !important; box-shadow: 0 14px 38px rgba(0,0,0,.16) !important;
	padding: 14px 16px !important; font-size: 14px !important; line-height: 1.4;
	display: flex !important; align-items: center; gap: 10px; max-width: 360px;
}
.dw-experience-on .notifyjs-razzi-base .message-icon { color: #1f5f5b; flex: 0 0 auto; display: flex; }
.dw-experience-on .notifyjs-razzi-base .message-icon svg { width: 20px; height: 20px; }
.dw-experience-on .notifyjs-razzi-base .btn-button {
	background: #1f5f5b !important; color: #fff !important;
	padding: 6px 13px !important; border-radius: 6px !important;
	font-size: 12.5px !important; white-space: nowrap; text-decoration: none !important;
	margin-left: auto; flex: 0 0 auto;
}
.dw-experience-on .notifyjs-razzi-base .svg-active { cursor: pointer; opacity: .5; flex: 0 0 auto; }
.dw-experience-on .notifyjs-razzi-base .svg-active:hover { opacity: 1; }
.dw-experience-on .notifyjs-arrow { display: none !important; }

/* ---- 7. Botões / CTA globais: feedback imediato ---- */
.dw-experience-on .button,
.dw-experience-on .single_add_to_cart_button {
	transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease, opacity .2s ease;
}
.dw-experience-on .button:active,
.dw-experience-on .single_add_to_cart_button:active { transform: scale(.97); }

/* ---- 8. Reveal suave ao entrar no ecrã ---- */
.dw-experience-on .dw-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.dw-experience-on .dw-reveal.dw-in { opacity: 1; transform: none; }

/* ---- 9. Estado de loading no adicionar ao cesto ---- */
.dw-experience-on .add_to_cart_button.dw-loading,
.dw-experience-on .single_add_to_cart_button.dw-loading {
	position: relative; color: transparent !important; pointer-events: none; opacity: .85;
}
.dw-experience-on .add_to_cart_button.dw-loading::after,
.dw-experience-on .single_add_to_cart_button.dw-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: dw-spin .6s linear infinite;
}
@keyframes dw-spin { to { transform: rotate(360deg); } }

/* ---- 10. Acessibilidade: respeitar prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.dw-experience-on .dw-reveal { opacity: 1; transform: none; transition: none; }
	.dw-experience-on * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}