/* TMD Wishlist — /lista-de-dorinte/ page layout.
 * Loaded ONLY on the wishlist page. All rules scoped under .tmd-wl so they can
 * never affect other pages. Card / rail / badge / swatch styling is ported 1:1
 * from content/documents/mockups/wishlist-v1.html (which is 1:1 from plp-v1).
 * Design tokens (:root) + base .btn primitives come from the global base.css. */

/* ---- missing button variant (base.css has btn/primary/secondary/ghost) ---- */
.tmd-wl .btn-danger-outline{ background:transparent; border:1px solid var(--color-danger); color:var(--color-danger); }
.tmd-wl .btn-danger-outline:hover{ background:var(--color-danger-soft); }
.tmd-wl .btn-danger-outline:focus-visible{ outline:2px solid var(--color-danger); outline-offset:2px; }
.tmd-wl .btn-sm{ font-size:var(--fs-small); padding:var(--space-2) var(--space-4); min-height:38px; }
.tmd-wl .btn-full{ width:100%; }

/* ---- hero / count / note ---- */
.tmd-wl .wl-hero{ padding:var(--space-6) 0 var(--space-5); }
.tmd-wl .wl-hero .eyebrow{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
	font-size:var(--fs-eyebrow); font-weight:700; color:var(--color-primary); margin:0 0 var(--space-2);
	display:inline-flex; align-items:center; gap:var(--space-2); }
.tmd-wl .wl-hero h1{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-display);
	line-height:var(--lh-tight); letter-spacing:var(--ls-heading); margin:0; color:var(--color-text-primary); }
.tmd-wl .wl-count-line{ display:inline-flex; align-items:center; gap:var(--space-2); margin:var(--space-4) 0 0;
	font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--color-text-secondary); }
.tmd-wl .wl-count-line .num{ color:var(--color-text-primary); }
.tmd-wl .wl-count-line .icon{ color:var(--color-danger); width:1.05em; height:1.05em; }
.tmd-wl .wl-note{ display:flex; align-items:flex-start; gap:var(--space-3); margin:var(--space-4) 0 0;
	background:var(--color-info-soft); border-left:3px solid var(--color-info); border-radius:var(--radius-md);
	padding:var(--space-3) var(--space-4); max-width:62ch; }
.tmd-wl .wl-note .icon{ color:var(--color-info); width:1.2em; height:1.2em; margin-top:2px; flex:0 0 auto; }
.tmd-wl .wl-note p{ margin:0; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--color-text-primary); }
.tmd-wl .wl-note a{ color:var(--color-primary); font-weight:var(--fw-semibold); text-decoration:underline; }

/* ---- toolbar ---- */
.tmd-wl .wl-toolbar{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; justify-content:space-between;
	padding:var(--space-4) 0 var(--space-2); }
.tmd-wl .wl-tb-left{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.tmd-wl .wl-list-title{ margin:0; font-family:var(--font-display); font-weight:var(--fw-regular);
	font-size:var(--fs-h3); color:var(--color-text-primary); }
.tmd-wl .wl-tb-hint{ font-family:var(--font-body); font-size:var(--fs-small); color:var(--color-text-secondary); }

/* ---- grid ---- */
.tmd-wl .wl-section{ padding:0 0 var(--space-8); }
.tmd-wl .cards{ display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); }
@media (min-width:1140px){ .tmd-wl .cards{ grid-template-columns:repeat(4,1fr); } }

/* ---- product card (1:1 from plp/wishlist mockup) ---- */
.tmd-wl .product-card{ position:relative; background:var(--color-surface); border-radius:var(--radius-lg);
	box-shadow:var(--shadow-card); display:flex; flex-direction:column; border:1px solid var(--color-border);
	overflow:hidden; transition:box-shadow var(--transition), transform var(--transition); }
.tmd-wl .product-card::before{ content:""; position:absolute; z-index:0; top:-18%; right:-14%; width:46%; aspect-ratio:1/1;
	pointer-events:none; background:radial-gradient(circle at 35% 35%, rgba(94,115,85,.18), rgba(94,115,85,0) 70%);
	border-radius:46% 54% 58% 42% / 52% 44% 56% 48%; opacity:.7;
	transition:transform 1.4s cubic-bezier(.4,0,.2,1), border-radius 1.4s cubic-bezier(.4,0,.2,1), opacity var(--transition); }
