/* ============================================================================
   CANONICAL PREMIUM PRODUCT CARD (v3) — 2026-07-16
   ONE look on every page, NO deviations. The .hfv2-pcard markup + its CSS is
   duplicated across 4 stylesheets + ~10 page files; rather than chase them all,
   this one authoritative sheet overrides every scattered rule via the
   `:not(#z)` specificity bump (1,1,0 — beats any class-only selector, incl. the
   grid-scoped `.hfv2-page .hf-cgrid .hfv2-pcard` 0,3,0 !important rules) + its own
   !important. Enqueued on every hf_v2 page. Design = the approved v3 luxe card:
   borderless floating card, 1:1 image, frosted quick-add, price hero, compact
   trade line, modern CTA chip.
   ========================================================================== */

.hfv2-pcard:not(#z){position:relative;background:#fff!important;border:0!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 24px 54px -32px rgba(16,35,61,.42)!important;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease!important}
.hfv2-pcard:not(#z):hover{transform:translateY(-6px)!important;box-shadow:0 40px 70px -34px rgba(16,35,61,.5)!important}

/* Image — large, square, subtle zoom + legibility gradient for the dots */
.hfv2-pcard__m:not(#z){position:relative!important;aspect-ratio:1/1!important;height:auto!important;min-height:0!important;overflow:hidden!important;border-radius:20px 20px 0 0!important;background:#e7ecf2!important;display:block!important}
.hfv2-pcard__m:not(#z) img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:transform .6s cubic-bezier(.2,.7,.3,1)!important}
.hfv2-pcard:not(#z):hover .hfv2-pcard__m img{transform:scale(1.055)!important}
.hfv2-pcard__m:not(#z)::after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(to top,rgba(6,16,30,.32),transparent 36%)!important;pointer-events:none!important;z-index:1!important}

/* Multi-image dots */
.hfv2-pcard__dots:not(#z){display:none!important}
.hfv2-pcard__dots:not(#z) span{width:6px!important;height:6px!important;border-radius:50%!important;background:rgba(255,255,255,.55)!important;margin:0!important}
.hfv2-pcard__dots:not(#z) span.on{background:#fff!important;width:18px!important;border-radius:4px!important}

/* Frosted-glass quick-add */
.hfv2-pcard__bag:not(#z){position:absolute!important;right:14px!important;bottom:13px!important;left:auto!important;top:auto!important;z-index:3!important;width:42px!important;height:42px!important;min-width:0!important;max-width:none!important;padding:0!important;gap:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.28)!important;display:grid!important;place-items:center!important;background:rgba(12,26,45,.62)!important;color:#fff!important;box-shadow:0 10px 24px -10px rgba(0,0,0,.55)!important;transition:background .18s ease,transform .18s ease,border-color .18s ease,color .18s ease!important;overflow:visible!important;font-size:0!important;text-indent:0!important}
.hfv2-pcard__bag:not(#z):hover{background:#37c34c!important;color:#08331a!important;border-color:#37c34c!important;transform:translateY(-2px)!important}
.hfv2-pcard__bag:not(#z) svg,.hfv2-pcard__bag:not(#z) i{width:19px!important;height:19px!important;font-size:19px!important;display:block!important;margin:0!important}
.hfv2-pcard__bag:not(#z)::before,.hfv2-pcard__bag:not(#z)::after{content:none!important;display:none!important}

/* Body */
.hfv2-pcard__b:not(#z){padding:17px 18px 19px!important;background:#fff!important;text-align:left!important}
.hfv2-pcard__meta:not(#z){display:block!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:1.9px!important;text-transform:uppercase!important;color:#2f9e44!important;margin:0 0 8px!important}
.hfv2-pcard__t:not(#z){margin:0 0 12px!important;font-size:15px!important;font-weight:600!important;color:#101f36!important;line-height:1.35!important;letter-spacing:-.01em!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:40px!important}
.hfv2-pcard__t:not(#z) a{color:#101f36!important;text-decoration:none!important}

/* Old availability line is retired — v3 shows the price everywhere instead */
.hfv2-pcard__s:not(#z){display:none!important}

/* Price = hero */
.hf-cprice:not(#z){display:block!important;margin:0!important;padding:0!important;font-size:11.5px!important;color:#96a0ac!important;font-weight:500!important;line-height:1.25!important}
.hf-cprice:not(#z) > b{font-size:23px!important;font-weight:700!important;color:#101f36!important;letter-spacing:-.02em!important}
.hf-cprice:not(#z) .hf-trade-was{font-size:11.5px!important;color:#aab1bb!important;text-decoration:line-through!important;font-weight:500!important;margin-right:5px!important}
.hf-cprice:not(#z) .hf-trade-now{color:#237a3a!important}
.hf-cprice:not(#z) .hf-trade-tag{display:inline-block!important;margin-left:6px!important;padding:2px 7px!important;border-radius:6px!important;background:rgba(35,122,58,.12)!important;color:#237a3a!important;font-size:9.5px!important;font-weight:800!important;letter-spacing:.4px!important;text-transform:uppercase!important;vertical-align:2px!important}

/* Trade teaser = compact flat line: green diamond + muted text + premium link */
.hf-trade-teaser:not(#z){display:flex!important;align-items:center!important;gap:7px!important;margin:9px 0 0!important;font-size:11px!important;color:#7a828d!important;font-weight:500!important;text-decoration:none!important;line-height:1.25!important}
.hf-trade-teaser:not(#z)::before{content:""!important;width:6px!important;height:6px!important;border-radius:2px!important;background:#2f9e44!important;transform:rotate(45deg)!important;flex:none!important}
.hf-trade-teaser:not(#z) b{color:#237a3a!important;font-weight:700!important;font-size:11px!important;letter-spacing:0!important}
.hf-trade-teaser:not(#z) b::after{content:" \2192"!important}
.hf-trade-teaser:not(#z):hover b{opacity:.72!important}

/* CTA — clean row, chip fills green + slides on hover, no hard divider */
.hfv2-pcard__v:not(#z){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:14px 0 0!important;padding:0!important;border:0!important;border-top:0!important;font-size:11px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;color:#101f36!important;text-decoration:none!important}
.hfv2-pcard__v:not(#z) .c{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border-radius:50%!important;background:#f0f4f8!important;color:#237a3a!important;border:0!important;transition:background .18s ease,transform .18s ease,color .18s ease!important}
.hfv2-pcard__v:not(#z):hover .c{background:#37c34c!important;color:#08331a!important;transform:translateX(3px)!important}
.hfv2-pcard__v:not(#z) .c svg,.hfv2-pcard__v:not(#z) .c i{width:14px!important;height:14px!important;font-size:14px!important}

@media(max-width:520px){
.hfv2-pcard__b:not(#z){padding:14px 15px 16px!important}
.hfv2-pcard__t:not(#z){font-size:14px!important}
.hf-cprice:not(#z) b{font-size:21px!important}
}

/* ══════════════════════════════════════════════════════════════════════
   TILE FORMAT — size badge + uncropped product shots
   Lives here because this file loads last and unconditionally; the same
   rules in pdp-full.css never reached category pages and were overridden
   by the :not(#z) block above.
   ══════════════════════════════════════════════════════════════════════ */

/* Meta line carries the eyebrow and the badge side by side. The inherited
   display:block stacked them and the uppercase letter-spacing tore the
   dimensions apart across two lines. */
.hfv2-pcard__meta:not(#z){display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}

.hfv2-pcard__meta:not(#z) .hf-fmt{
 display:inline-flex!important;align-items:center!important;gap:6px!important;
 margin:0!important;padding:3px 9px 3px 7px!important;
 border:1px solid rgba(16,31,54,.12)!important;border-radius:999px!important;
 background:#fff!important;
 font-size:10px!important;font-weight:650!important;letter-spacing:.02em!important;
 text-transform:none!important;line-height:1.5!important;white-space:nowrap!important}
.hfv2-pcard__meta:not(#z) .hf-fmt{color:#54627a!important}
.hfv2-pcard__meta:not(#z) .hf-fmt__shape{
 display:block!important;flex:0 0 auto!important;
 border:1.5px solid currentColor!important;border-radius:2px!important;opacity:.65!important}
.hfv2-pcard__meta:not(#z) .hf-fmt__label{font-variant-numeric:tabular-nums!important}

/* A rectangular tile cropped to a square is unrecognisable, so product
   shots are contained on a clean ground while scenery keeps filling the
   card. The scale-on-hover is dropped for contained shots — zooming a
   product you are trying to inspect works against the shopper. */
.hfv2-pcard__m:not(#z) img[data-fit="contain"]{
 object-fit:contain!important;padding:12px!important;box-sizing:border-box!important;background:#fff!important}
.hfv2-pcard:not(#z):hover .hfv2-pcard__m img[data-fit="contain"]{transform:none!important}
/* The dark gradient exists to seat white text over photography; over a
   white product ground it just dirties the lower edge. */
.hfv2-pcard__m:not(#z):has(img[data-fit="contain"])::after{opacity:0!important}

/* ══════════════════════════════════════════════════════════════════════
   SQUARE EDGES — global
   Rounded corners are dropped across the shared surfaces. Genuinely
   circular controls (the bag button, avatars, dots) keep their shape:
   squaring those would turn a control into a box, which is a different
   thing from squaring a panel.
   ══════════════════════════════════════════════════════════════════════ */
.hfv2-pcard:not(#z),
.hfv2-pcard__m:not(#z),
.hfv2-pcard__b:not(#z),
.hfv2-pcard__m:not(#z) img,
.hfv2-page:not(#z) .hf-card,
.hfv2-page:not(#z) .hf-panel,
.hfv2-page:not(#z) .hf-gmain,
.hfv2-page:not(#z) .hf-gthumb,
.hfv2-page:not(#z) .hf-gmain img,
.hfv2-page:not(#z) .hf-gthumb img{border-radius:0!important}

/* The size badge follows suit: a pill next to square frames looked borrowed
   from another design. */
.hfv2-pcard__meta:not(#z) .hf-fmt{border-radius:0!important}
.hfv2-pcard__meta:not(#z) .hf-fmt__shape{border-radius:0!important}


/* ==========================================================================
   Closing call to action
   --------------------------------------------------------------------------
   The rules live here rather than in the design system because that file is
   duplicated into pdp-full.css, and the two copies had already drifted. This
   stylesheet loads last and on every page, so one block governs all of them.

   Two things were wrong. The section was built at hero scale — a 52px
   heading and 96px of padding for what is a footer prompt, so it competed
   with the page above it. And the form was never actually styled: the mail
   field kept the plugin's white box and the button its default navy, which
   read as an unfinished embed dropped into a finished section.
   ========================================================================== */

/* Footer scale, not hero scale, and a quieter grid behind it. */
.hfv2-cta:not(#z){
	padding:clamp(44px,5.2vw,72px) 0;
	background-size:64px 64px;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
	border-top:1px solid rgba(255,255,255,.07);
}

.hfv2-cta__grid:not(#z){
	grid-template-columns:1fr .82fr;
	gap:clamp(28px,3.4vw,52px);
}

.hfv2-cta__h:not(#z){
	font-size:clamp(27px,2.9vw,40px);
	letter-spacing:-.6px;
	margin:12px 0 12px;
}

.hfv2-cta .hfv2-lead:not(#z){
	font-size:15px;
	line-height:1.6;
	max-width:46ch;
}

/* --- Actions ------------------------------------------------------------ */

.hfv2-cta__btns:not(#z){gap:10px;margin:20px 0 22px}

.hfv2-cta .hfv2-btn:not(#z){
	border-radius:0;
	min-height:48px;
	padding:0 22px;
	font-size:13px;
	letter-spacing:.2px;
	box-shadow:none;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}

/* One solid action carries the eye; the second states its presence with a
   hairline instead of a second filled shape. */
.hfv2-cta .hfv2-btn--light:not(#z){background:#fff;color:#0b1f38;border:1px solid #fff}
.hfv2-cta .hfv2-btn--light:not(#z):hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9)}

.hfv2-cta__ghost:not(#z){
	background:transparent;
	color:#fff;
	border:1px solid rgba(255,255,255,.26);
}
.hfv2-cta__ghost:not(#z):hover{
	background:rgba(255,255,255,.07);
	border-color:rgba(255,255,255,.42);
	color:#fff;
}

/* --- Reassurance list --------------------------------------------------- */

.hfv2-cta__checks:not(#z){gap:9px;padding-top:16px}
.hfv2-cta__checks li:not(#z){font-size:13.5px}
.hfv2-cta__checks .ic:not(#z){
	width:19px;height:19px;
	border-radius:0;
	font-size:11px;
	background:rgba(74,213,93,.16);
}

/* --- Newsletter card ---------------------------------------------------- */

.hfv2-cta__card:not(#z){
	border-radius:0;
	padding:clamp(22px,2.2vw,28px);
	background:rgba(255,255,255,.045);
	border:1px solid rgba(255,255,255,.12);
	/* A single lit edge gives the panel depth without a drop shadow, which
	   never looks right on a flat dark field. */
	box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.hfv2-cta__pill:not(#z){
	border-radius:0;
	font-size:10px;
	letter-spacing:.12em;
	padding:5px 10px;
	margin-bottom:14px;
	background:rgba(74,213,93,.14);
}

.hfv2-cta__ch:not(#z){font-size:21px;letter-spacing:-.2px;margin-bottom:8px}
.hfv2-cta__cd:not(#z){font-size:13.5px;margin-bottom:16px;max-width:42ch}
.hfv2-cta__note:not(#z){font-size:11.5px;margin-top:12px}

/* --- The embedded form -------------------------------------------------- */

.hfv2-cta__card .fluentform:not(#z){margin:0}
.hfv2-cta__card .fluentform .ff-el-group:not(#z){margin-bottom:10px}
/* The wrapper around the button carried the plugin's own bottom margin,
   which is what opened the gap above the reassurance line. */
.hfv2-cta__card .fluentform .ff-el-group:last-child:not(#z){margin-bottom:0}
.hfv2-cta__card .fluentform .ff_submit_btn_wrapper:not(#z){margin:0}

.hfv2-cta__card .fluentform input[type=email]:not(#z),
.hfv2-cta__card .fluentform input[type=text]:not(#z){
	background:rgba(255,255,255,.07)!important;
	color:#fff!important;
	border:1px solid rgba(255,255,255,.2)!important;
	border-radius:0!important;
	min-height:48px!important;
	padding:12px 14px!important;
	font-size:14px!important;
	box-shadow:none!important;
	transition:border-color .2s ease,background .2s ease;
	/* The field already sits in a spaced group; its own bottom margin was
	   stacking on top of that and pushing the button away. */
	margin-bottom:0!important;
}
.hfv2-cta__card .fluentform input:not(#z)::placeholder{color:rgba(255,255,255,.5)!important}
.hfv2-cta__card .fluentform input[type=email]:not(#z):focus,
.hfv2-cta__card .fluentform input[type=text]:not(#z):focus{
	background:rgba(255,255,255,.1)!important;
	border-color:rgba(255,255,255,.5)!important;
	outline:2px solid transparent;
	outline-offset:2px;
}

.hfv2-cta__card .fluentform .ff-btn-submit:not(#z),
.hfv2-cta__card .fluentform button[type=submit]:not(#z){
	width:100%;
	/* Fixed height, not a minimum: the plugin's own padding was pushing the
	   button past it and leaving it taller than the field above. */
	height:48px!important;
	min-height:0!important;
	padding:0 18px!important;
	line-height:1!important;
	border:0!important;
	border-radius:0!important;
	background:var(--green)!important;
	color:var(--green-ink)!important;
	font-size:12px!important;
	font-weight:700!important;
	letter-spacing:.08em;
	text-transform:uppercase;
	/* No glow: the button is already the brightest thing on the panel. */
	box-shadow:none!important;
	transition:filter .2s ease;
}
.hfv2-cta__card .fluentform .ff-btn-submit:not(#z):hover,
.hfv2-cta__card .fluentform button[type=submit]:not(#z):hover{filter:brightness(1.06)}

/* Keyboard users need the focus ring the plugin's reset removes. */
.hfv2-cta__card .fluentform button[type=submit]:not(#z):focus-visible,
.hfv2-cta .hfv2-btn:not(#z):focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
}

@media (max-width:980px){
	.hfv2-cta:not(#z){padding:40px 0}
	.hfv2-cta__grid:not(#z){grid-template-columns:1fr;gap:26px}
	.hfv2-cta__card:not(#z){padding:22px}
	.hfv2-cta .hfv2-btn:not(#z){flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
	.hfv2-cta .hfv2-btn:not(#z),
	.hfv2-cta__card .fluentform input:not(#z),
	.hfv2-cta__card .fluentform button[type=submit]:not(#z){transition:none}
}

/* The samples grid renders the same card as the category pages; its two
   actions are buttons rather than links, so they shed the UA chrome here. */
button.hfv2-pcard__v{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left}
button.hfv2-pcard__bag{cursor:pointer;font-family:inherit}