.tmd-wl .product-card:hover::before{ transform:scale(1.18) rotate(8deg);
	border-radius:58% 42% 48% 52% / 44% 56% 48% 52%; opacity:.9; }
.tmd-wl .product-card > *{ position:relative; z-index:1; }
.tmd-wl .product-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
.tmd-wl .product-card .pmedia{ --card-curve-h:135%; aspect-ratio:5/4; position:relative; display:flex;
	align-items:flex-end; padding:var(--space-3); }
.tmd-wl .product-card .pmedia-frame{ position:absolute; inset:0; z-index:0; overflow:hidden; display:block;
	-webkit-mask:var(--card-curve); mask:var(--card-curve); }
.tmd-wl .product-card .pmedia-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
	transform:scale(1); transform-origin:center; transition:transform var(--tr-zoom); }
.tmd-wl .product-card:hover .pmedia-bg, .tmd-wl .product-card:focus-within .pmedia-bg{ transform:scale(1.06); }
.tmd-wl .product-card.oos .pmedia-bg{ opacity:.72; }

/* fav button ♡ — active on the wishlist */
.tmd-wl .fav-btn{ position:absolute; top:var(--space-3); right:var(--space-3); z-index:3; width:44px; height:44px;
	border:0; border-radius:var(--radius-pill); background:rgba(255,255,255,.9); color:var(--color-text-secondary);
	cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
	transition:background var(--transition), color var(--transition), transform var(--transition); }
.tmd-wl .fav-btn .icon{ width:1.1em; height:1.1em; }
.tmd-wl .fav-btn:hover{ background:#fff; color:var(--color-danger); transform:scale(1.08); }
.tmd-wl .fav-btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.tmd-wl .fav-btn[aria-pressed="true"]{ color:var(--color-danger); }
.tmd-wl .fav-btn[aria-pressed="true"] .icon{ fill:var(--color-danger); stroke:var(--color-danger); }

.tmd-wl .product-card .pbody{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column;
	flex:1; text-align:center; align-items:center; }
.tmd-wl .product-card .eyebrow{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em;
	text-transform:uppercase; color:var(--color-text-secondary); margin-top:0; }
.tmd-wl .product-card .pname{ font-family:var(--font-display); font-size:1.12rem; font-weight:var(--fw-regular);
	line-height:1.3; margin:var(--space-1) 0 0; color:var(--color-text-primary); }
.tmd-wl .product-card .pname a{ color:inherit; text-decoration:none; }
.tmd-wl .product-card .pname a:hover{ text-decoration:underline; }
.tmd-wl .product-card .price{ font-family:var(--font-body); margin:var(--space-3) 0; display:flex; align-items:baseline;
	gap:var(--space-1) var(--space-2); flex-wrap:wrap; justify-content:center; }
.tmd-wl .product-card .price .from{ font-size:var(--fs-small); font-weight:var(--fw-regular); color:var(--color-text-secondary); }
.tmd-wl .product-card .price .now{ font-size:1.15rem; font-weight:var(--fw-bold); color:var(--color-text-primary); }
.tmd-wl .product-card .price .old{ font-size:var(--fs-small); color:var(--color-text-secondary); text-decoration:line-through; }
.tmd-wl .product-card .price.ask .now{ font-size:1.02rem; font-weight:var(--fw-semibold); color:var(--color-text-secondary); }
.tmd-wl .product-card .pactions{ margin-top:auto; width:100%; display:flex; flex-direction:column; gap:var(--space-2); }
.tmd-wl .product-card .cart-cta, .tmd-wl .product-card .remove-cta{ width:100%; }

/* badges */
.tmd-wl .pbadge{ position:absolute; top:var(--space-3); left:var(--space-3); z-index:2; font-family:var(--font-body);
	font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.04em; border-radius:var(--radius-pill);
	padding:3px var(--space-3); display:inline-flex; align-items:center; gap:4px; }
.tmd-wl .pbadge-new{ background:var(--color-primary); color:var(--color-on-primary); }
.tmd-wl .pbadge-best{ background:var(--color-text-primary); color:var(--color-on-primary); }
.tmd-wl .pbadge-sale{ background:var(--color-danger); color:var(--color-on-primary); }
.tmd-wl .pbadge-oos{ background:var(--color-surface-alt); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.tmd-wl .pbadge-ask{ background:var(--color-info-soft); color:var(--color-info); border:1px solid var(--color-info); }

/* ---- bulk bar ---- */
.tmd-wl .wl-bulk{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; justify-content:flex-end;
	margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border); }

/* ---- empty <-> grid switch ---- */
.tmd-wl .wl-section.is-empty .wl-grid-wrap{ display:none; }
.tmd-wl .wl-empty{ display:none; }
.tmd-wl .wl-section.is-empty .wl-empty{ display:block; }
.tmd-wl .wl-empty{ text-align:center; max-width:48ch; margin:var(--space-7) auto var(--space-6); }
.tmd-wl .wl-empty .empty-ill{ width:104px; height:104px; margin:0 auto var(--space-5); border-radius:var(--radius-pill);
	display:grid; place-items:center; background:var(--color-surface); border:1px solid var(--color-border);
	box-shadow:var(--shadow-card); color:var(--color-danger); }
.tmd-wl .wl-empty .empty-ill .icon{ width:46px; height:46px; }
.tmd-wl .wl-empty h2{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h2);
	line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0 0 var(--space-3); color:var(--color-text-primary); }
.tmd-wl .wl-empty p{ margin:0 auto var(--space-5); font-size:var(--fs-lead); color:var(--color-text-secondary); line-height:var(--lh-body); }
.tmd-wl .wl-empty .empty-actions{ display:inline-flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }

/* ---- recommendations rail ---- */
.tmd-wl .sec{ padding:var(--space-8) 0; }
.tmd-wl .sec--tint{ background:var(--color-tint); }
.tmd-wl .sec-head{ margin:0 0 var(--space-6); }
.tmd-wl .sec-head .eyebrow{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:var(--ls-eyebrow);
	font-size:var(--fs-eyebrow); font-weight:700; color:var(--color-primary); margin:0 0 var(--space-2); }
.tmd-wl .sec-head h2{ font-family:var(--font-display); font-weight:var(--fw-regular); font-size:var(--fs-h2);
	line-height:var(--lh-heading); letter-spacing:var(--ls-heading); margin:0; color:var(--color-text-primary); }
.tmd-wl .rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:var(--space-4);
	overflow-x:auto; padding-bottom:var(--space-3); scrollbar-width:thin; }
@media (min-width:1024px){ .tmd-wl .rail{ grid-auto-flow:row; grid-template-columns:repeat(5,1fr); grid-auto-columns:auto; overflow:visible; } }
.tmd-wl .mini-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
	box-shadow:var(--shadow-card); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
	transition:box-shadow var(--transition), transform var(--transition); }
.tmd-wl .mini-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); }
.tmd-wl .mini-card:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
.tmd-wl .mini-card .mini-media{ aspect-ratio:1/1; overflow:hidden; display:block; }
.tmd-wl .mini-card .mini-media img{ width:100%; height:100%; object-fit:cover; display:block;
	transform:scale(1); transition:transform var(--tr-zoom); }
.tmd-wl .mini-card:hover .mini-media img{ transform:scale(1.05); }
.tmd-wl .mini-card .mini-body{ padding:var(--space-3); display:flex; flex-direction:column; gap:2px; }
.tmd-wl .mini-card .mini-brand{ font-family:var(--font-body); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--color-text-secondary); }
.tmd-wl .mini-card .mini-name{ font-family:var(--font-display); font-size:1rem; font-weight:var(--fw-regular);
	line-height:1.25; color:var(--color-text-primary); }
.tmd-wl .mini-card .mini-price{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-bold);
	color:var(--color-text-primary); margin-top:var(--space-1); }

@media (prefers-reduced-motion: reduce){
	.tmd-wl .product-card::before,
	.tmd-wl .product-card:hover::before{ transition:none; transform:none; }
	.tmd-wl .fav-btn:hover{ transform:none; }
	.tmd-wl .mini-card:hover{ transform:none; }
	.tmd-wl .mini-card:hover .mini-media img{ transform:none; }
}