/* ==========================================================================
   DFS MOTION — PRODUCT GRID
   Reference: https://www.tamannaah.com/collections/high-jewellery
   (.product-grid-v2, scoped harvest 2026-08-31)

   ⬥ EVERY VALUE HERE IS THE MEASURED REFERENCE VALUE, and every one also lives
   as the matching control default in class-dfs-motion-peptide-product-grid.php — the
   stylesheet is the floor that reaches instances saved before a control existed;
   the control overrides it when someone chooses. The two MUST agree
   (lint-widget.mjs errors on disagreement).

   ⬥ BREAKPOINTS ARE THE REFERENCE'S OWN, not Elementor's:
     >960px  — 4 columns, 40px gap        (ALL.css @media not (max-width:960px))
     >990px  — section pad-block 40/20    (template inline style @media (width > 990px))
     >1025px — section pad-inline 40      (ALL.css @media not (max-width:1025px))
     ≥1024px — title/price 14px           (ALL.css @media screen and (min-width:1024px))
     768–1024 — image aspect 0.6          (ALL.css tab var)
     <1200px — arrows/wishlist always on  (ALL.css @media screen and not (min-width:1200px))
   The untouched drop-in therefore reflows EXACTLY like the reference. Control
   overrides are emitted by Elementor at its own breakpoints — a documented,
   user-chosen divergence, never the default's.

   ⬥ COLOURS AS HEX per house rule. Measured rgb() kept in comments.
   ========================================================================== */

.dfs-peptide-product-grid {
	/* MEASURED tokens — the custom-property layer the controls also write. */
	--dfs-peptide-product-grid-cols: 2;                 /* 390 el#1: 2 tracks            */
	--dfs-peptide-product-grid-cols-desktop: 4;         /* 1920 el#1: 4 × 426.25px       */
	--dfs-peptide-product-grid-gap: 12px;               /* 390 el#1 gap                  */
	--dfs-peptide-product-grid-gap-desktop: 40px;       /* 1920 el#1 gap                 */
	--dfs-peptide-product-grid-pad-block-start: 80px;   /* 390 el#0 pad 80px 12px        */
	--dfs-peptide-product-grid-pad-block-end: 80px;
	--dfs-peptide-product-grid-pad-inline: 12px;
	--dfs-peptide-product-grid-pad-block-start-desktop: 40px;  /* template style @>990   */
	--dfs-peptide-product-grid-pad-block-end-desktop: 20px;
	--dfs-peptide-product-grid-pad-inline-desktop: 40px;       /* ALL.css @>1025         */
	--dfs-peptide-product-grid-aspect: 0.7;             /* card style attr desktop/mobile */
	--dfs-peptide-product-grid-aspect-tab: 0.6;         /* card style attr tab            */
	--dfs-peptide-product-grid-title-ink: #090909;      /* .product-card__title a         */
	--dfs-peptide-product-grid-price-ink: #9f9f9f;      /* rgb(159,159,159) el#38         */
	--dfs-peptide-product-grid-ground: transparent;     /* house rule 2026-08-25: section owns the
	                                     background; reference's white page ground
	                                     recorded in DEVIATIONS.md               */
	--dfs-peptide-product-grid-slide-duration: 0.5s;    /* product-card-slider.js this.duration=500 */
	--dfs-peptide-product-grid-reveal: 0.2s;            /* .product-card-swiper__nav transition   */
	--dfs-peptide-product-grid-card-bg: transparent;    /* .product-card paints no ground         */
	--dfs-peptide-product-grid-card-radius: 0px;
	--dfs-peptide-product-grid-card-pad: 0px;
	--dfs-peptide-product-grid-img-fit: cover;          /* .product-card img object-fit           */
	--dfs-peptide-product-grid-img-radius: 0px;
	--dfs-peptide-product-grid-title-gap: 12px;         /* image bottom 63.3 -> title top 75.3    */
	--dfs-peptide-product-grid-arrow-ink: #090909;      /* nav colour                             */
	--dfs-peptide-product-grid-wishlist-ink: #090909;   /* wishlist colour                        */
	--dfs-peptide-product-grid-arrow-box: 30px;         /* el#25 30x30 hit area                   */
	--dfs-peptide-product-grid-wishlist-box: 30px;      /* el#31 30x30 hit area                   */
	--dfs-peptide-product-grid-arrow-glyph: 16px;       /* svg width/height                       */
	--dfs-peptide-product-grid-wishlist-glyph: 16px;
	--dfs-peptide-product-grid-arrow-offset: 8px;       /* nav left/right                         */
	--dfs-peptide-product-grid-wishlist-offset: 0px;    /* wishlist top/right                     */
	--dfs-peptide-product-grid-price-numeric: normal;   /* MEASURED: proportional figures         */
	--dfs-peptide-product-grid-grain-ink: #000000;
	--dfs-peptide-product-grid-grain-opacity: 0.06;
	--dfs-peptide-product-grid-grain-size: 3px;
	--dfs-peptide-product-grid-grain-blur: 0px;
	--dfs-peptide-product-grid-category-ink: #9f9f9f;   --dfs-peptide-product-grid-category-gap: 6px;
	--dfs-peptide-product-grid-sku-ink: #9f9f9f;        --dfs-peptide-product-grid-sku-gap: 6px;
	--dfs-peptide-product-grid-stock-ink: #9f9f9f;      --dfs-peptide-product-grid-stock-gap: 6px;
	--dfs-peptide-product-grid-excerpt-ink: #121212;    --dfs-peptide-product-grid-excerpt-gap: 6px;
	--dfs-peptide-product-grid-rating-ink: #090909;     --dfs-peptide-product-grid-rating-gap: 6px;
	--dfs-peptide-product-grid-rating-empty: #d6d6d6;   --dfs-peptide-product-grid-rating-size: 12px;
	--dfs-peptide-product-grid-browse-ink: #090909;     --dfs-peptide-product-grid-browse-gap: 24px;
	--dfs-peptide-product-grid-browse-ink-active: #ffffff;
	--dfs-peptide-product-grid-browse-fill-active: #090909;
	--dfs-peptide-product-grid-chip-pad: 8px 16px 8px 16px;
	--dfs-peptide-product-grid-chip-radius: 0px;
	--dfs-peptide-product-grid-lm-ink: #090909;         --dfs-peptide-product-grid-lm-fill: #ffffff;
	--dfs-peptide-product-grid-lm-border: #090909;      --dfs-peptide-product-grid-lm-border-w: 1px;
	--dfs-peptide-product-grid-lm-ink-hover: #ffffff;   --dfs-peptide-product-grid-lm-fill-hover: #090909;
	--dfs-peptide-product-grid-lm-border-hover: #090909;
	--dfs-peptide-product-grid-lm-pad: 14px 34px 14px 34px;
	--dfs-peptide-product-grid-lm-radius: 0px;          --dfs-peptide-product-grid-lm-gap: 40px;
	--dfs-peptide-product-grid-atc-ink: #ffffff;        --dfs-peptide-product-grid-atc-fill: #090909;
	--dfs-peptide-product-grid-atc-ink-hover: #090909;  --dfs-peptide-product-grid-atc-fill-hover: #e8e8e8;
	--dfs-peptide-product-grid-atc-pad: 12px 20px 12px 20px;
	--dfs-peptide-product-grid-atc-radius: 0px;         --dfs-peptide-product-grid-atc-gap: 12px;
	--dfs-peptide-product-grid-qv-ink: #ffffff;         --dfs-peptide-product-grid-qv-fill: rgba(9,9,9,0.72);
	--dfs-peptide-product-grid-qv-panel: #ffffff;       --dfs-peptide-product-grid-qv-backdrop: rgba(9,9,9,0.55);
	--dfs-peptide-product-grid-qv-radius: 0px;
	--dfs-peptide-product-grid-swatch-size: 18px;       --dfs-peptide-product-grid-swatch-radius: 18px;
	--dfs-peptide-product-grid-swatch-border: #d6d6d6;  --dfs-peptide-product-grid-swatch-border-active: #090909;
	--dfs-peptide-product-grid-swatch-gap: 10px;
	--dfs-peptide-product-grid-quiet-opacity: 0.45;     --dfs-peptide-product-grid-quiet-dur: 0.35s;
	--dfs-peptide-product-grid-sold-ink: #9f9f9f;       /* sold label; defaults to the price ink */
	--dfs-peptide-product-grid-meta-ink: #000000;       --dfs-peptide-product-grid-meta-gap: 10px;
	--dfs-peptide-product-grid-badge-ink: #ffffff;      --dfs-peptide-product-grid-badge-fill: #5b5b5b;
	--dfs-peptide-product-grid-badge-pad: 10px;         --dfs-peptide-product-grid-badge-offset: 10px;
	--dfs-peptide-product-grid-badge-radius: 0px;
	--dfs-peptide-product-grid-qa-ink: #1a1a18;         --dfs-peptide-product-grid-qa-fill: #fff2e6;
	--dfs-peptide-product-grid-qa-ink-hover: #fff2e6;   --dfs-peptide-product-grid-qa-fill-hover: #1a1a18;
	--dfs-peptide-product-grid-qa-pad: 12px 18px 12px 18px;
	--dfs-peptide-product-grid-qa-offset: 12px;         --dfs-peptide-product-grid-qa-radius: 0px;
	--dfs-peptide-product-grid-qa-panel: #fff2e6;       --dfs-peptide-product-grid-qa-backdrop: rgba(26,26,24,0.55);
	/* 44.44% = 384 of 864, MEASURED, the same value the control carries. The
	   only consumer is inside .dfs-peptide-product-grid__qa-dialog, which inherits it from here. */
	--dfs-peptide-product-grid-qa-gallery: 44.44%;
	/* --dfs-peptide-product-grid-cols-tab is deliberately NOT declared: unset means "follow the
	   reference's own 960 split", which is what the shipped build does. */

	background: var( --dfs-peptide-product-grid-ground );
	padding-block-start: var( --dfs-peptide-product-grid-pad-block-start );
	padding-block-end: var( --dfs-peptide-product-grid-pad-block-end );
	padding-inline: var( --dfs-peptide-product-grid-pad-inline );

	/* The reference cards INHERIT this context from the Shopify body (data.json
	   1920 el#0: Red Hat Display 16px/28.8px w500, rgba(18,18,18,.75)). No card
	   glyph renders at these values — title/price override to 700 — but the
	   computed cascade is part of the measured default, and a theme's 24px
	   line-height leaking in is how a drop-in stops matching. */
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: #121212bf; /* MEASURED rgba(18,18,18,0.75) */
}

/* The reference never styles its image anchors, so they compute the UA default
   link colour (data.json a#165: rgb(0,0,238)). No text renders inside them. */
.dfs-peptide-product-grid__slide a { color: #0000ee; }

.dfs-peptide-product-grid__grid {
	display: grid;
	grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols ), 1fr );
	gap: var( --dfs-peptide-product-grid-gap );
	list-style: none;
	margin: 0;
	padding: 0;
}

@media ( width > 990px ) {
	.dfs-peptide-product-grid {
		padding-block-start: var( --dfs-peptide-product-grid-pad-block-start-desktop );
		padding-block-end: var( --dfs-peptide-product-grid-pad-block-end-desktop );
	}
}

@media not ( max-width: 1025px ) {
	.dfs-peptide-product-grid { padding-inline: var( --dfs-peptide-product-grid-pad-inline-desktop ); }
}

@media not ( max-width: 960px ) {
	.dfs-peptide-product-grid__grid {
		grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols-desktop ), 1fr );
		gap: var( --dfs-peptide-product-grid-gap-desktop );
	}
}

/* TABLET COLUMN OVERRIDE — opt-in, and it must not disturb the shipped reflow.
   The reference's 960 split runs through the 768-1024 band, so this is written
   as two rules whose var() FALLBACK is exactly what already applies on that
   side of 960. With --dfs-peptide-product-grid-cols-tab unset the computed value is unchanged;
   set it and it wins across the whole band. */
@media screen and ( min-width: 768px ) and ( max-width: 960px ) {
	.dfs-peptide-product-grid__grid { grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols-tab, var( --dfs-peptide-product-grid-cols ) ), 1fr ); }
}
@media screen and ( min-width: 961px ) and ( max-width: 1024px ) {
	.dfs-peptide-product-grid__grid { grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols-tab, var( --dfs-peptide-product-grid-cols-desktop ) ), 1fr ); }
}

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

.dfs-peptide-product-grid__card {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;   /* .product-card */
	position: relative;
	background: var( --dfs-peptide-product-grid-card-bg );
	border-radius: var( --dfs-peptide-product-grid-card-radius );
	padding: var( --dfs-peptide-product-grid-card-pad );
}

.dfs-peptide-product-grid__image-container {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var( --dfs-peptide-product-grid-aspect );
	border-radius: var( --dfs-peptide-product-grid-img-radius );
}

.dfs-peptide-product-grid__slider {
	width: 100%;
	height: 100%;
	overflow: clip;            /* .product-card-slider */
	position: relative;
}

.dfs-peptide-product-grid__track {
	display: flex;
	will-change: transform;    /* .product-card-slider__track */
	height: 100%;
}

.dfs-peptide-product-grid__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin-right: 1px;         /* .product-card-slider__slide — the 1px IS the
	                              slide pitch: track x steps at width+1px
	                              (1920: 427.25 for a 426.25 slide)            */
}

.dfs-peptide-product-grid__slide a { display: block; height: 100%; }

.dfs-peptide-product-grid__card img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var( --dfs-peptide-product-grid-img-fit );
	aspect-ratio: var( --dfs-peptide-product-grid-aspect );
}

@media screen and ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-peptide-product-grid__image-container,
	.dfs-peptide-product-grid__card img { aspect-ratio: var( --dfs-peptide-product-grid-aspect-tab ); }
}

/* ---- arrows -------------------------------------------------------------- */

.dfs-peptide-product-grid__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	width: var( --dfs-peptide-product-grid-arrow-box );       /* el#25 30×30 */
	height: var( --dfs-peptide-product-grid-arrow-box );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var( --dfs-peptide-product-grid-arrow-ink );
	background: none;
	border: none;
	padding: 0;
	opacity: 0;
	transition: opacity var( --dfs-peptide-product-grid-reveal ) ease;   /* .product-card-swiper__nav */
}

.dfs-peptide-product-grid__nav svg {
	width: var( --dfs-peptide-product-grid-arrow-glyph );
	height: var( --dfs-peptide-product-grid-arrow-glyph );
	flex-shrink: 0;   /* the glyph is sized by its own control, never by the box */
}

.dfs-peptide-product-grid__nav--prev { left: var( --dfs-peptide-product-grid-arrow-offset ); }
.dfs-peptide-product-grid__nav--prev svg { transform: rotate( 180deg ); }
.dfs-peptide-product-grid__nav--next { right: var( --dfs-peptide-product-grid-arrow-offset ); }

/* ---- wishlist ------------------------------------------------------------ */

.dfs-peptide-product-grid__wishlist {
	position: absolute;
	top: var( --dfs-peptide-product-grid-wishlist-offset );
	right: var( --dfs-peptide-product-grid-wishlist-offset );
	width: var( --dfs-peptide-product-grid-wishlist-box );    /* el#31 30×30 at card top-right */
	height: var( --dfs-peptide-product-grid-wishlist-box );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var( --dfs-peptide-product-grid-wishlist-ink );
	background: none;
	border: none;
	padding: 0;
	opacity: 0;
	z-index: 2;
	transition: opacity var( --dfs-peptide-product-grid-reveal ) ease;
}

.dfs-peptide-product-grid__wishlist svg {
	width: var( --dfs-peptide-product-grid-wishlist-glyph );
	height: var( --dfs-peptide-product-grid-wishlist-glyph );
	flex-shrink: 0;
}

.dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__nav,
.dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__wishlist { opacity: 1; }
/* Hover colour: falls back to the rest colour, so nothing moves until it is set. */
.dfs-peptide-product-grid__wishlist:hover,
.dfs-peptide-product-grid__wishlist:focus-visible { color: var( --dfs-peptide-product-grid-wishlist-ink-hover, var( --dfs-peptide-product-grid-wishlist-ink ) ); }

/* <1200px the reference shows both permanently (ALL.css). */
@media screen and not ( min-width: 1200px ) {
	.dfs-peptide-product-grid__nav,
	.dfs-peptide-product-grid__wishlist { opacity: 1; }
}

/* ---- text ---------------------------------------------------------------- */

.dfs-peptide-product-grid__title {
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;           /* base; 14px ≥1024 below */
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin-top: var( --dfs-peptide-product-grid-title-gap );   /* image bottom 63.3 → title top 75.3 @1920 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Truncation is a design decision, so it is a switch — expressed as a data
   attribute the rule asks, never a second declaration racing the first. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-truncate="off"] .dfs-peptide-product-grid__title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.dfs-peptide-product-grid__title a {
	text-decoration: none;
	color: var( --dfs-peptide-product-grid-title-ink );
}

.dfs-peptide-product-grid__price {
	font-variant-numeric: var( --dfs-peptide-product-grid-price-numeric );
	color: var( --dfs-peptide-product-grid-price-ink );
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	display: block;
}

/* WooCommerce price HTML carries its own <del>/<ins>/screen-reader spans —
   keep them on the measured single-line look. */
.dfs-peptide-product-grid__price del { display: none; }
.dfs-peptide-product-grid__price ins { text-decoration: none; }
.dfs-peptide-product-grid__price .screen-reader-text { position: absolute; clip: rect( 0, 0, 0, 0 ); }

@media screen and ( min-width: 1024px ) {
	.dfs-peptide-product-grid__title { font-size: 14px; }   /* el#36 @1920 */
	.dfs-peptide-product-grid__price { font-size: 14px; }
}

/* ---- states -------------------------------------------------------------- */

.dfs-peptide-product-grid__nav:focus-visible,
.dfs-peptide-product-grid__wishlist:focus-visible,
.dfs-peptide-product-grid__title a:focus-visible {
	opacity: 1;
	/* currentColor, so the ring follows the arrow / wishlist / title colour the
	   user actually set. The old shared icon token was written by NO control,
	   so the ring stayed #090909 whatever the icons were changed to. */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Reduced motion: the slide tween is skipped in JS (gsap.matchMedia); the only
   CSS motion is the 0.2s reveal, kept — opacity-only, non-vestibular. */
@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid__track { transition: none; }
}

/* Editor canvas: Elementor preview iframes fire pointer events oddly mid-drag;
   the grid needs no special-casing, but never trap clicks under the track. */
.elementor-editor-active .dfs-peptide-product-grid__track { pointer-events: auto; }


/* ---- film grain (opt-in, @see enable_grain) ------------------------------- */

/* The layer only EXISTS when the switch is on — an off feature must not put a
   stacking context or a paint layer on the page. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-grain="on"] { position: relative; }

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-grain="on"]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: var( --dfs-peptide-product-grid-grain-opacity );
	filter: blur( var( --dfs-peptide-product-grid-grain-blur ) );
	/* A tiled dot at --dfs-peptide-product-grid-grain-size. No asset, so nothing to download and
	   the colour stays a control rather than a baked PNG. */
	background-image: radial-gradient(
		var( --dfs-peptide-product-grid-grain-ink ) 0.5px, transparent 0.5px );
	background-size: var( --dfs-peptide-product-grid-grain-size ) var( --dfs-peptide-product-grid-grain-size );
}

@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	/* the grain is static, so nothing to disable — noted so the next reader
	   does not have to check. */
}

/* A slide with no link still needs the anchor's box, or the image loses its
   height and every card collapses. */
.dfs-peptide-product-grid__slide-inner { display: block; height: 100%; }


/* ---- optional card detail slots (all ship OFF, @see section_content_details) --
   Each inherits the card's family so a slot switched on already looks like the
   card rather than like the theme. */

.dfs-peptide-product-grid__category,
.dfs-peptide-product-grid__sku,
.dfs-peptide-product-grid__stock,
.dfs-peptide-product-grid__excerpt {
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

.dfs-peptide-product-grid__category { color: var( --dfs-peptide-product-grid-category-ink ); margin-top: var( --dfs-peptide-product-grid-category-gap ); text-transform: uppercase; }
.dfs-peptide-product-grid__sku      { color: var( --dfs-peptide-product-grid-sku-ink );      margin-top: var( --dfs-peptide-product-grid-sku-gap ); }
.dfs-peptide-product-grid__stock    { color: var( --dfs-peptide-product-grid-stock-ink );    margin-top: var( --dfs-peptide-product-grid-stock-gap ); }
.dfs-peptide-product-grid__excerpt  { color: var( --dfs-peptide-product-grid-excerpt-ink );  margin-top: var( --dfs-peptide-product-grid-excerpt-gap ); }

/* The category renders WooCommerce's own anchor list; keep it on the slot's ink
   rather than the theme's link colour. */
.dfs-peptide-product-grid__category a { color: inherit; text-decoration: none; }

/* WooCommerce's star rating is a font-face bar whose width is the score. */
.dfs-peptide-product-grid__rating { margin-top: var( --dfs-peptide-product-grid-rating-gap ); }

/* Scoped under .dfs-peptide-product-grid so these are (0,3,0) and beat Woo's (0,2,0) outright.
   At equal specificity the winner was whichever stylesheet enqueued last. */
.dfs-peptide-product-grid .dfs-peptide-product-grid__rating .star-rating {
	font-size: var( --dfs-peptide-product-grid-rating-size );
	color: var( --dfs-peptide-product-grid-rating-ink );
	float: none;              /* Woo floats it right; left stays left */
	margin: 0;
}
.dfs-peptide-product-grid .dfs-peptide-product-grid__rating .star-rating::before { color: var( --dfs-peptide-product-grid-rating-empty ); }

/* ---- video slides (opt-in, @see enable_video_slides) --------------------- */
/* Identical box to the img it replaces, or the slide pitch stops matching. */
.dfs-peptide-product-grid__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: var( --dfs-peptide-product-grid-img-fit );
	aspect-ratio: var( --dfs-peptide-product-grid-aspect );
}

@media screen and ( min-width: 768px ) and ( max-width: 1024px ) {
	.dfs-peptide-product-grid__video { aspect-ratio: var( --dfs-peptide-product-grid-aspect-tab ); }
}


/* ---- browse bar + load more (all opt-in) --------------------------------- */

.dfs-peptide-product-grid__browse {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var( --dfs-peptide-product-grid-browse-gap );
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	color: var( --dfs-peptide-product-grid-browse-ink );
}

.dfs-peptide-product-grid__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.dfs-peptide-product-grid__chip {
	font: inherit;
	color: var( --dfs-peptide-product-grid-browse-ink );
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var( --dfs-peptide-product-grid-chip-radius );
	padding: var( --dfs-peptide-product-grid-chip-pad );
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dfs-peptide-product-grid__chip.is-active {
	color: var( --dfs-peptide-product-grid-browse-ink-active );
	background: var( --dfs-peptide-product-grid-browse-fill-active );
	border-color: var( --dfs-peptide-product-grid-browse-fill-active );
}

.dfs-peptide-product-grid__sort { display: flex; align-items: center; gap: 8px; }
.dfs-peptide-product-grid__sort-select {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	padding: 6px 10px;
	cursor: pointer;
}

/* A card the filter has excluded. display:none rather than visibility, so it
   leaves the grid flow entirely and the columns reflow. */
.dfs-peptide-product-grid__item[hidden] { display: none; }

.dfs-peptide-product-grid__loadmore {
	display: block;
	margin: var( --dfs-peptide-product-grid-lm-gap ) auto 0;
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --dfs-peptide-product-grid-lm-ink );
	background: var( --dfs-peptide-product-grid-lm-fill );
	border: var( --dfs-peptide-product-grid-lm-border-w ) solid var( --dfs-peptide-product-grid-lm-border );
	border-radius: var( --dfs-peptide-product-grid-lm-radius );
	padding: var( --dfs-peptide-product-grid-lm-pad );
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.dfs-peptide-product-grid__loadmore:hover,
.dfs-peptide-product-grid__loadmore:focus-visible {
	color: var( --dfs-peptide-product-grid-lm-ink-hover );
	background: var( --dfs-peptide-product-grid-lm-fill-hover );
	border-color: var( --dfs-peptide-product-grid-lm-border-hover );
}

.dfs-peptide-product-grid__loadmore[hidden] { display: none; }

.dfs-peptide-product-grid__chip:focus-visible,
.dfs-peptide-product-grid__sort-select:focus-visible,
.dfs-peptide-product-grid__loadmore:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ---- shop actions (all opt-in) ------------------------------------------- */

.dfs-peptide-product-grid__atc {
	display: inline-block;
	margin-top: var( --dfs-peptide-product-grid-atc-gap );
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var( --dfs-peptide-product-grid-atc-ink );
	background: var( --dfs-peptide-product-grid-atc-fill );
	padding: var( --dfs-peptide-product-grid-atc-pad );
	border-radius: var( --dfs-peptide-product-grid-atc-radius );
	transition: background-color 0.25s ease, color 0.25s ease;
}
.dfs-peptide-product-grid__atc:hover,
.dfs-peptide-product-grid__atc:focus-visible {
	color: var( --dfs-peptide-product-grid-atc-ink-hover );
	background: var( --dfs-peptide-product-grid-atc-fill-hover );
}
/* Woo appends a "View cart" link after a successful AJAX add. */
.dfs-peptide-product-grid__card .added_to_cart {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	color: var( --dfs-peptide-product-grid-price-ink );
}

.dfs-peptide-product-grid__swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var( --dfs-peptide-product-grid-swatch-gap ); }
.dfs-peptide-product-grid__swatch {
	width: var( --dfs-peptide-product-grid-swatch-size );
	height: var( --dfs-peptide-product-grid-swatch-size );
	padding: 2px;
	background: none;
	border: 1px solid var( --dfs-peptide-product-grid-swatch-border );
	border-radius: var( --dfs-peptide-product-grid-swatch-radius );
	cursor: pointer;
	line-height: 0;
	transition: border-color 0.2s ease;
}
.dfs-peptide-product-grid__swatch.is-active { border-color: var( --dfs-peptide-product-grid-swatch-border-active ); }
.dfs-peptide-product-grid__swatch-dot { display: block; width: 100%; height: 100%; border-radius: inherit; }

/* Quick view trigger — sits on the image, revealed with the other overlay
   controls so the card has one hover behaviour rather than two. */
.dfs-peptide-product-grid__qv {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX( -50% );
	z-index: 2;
	font-family: "DFS PG Red Hat Display", "Red Hat Display", sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var( --dfs-peptide-product-grid-qv-ink );
	background: var( --dfs-peptide-product-grid-qv-fill );
	border: none;
	padding: 8px 16px;
	cursor: pointer;
	opacity: 0;
	transition: opacity var( --dfs-peptide-product-grid-reveal ) ease;
}
.dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__qv,
.dfs-peptide-product-grid__qv:focus-visible { opacity: 1; }
@media screen and not ( min-width: 1200px ) { .dfs-peptide-product-grid__qv { opacity: 1; } }

.dfs-peptide-product-grid__qv-dialog {
	width: min( 900px, 92vw );
	max-height: 88vh;
	padding: 0;
	border: none;
	border-radius: var( --dfs-peptide-product-grid-qv-radius );
	background: var( --dfs-peptide-product-grid-qv-panel );
	overflow: auto;
}
.dfs-peptide-product-grid__qv-dialog::backdrop { background: var( --dfs-peptide-product-grid-qv-backdrop ); }
.dfs-peptide-product-grid__qv-close {
	position: absolute; top: 10px; right: 10px;
	width: 34px; height: 34px;
	font-size: 22px; line-height: 1;
	background: none; border: none; cursor: pointer;
	color: var( --dfs-peptide-product-grid-title-ink );
}
.dfs-peptide-product-grid__qv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
@media screen and ( max-width: 700px ) { .dfs-peptide-product-grid__qv-body { grid-template-columns: 1fr; } }
.dfs-peptide-product-grid__qv-body img { width: 100%; height: auto; display: block; }

.dfs-peptide-product-grid__atc:focus-visible,
.dfs-peptide-product-grid__qv:focus-visible,
.dfs-peptide-product-grid__swatch:focus-visible,
.dfs-peptide-product-grid__qv-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ---- quiet hover (opt-in) ------------------------------------------------
   Pure CSS: the GRID being hovered plus the card that is not. No JS, so it can
   never lag the pointer or leave a card stuck dim. The transition sits on the
   item unconditionally-but-harmlessly only inside the opted-in tree. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-quiet="on"] .dfs-peptide-product-grid__item {
	transition: opacity var( --dfs-peptide-product-grid-quiet-dur ) ease;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-quiet="on"] .dfs-peptide-product-grid__grid:hover .dfs-peptide-product-grid__item:not( :hover ) {
	opacity: var( --dfs-peptide-product-grid-quiet-opacity );
}

/* Someone who asked for less motion still gets the focus cue, just without the
   fade — an instant state change is not vestibular. */
@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-quiet="on"] .dfs-peptide-product-grid__item { transition: none; }
}


/* ---- sold out ------------------------------------------------------------ */
.dfs-peptide-product-grid__price--sold { color: var( --dfs-peptide-product-grid-sold-ink ); }


/* ---- meta line + out-of-stock badge (both opt-in) ------------------------ */

.dfs-peptide-product-grid__meta {
	font-family: "DFS PG Nunito", "Nunito", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var( --dfs-peptide-product-grid-meta-ink );
	margin-top: var( --dfs-peptide-product-grid-meta-gap );
}
.dfs-peptide-product-grid__sold { font-weight: 700; }   /* i118: Nunito 700 */

.dfs-peptide-product-grid__badge {
	position: absolute;
	top: var( --dfs-peptide-product-grid-badge-offset );
	left: var( --dfs-peptide-product-grid-badge-offset );
	z-index: 3;
	font-family: "Roboto", sans-serif;   /* i113 */
	font-size: 16px;
	line-height: 24px;
	color: var( --dfs-peptide-product-grid-badge-ink );
	background: var( --dfs-peptide-product-grid-badge-fill );
	padding: var( --dfs-peptide-product-grid-badge-pad );
	border-radius: var( --dfs-peptide-product-grid-badge-radius );
	pointer-events: none;
}

/* ==========================================================================
   MODE 2 — IMAGE CUTOUT
   paigeblake.com/designs/, harvest pg-mode2-cutout. Every number cites the
   element index it was read from. Scoped to the mode attribute, so Mode 1 is
   untouched by all of it.
   ========================================================================== */

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__grid {
	gap: 13px;                                   /* i71 */
}

/* THE CUTOUT. A FIXED-HEIGHT band with object-fit: contain, not an aspect box —
   the product floats on the ground instead of being cropped to fill. i73 = 249px
   tall at 1920, i76 = contain, i75 ground rgba(255,255,255,0). */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__image-container {
	height: 249px;
	aspect-ratio: auto;
	background: transparent;
	overflow: visible;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__card img,
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__video {
	object-fit: contain;
	aspect-ratio: auto;
	height: 100%;
}

/* MEASURED 0.3s ease on uc_post_image--second (i77) — the hover cross-fade. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__track {
	transition: opacity 0.3s ease;
}

/* Centred, determined from geometry: the title link sits at x=428 in a card
   spanning 370-655.25, i.e. symmetric about the centre. Same for the price. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__card { text-align: center; }

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__title {
	font-family: "DFS PG Anton", "Anton", sans-serif;   /* i80 */
	font-size: 24px;
	line-height: 36px;
	font-weight: 400;
	text-transform: uppercase;
	color: var( --dfs-peptide-product-grid-title-ink );                 /* #000000 via preset_css while title_color is untouched */
	margin-top: 10px;                                   /* i79 padding 10px 0 0 */
	white-space: normal;
	overflow: visible;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__title a { color: var( --dfs-peptide-product-grid-title-ink ); }

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__price {
	font-family: Arial, sans-serif;                     /* i85 */
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	text-transform: none;
	color: var( --dfs-peptide-product-grid-price-ink );                 /* #000000 via preset_css while price_color is untouched */
	margin-top: 8px;
}

@media screen and ( max-width: 767px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__grid { gap: 15px; }          /* 390: gap 15 */
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__image-container { height: 370px; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__title { font-size: 27px; line-height: 40.5px; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode2"] .dfs-peptide-product-grid__meta { font-size: 17px; line-height: 25.5px; }
}


/* ---- quick add: the card button (opt-in) --------------------------------- */

.dfs-peptide-product-grid__qa-btn {
	position: absolute;
	left: var( --dfs-peptide-product-grid-qa-btn-left, 50% );
	right: var( --dfs-peptide-product-grid-qa-btn-right, auto );
	bottom: var( --dfs-peptide-product-grid-qa-offset );
	transform: translateX( var( --dfs-peptide-product-grid-qa-btn-shift, -50% ) );
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --dfs-peptide-product-grid-qa-btn-min, auto );
	min-height: var( --dfs-peptide-product-grid-qa-btn-h, auto );
	white-space: nowrap;
	overflow: hidden;             /* this is what clips the label to nothing */
	font-family: var( --dfs-peptide-product-grid-qa-btn-family, "DFS PG Red Hat Display", "Red Hat Display", sans-serif );
	font-size: var( --dfs-peptide-product-grid-qa-btn-size, 12px );
	font-weight: var( --dfs-peptide-product-grid-qa-btn-weight, 500 );
	line-height: var( --dfs-peptide-product-grid-qa-btn-lh, normal );
	letter-spacing: var( --dfs-peptide-product-grid-qa-btn-ls, 0.02em );
	text-transform: var( --dfs-peptide-product-grid-qa-btn-case, none );
	color: var( --dfs-peptide-product-grid-qa-ink );
	/* background-COLOR, not the shorthand. The shorthand resets every
	     longhand it covers, and background-clip below is one of them. */
	background-color: var( --dfs-peptide-product-grid-qa-fill );
	/*
	 * padding-box, READ FROM SOURCE. The reference clips its fill to the
	 * padding edge, so the 2px rgba(0,0,0,.15) border composites over the
	 * blurred image behind rather than over the cream fill. Clipped to
	 * border-box — the CSS default, which is what we shipped — the identical
	 * border renders as a solid dark ring. It is the only one of the five
	 * relevant declarations that differed, and it is the whole look.
	 */
	background-clip: var( --dfs-peptide-product-grid-qa-btn-clip, padding-box );
	border: var( --dfs-peptide-product-grid-qa-btn-bd, 0 ) solid var( --dfs-peptide-product-grid-qa-btn-bd-ink, transparent );
	box-shadow: var( --dfs-peptide-product-grid-qa-btn-ring, none );
	backdrop-filter: var( --dfs-peptide-product-grid-qa-btn-blur, none );
	border-radius: var( --dfs-peptide-product-grid-qa-radius );
	padding: var( --dfs-peptide-product-grid-qa-pad );
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease,
		background-color var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) ),
		color var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) ),
		box-shadow var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) );
}

/* the bag sits still; only the label's track opens */
.dfs-peptide-product-grid__qa-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var( --dfs-peptide-product-grid-qa-btn-icon, 20px );
	height: var( --dfs-peptide-product-grid-qa-btn-icon, 20px );
}
.dfs-peptide-product-grid__qa-btn-icon svg {
	width: var( --dfs-peptide-product-grid-qa-btn-glyph, 100% );
	height: var( --dfs-peptide-product-grid-qa-btn-glyph, 100% );
	display: block;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-btn-icon="off"] .dfs-peptide-product-grid__qa-btn-icon { display: none; }

/*
 * 0fr -> 1fr resolves to the label's OWN width, so "Choose" and "Add to bag"
 * each open at their correct rate. A max-width transition cannot: it has to be
 * set large enough for the longest label, and every shorter one then finishes
 * early and appears to stall.
 */
.dfs-peptide-product-grid__qa-btn-text {
	display: grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) );
}
.dfs-peptide-product-grid__qa-btn-text > span {
	overflow: hidden;
	min-width: 0;
	/* READ FROM SOURCE: the reference's label letters carry
	   opacity / translate / filter:blur and settle to 0 on hover, after a
	   transition-delay of one --animation-speed. Revealing the track and
	   resolving the letters are two different things to look at. */
	opacity: var( --dfs-peptide-product-grid-qa-btn-label-op, 0 );
	filter: blur( var( --dfs-peptide-product-grid-qa-btn-label-blur, 3px ) );
	transition: opacity var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) ),
		filter var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) ),
		padding var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) );
	/* ZERO while collapsed. grid-template-columns:0fr sizes the TRACK; an
	   item's padding is not inside the track, so leaving 10px here made the
	   collapsed button 50px wide against the reference's 36. */
	padding-left: 0;
	padding-right: 0;
	transition: padding var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) );
}
.dfs-peptide-product-grid__qa-btn:hover .dfs-peptide-product-grid__qa-btn-text > span,
.dfs-peptide-product-grid__qa-btn:focus-visible .dfs-peptide-product-grid__qa-btn-text > span,
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-btn-label="always"] .dfs-peptide-product-grid__qa-btn-text > span {
	padding-left: var( --dfs-peptide-product-grid-qa-btn-gap, 6px );
	padding-right: var( --dfs-peptide-product-grid-qa-btn-tail, 4px );
	--dfs-peptide-product-grid-qa-btn-label-op: 1;
	--dfs-peptide-product-grid-qa-btn-label-blur: 0px;
	transition-delay: var( --dfs-peptide-product-grid-qa-btn-label-delay, 0.12s );
}
@media ( hover: none ) {
	.dfs-peptide-product-grid__qa-btn-text > span {
		padding-left: var( --dfs-peptide-product-grid-qa-btn-gap, 6px );
		padding-right: var( --dfs-peptide-product-grid-qa-btn-tail, 4px );
	}
}
.dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__qa-btn:hover .dfs-peptide-product-grid__qa-btn-text,
.dfs-peptide-product-grid__qa-btn:hover .dfs-peptide-product-grid__qa-btn-text,
.dfs-peptide-product-grid__qa-btn:focus-visible .dfs-peptide-product-grid__qa-btn-text { grid-template-columns: 1fr; }
/* Always-open is a setting, not a hover accident. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-btn-label="always"] .dfs-peptide-product-grid__qa-btn-text { grid-template-columns: 1fr; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-btn-label="never"] .dfs-peptide-product-grid__qa-btn-text { display: none; }

/* Touch has no hover, so the label can never open there — show it outright. */
@media ( hover: none ) {
	.dfs-peptide-product-grid__qa-btn-text { grid-template-columns: 1fr; }
}
@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid__qa-btn,
	.dfs-peptide-product-grid__qa-btn-text { transition: none; }
}
.dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__qa-btn,
.dfs-peptide-product-grid__qa-btn:focus-visible { opacity: 1; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-reveal="always"] .dfs-peptide-product-grid__qa-btn { opacity: 1; }
.dfs-peptide-product-grid__qa-btn:hover,
.dfs-peptide-product-grid__qa-btn:focus-visible {
	color: var( --dfs-peptide-product-grid-qa-ink-hover );
	/* shorthand here reset background-clip back to border-box on hover, which
	     is the state that is actually looked at */
	background-color: var( --dfs-peptide-product-grid-qa-fill-hover );
	/* READ FROM SOURCE: .quick-add__button:hover { scale: 1.03 }. This is what
	   makes the reference's hovered button measure 111.5 x 55.6 rather than
	   108.25 x 54 — the delta I spent two rounds trying to find in padding. */
	scale: var( --dfs-peptide-product-grid-qa-btn-scale, 1 );
}
/* READ FROM SOURCE: .quick-add__button:active { scale: .99 } */
.dfs-peptide-product-grid__qa-btn:active { scale: var( --dfs-peptide-product-grid-qa-btn-scale-active, 1 ); }
/* touch has no hover, so the control must not be unreachable there */
@media ( hover: none ) { .dfs-peptide-product-grid__qa-btn { opacity: 1; } }

.dfs-peptide-product-grid__price-status {
	font-size: 0.72em;            /* MEASURED 7.92px against an 11px price */
	text-transform: uppercase;
	opacity: 0.8;
}

/* ---- the chooser dialog -------------------------------------------------- */

/* The chooser's dimensions live on .dfs-peptide-product-grid, the element every Chooser control writes
   ({{WRAPPER}} .dfs-peptide-product-grid). Declared on the dialog itself they shadowed the inherited control
   value and 26 controls did nothing (audit 2026-10-21). --dfs-peptide-product-grid-qa-gallery is declared
   in the root block above. */
.dfs-peptide-product-grid {
	/* ---- every dimension the Style tab can own. Defaults are MEASURED off
	   tessafay.com: dialog 864x520, media column 384, details 480. ---- */
	--dfs-peptide-product-grid-qa-w: 864px;
	--dfs-peptide-product-grid-qa-h: 520px;
	--dfs-peptide-product-grid-qa-dialog-radius: 0px;
	--dfs-peptide-product-grid-qa-dialog-pad: 28px;
	--dfs-peptide-product-grid-qa-gallery-gap: 4px;
	--dfs-peptide-product-grid-qa-media-ratio: 1 / 1.25;
	--dfs-peptide-product-grid-qa-shadow: 0 5px 30px rgb( 0 0 0 / 0.15 );

	--dfs-peptide-product-grid-qa-close-size: 44px;
	--dfs-peptide-product-grid-qa-close-icon: 22px;
	--dfs-peptide-product-grid-qa-close-inset: 4.8px;
	--dfs-peptide-product-grid-qa-close-radius: 50%;

	--dfs-peptide-product-grid-qa-swatch-min: 54.85px;
	--dfs-peptide-product-grid-qa-swatch-gap: 11.2px;
	--dfs-peptide-product-grid-qa-swatch-pad: 8px 12.8px;
	--dfs-peptide-product-grid-qa-swatch-bd: 1px;
	--dfs-peptide-product-grid-qa-swatch-radius: 0px;

	--dfs-peptide-product-grid-qa-qty-w: 142px;
	--dfs-peptide-product-grid-qa-qty-h: 52px;
	--dfs-peptide-product-grid-qa-qty-btn: 52px;
	--dfs-peptide-product-grid-qa-qty-bd: 1px;
	--dfs-peptide-product-grid-qa-qty-radius: 0px;

	--dfs-peptide-product-grid-qa-add-h: 54px;
	--dfs-peptide-product-grid-qa-add-pad: 16px 24px;
	--dfs-peptide-product-grid-qa-add-radius: 0px;
	--dfs-peptide-product-grid-qa-add-icon: 20px;
	--dfs-peptide-product-grid-qa-add-gap: 4.8px;
	--dfs-peptide-product-grid-qa-buy-gap: 8px;
}

.dfs-peptide-product-grid__qa-dialog {
	font-family: var( --dfs-peptide-product-grid-qa-family, inherit );
	width: min( var( --dfs-peptide-product-grid-qa-w ), 94vw );
	height: min( var( --dfs-peptide-product-grid-qa-h ), 88vh );
	max-width: none;
	padding: 0;
	border: none;
	border-radius: var( --dfs-peptide-product-grid-qa-dialog-radius );
	background: var( --dfs-peptide-product-grid-qa-panel );
	color: var( --dfs-peptide-product-grid-qa-ink, inherit );
	box-shadow: var( --dfs-peptide-product-grid-qa-shadow );
	overflow: hidden;             /* the COLUMNS scroll, not the dialog */
}
.dfs-peptide-product-grid__qa-dialog[open] { display: flex; }
.dfs-peptide-product-grid__qa-dialog::backdrop { background: var( --dfs-peptide-product-grid-qa-backdrop ); }

.dfs-peptide-product-grid__qa-close {
	position: absolute;
	top: var( --dfs-peptide-product-grid-qa-close-inset );
	right: var( --dfs-peptide-product-grid-qa-close-inset );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --dfs-peptide-product-grid-qa-close-size );
	height: var( --dfs-peptide-product-grid-qa-close-size );
	font-size: var( --dfs-peptide-product-grid-qa-close-icon );
	line-height: 1;
	border: none;
	border-radius: var( --dfs-peptide-product-grid-qa-close-radius );
	background: var( --dfs-peptide-product-grid-qa-close-bg, transparent );
	color: var( --dfs-peptide-product-grid-qa-close-ink, inherit );
	cursor: pointer;
	/* MEASURED on the reference: transform .15s on a bounce curve. */
	transition: transform 0.15s cubic-bezier( 0.5, 0, 0.2, 1.4 ),
		background-color 0.2s ease, color 0.2s ease;
}
.dfs-peptide-product-grid__qa-close:hover {
	background: var( --dfs-peptide-product-grid-qa-close-bg-hover, transparent );
	color: var( --dfs-peptide-product-grid-qa-close-ink-hover, inherit );
	transform: scale( 1.12 );
}

.dfs-peptide-product-grid__qa-body {
	display: grid;
	/* ONE percentage, not two fr weights — the existing Image Column Width
	   control writes this variable, and a control that writes a variable
	   nothing reads is just a dead slider. 44.44% is the measured 384/864. */
	grid-template-columns: var( --dfs-peptide-product-grid-qa-gallery, 44.44% ) 1fr;
	width: 100%;
	height: 100%;
	min-height: 0;
}

/* MEASURED on the reference: the media column is its OWN scroll container
   (position:sticky + overflow-y:auto, scrollbar hidden), holding a grid of
   images at aspect-ratio 1/1.25 with a 4px gutter. The wheel handler in JS lets
   a scroll anywhere in the dialog drive it — see DEVIATIONS, Brad's improvement. */
.dfs-peptide-product-grid__qa-media {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --dfs-peptide-product-grid-qa-gallery-gap );
	align-content: start;
	overflow-y: auto;
	min-height: 0;
	height: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dfs-peptide-product-grid__qa-media::-webkit-scrollbar { display: none; }
.dfs-peptide-product-grid__qa-media img {
	width: 100%;
	display: block;
	aspect-ratio: var( --dfs-peptide-product-grid-qa-media-ratio );
	object-fit: cover;
}

/* The options column does not scroll with the images — it is the static half. */
.dfs-peptide-product-grid__qa-details {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0;
	height: 100%;
	/* one var per side: the Padding control is four values, a single var read as one length went invalid (audit 2026-10-21) */
	padding: var( --dfs-peptide-product-grid-qa-dialog-pad-t, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) 0 0;
}
.dfs-peptide-product-grid__qa-details > * { padding-left: var( --dfs-peptide-product-grid-qa-dialog-pad-l, var( --dfs-peptide-product-grid-qa-dialog-pad ) ); padding-right: var( --dfs-peptide-product-grid-qa-dialog-pad-r, var( --dfs-peptide-product-grid-qa-dialog-pad ) ); }
.dfs-peptide-product-grid__qa-details .dfs-peptide-product-grid__qa-buy {
	position: sticky;             /* the reference pins its buy bar */
	bottom: 0;
	margin-top: auto;
	padding: 0 var( --dfs-peptide-product-grid-qa-dialog-pad-r, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) var( --dfs-peptide-product-grid-qa-dialog-pad-b, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) var( --dfs-peptide-product-grid-qa-dialog-pad-l, var( --dfs-peptide-product-grid-qa-dialog-pad ) );
	background: var( --dfs-peptide-product-grid-qa-panel );
}

/*
 * BELOW 750px THE REFERENCE IS A BOTTOM SHEET. Read from ALL.css, not guessed:
 * position:fixed, margin:auto 0 0, max-width:100%, height:fit-content, square
 * corners except the top two. Its content becomes a 4-column grid with the
 * image in column 1, the header beside it, and the picker plus buy row full
 * width underneath — so the button stays reachable on a short screen.
 */


/* The sheet slides up from the bottom edge it is attached to; the desktop
   dialog fades in place. Both respect reduced motion below. */

@keyframes dfsPeptideProductGridSheetIn { from { transform: translateY( 100% ); } to { transform: translateY( 0 ); } }

@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid__qa-dialog[open] { animation: none; }
	.dfs-peptide-product-grid__qa-close { transition: none; }
}

.dfs-peptide-product-grid__qa-btn:focus-visible,
.dfs-peptide-product-grid__qa-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ==========================================================================
   MODE 3 — QUICK ADD (tessafay.com, harvest pg-mode3-quickadd)
   ========================================================================== */

/* i208: three columns and a 24px/12px gap. Written HERE and not in the preset
   pack, because columns_desktop is selectors-driven and a render-time merge of
   one of those never reaches the page — measured at 4 columns when it was. */
/*
 * Mode 3's card button, MEASURED off tessafay.com. 36x54 collapsed at every
 * rung 1024-2560 — it does not scale with the card — so the width here is the
 * icon (20) plus its two 8px flanks, and the label opens beyond it.
 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] {
	--dfs-peptide-product-grid-qa-btn-min: 36px;
	--dfs-peptide-product-grid-qa-btn-h: 54px;
	/* MEASURED: content box 32 inside 2px borders = 36. The icon WRAPPER is
	   that whole 32 (elements i389/i390); the drawn bag is smaller and sized
	   separately, which is why these are two variables and not one. */
	--dfs-peptide-product-grid-qa-btn-icon: 32px;
	--dfs-peptide-product-grid-qa-btn-glyph: 19px;
	--dfs-peptide-product-grid-qa-pad: 0;
	/* MEASURED 4.8px, the same gap the reference puts between the bag and the
	   label on the dialog CTA. Reaching 36 -> 111.5 for "Choose". */
	/* MEASURED: the reference's add-to-cart-text has gap 0 and its children sum
	   exactly — icon 33 + label 74.4 = 107.4. There is no gutter; the label's
	   own side bearing is the whole separation. */
	/* 0 — MEASURED. The 32px icon wrapper around a ~20px glyph IS the gap. */
	--dfs-peptide-product-grid-qa-btn-gap: 0px;
	/* MEASURED: the reference leaves 41px between the last glyph and the pill
	   edge; ours left 26px. Ink is 84px on BOTH sides, so this is trailing
	   room, not type. 97.1 + 11.2 = 108.3, x1.03 hover scale = 111.5. */
	--dfs-peptide-product-grid-qa-btn-tail: 11.2px;
	/* READ FROM SOURCE: scale 1.03 hovered, .99 active. */
	--dfs-peptide-product-grid-qa-btn-scale: 1.03;
	--dfs-peptide-product-grid-qa-btn-scale-active: 0.99;
	/* MEASURED on 5 of 5 cards: inset right 12.8, bottom 12.8 of a 605x758
	   card. Anchored right so the label opens LEFTWARD, as the reference does. */
	--dfs-peptide-product-grid-qa-btn-left: auto;
	--dfs-peptide-product-grid-qa-btn-right: 12.8px;
	--dfs-peptide-product-grid-qa-btn-shift: 0;
	--dfs-peptide-product-grid-qa-offset: 12.8px;
	--dfs-peptide-product-grid-qa-radius: 50px;
	--dfs-peptide-product-grid-qa-fill: #f0ddd0;
	--dfs-peptide-product-grid-qa-ink: rgba( 26, 26, 24, 0.8 );
	--dfs-peptide-product-grid-qa-fill-hover: #1a1a18;
	--dfs-peptide-product-grid-qa-ink-hover: #fff2e6;
	--dfs-peptide-product-grid-qa-btn-bd: 2px;
	--dfs-peptide-product-grid-qa-btn-bd-ink: rgba( 0, 0, 0, 0.15 );
	--dfs-peptide-product-grid-qa-btn-ring: inset 0 0 0 1px rgb( 26, 26, 24 );
	--dfs-peptide-product-grid-qa-btn-blur: blur( 20px ) saturate( 1.8 );
	--dfs-peptide-product-grid-qa-btn-family: "DFS PG Lora", Lora, Georgia, serif;
	--dfs-peptide-product-grid-qa-btn-size: 12px;
	--dfs-peptide-product-grid-qa-btn-lh: 19.2px;
	--dfs-peptide-product-grid-qa-btn-weight: 500;
	--dfs-peptide-product-grid-qa-btn-ls: 1.68px;
	--dfs-peptide-product-grid-qa-btn-case: uppercase;
	/* the chooser is part of mode 3, so it wears mode 3's face — measured
	   Lora, serif on every text node of the reference dialog */
	--dfs-peptide-product-grid-qa-family: "DFS PG Lora", Lora, Georgia, serif;
}

/*
 * ⬥ THE MODE SETS THE VARIABLES, NOT grid-template-columns.
 *
 * It used to write `grid-template-columns: repeat( 3, 1fr )` here directly. That
 * rule is (0,3,0) and the base grid rule that reads the variables is (0,1,0), so
 * the mode won — and so the `columns_desktop` control was a DEAD OVERRIDE on
 * every mode3 instance. MEASURED on the tessafay product page: the "You May Also
 * Like" grid rendered `594.656px 594.672px 594.672px` — three columns at 595 —
 * against the reference's FOUR at 451 (x40/503/966/1429 at the 1920 rung, and
 * four again at 1440 and 1024). Four cards therefore wrapped 3 + 1 and each card
 * was 32% too wide. Brad, seeing the two pages side by side: "not really sure how
 * anyone with eyes would think ours matches theirs".
 *
 * Setting the VARIABLES instead keeps the mode's own default identical — 3 across
 * / 2 down, which is what the Product Grid widget's own reference measures — while
 * letting Elementor's per-instance CSS (~(0,4,0), emitted later) win when someone
 * actually sets the control. That is the house rule stated exactly: a property a
 * control writes is owned by that control, and the two must agree rather than
 * fight.
 *
 * A var() FALLBACK WOULD NOT HAVE WORKED, and this is why: the base stylesheet
 * already declares `--dfs-peptide-product-grid-cols-desktop: 4` and `--dfs-peptide-product-grid-cols: 2` on `.dfs-peptide-product-grid`
 * (lines 28-29), so `repeat( var( --dfs-peptide-product-grid-cols-desktop, 3 ), 1fr )` resolves to
 * 4 always and the fallback is unreachable — it would have silently moved every
 * existing mode3 grid from 3 columns to 4.
 */
/*
 * ⬥ THE MODE KEEPS WRITING grid-template-columns DIRECTLY, AND THAT IS
 *   DELIBERATE — the alternative was tried in 5.1.2 and REGRESSED.
 *
 * The attempt: have the mode set `--dfs-peptide-product-grid-cols-desktop: 3` instead, so the
 * `columns_desktop` control (which the mode's (0,3,0) rule otherwise
 * out-specifies) could win when someone sets it. It was reasoned to be safe
 * because the mode's own default stayed 3.
 *
 * IT WAS NOT SAFE, and the regression test caught it: page 5108's mode3 grid
 * went from 3 columns to FOUR at 447.25px. The cause is @decision D95 in its
 * purest form — `columns_desktop` has a REGISTERED DEFAULT of 4, Elementor
 * emits registered defaults into post-<id>.css for every saved widget, so every
 * mode3 instance already carries "4" and there is no way to tell "the user chose
 * 4" from "nobody touched it". Handing the control the win therefore hands it to
 * a value nobody chose.
 *
 * So the mode's geometry stays here, where it cannot be silently overridden, and
 * a page that genuinely needs a different count says so in ITS OWN instance CSS
 * at higher specificity — which is what the tessafay product template does for
 * its four-across "You May Also Like". One page moved; nothing else did.
 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__grid {
	gap: 24px 12px;
	grid-template-columns: repeat( 3, 1fr );
}
@media screen and ( max-width: 767px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__grid {
		gap: 12px;                                    /* 390: gap 12 */
		grid-template-columns: repeat( 2, 1fr );      /* 390: 173px x 2 */
	}
}

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__image-container {
	aspect-ratio: 4 / 5;                                                  /* i229 */
	overflow: hidden;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__card img { object-fit: cover; }

/* MEASURED i211: transform 0.35s cubic-bezier(0.25,0.1,0.25,1) */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__card {
	transition: transform 0.35s cubic-bezier( 0.25, 0.1, 0.25, 1 );
}
/* MEASURED i231: transform 0.7s on the same curve */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__card img {
	transition: transform 0.7s cubic-bezier( 0.25, 0.1, 0.25, 1 );
}

/* MEASURED i220/i224: opacity 0 at rest, 0.125s ease-in-out, white, 60x44 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__nav {
	width: 60px;
	height: 44px;
	color: #ffffff;
	transition: opacity 0.125s ease-in-out, background-color 0.125s ease-in-out;
}

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__title {
	font-family: "DFS PG Lora", Lora, Georgia, serif;                                    /* i211 base */
	font-size: 15px;
	line-height: 25.5px;
	font-weight: 400;
	text-transform: none;
	color: var( --dfs-peptide-product-grid-title-ink );   /* rgba(26,26,24,0.8) via preset_css while title_color is untouched */
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__title a { color: inherit; }

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__price {
	font-family: Archivo, "Helvetica Neue", sans-serif;                   /* i303 */
	font-size: 11px;
	line-height: 12.1px;
	font-weight: 500;
	text-transform: none;
	color: var( --dfs-peptide-product-grid-price-ink );   /* rgba(26,26,24,0.8) via preset_css while price_color is untouched */
}

@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__card,
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__card img { transition: none; }
}


/* ---- the chooser's own controls ------------------------------------------ */
/* Every size, colour and face below is MEASURED off the reference dialog and
   exposed as a custom property so a Style control owns it. */
.dfs-peptide-product-grid__qa-data { display: none; }

.dfs-peptide-product-grid__qa-title {
	font-size: var( --dfs-peptide-product-grid-qa-title-size, 24px );
	line-height: var( --dfs-peptide-product-grid-qa-title-lh, 28.8px );
	font-weight: var( --dfs-peptide-product-grid-qa-title-weight, 600 );
	color: var( --dfs-peptide-product-grid-qa-title-ink, inherit );
	padding-right: 46px;          /* clears the close button */
}
.dfs-peptide-product-grid__qa-price {
	font-size: var( --dfs-peptide-product-grid-qa-price-size, 15px );
	line-height: var( --dfs-peptide-product-grid-qa-price-lh, 24px );
	font-weight: var( --dfs-peptide-product-grid-qa-price-weight, 400 );
	color: var( --dfs-peptide-product-grid-qa-price-ink, inherit );
	padding-top: 4px;
}

/* ---- size / colour swatches ---- */
.dfs-peptide-product-grid__qa-opt {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( clamp( 44px, var( --dfs-peptide-product-grid-qa-swatch-min ), 100% ), 1fr ) );
	gap: var( --dfs-peptide-product-grid-qa-swatch-gap );
	margin: 0;
	padding-block: 20px;
	border: 0;
	min-inline-size: 0;           /* a fieldset will not shrink without this */
}
.dfs-peptide-product-grid__qa-legend {
	grid-column: 1 / -1;
	padding: 0;
	font-size: var( --dfs-peptide-product-grid-qa-legend-size, 15px );
	line-height: var( --dfs-peptide-product-grid-qa-legend-lh, 25.5px );
	font-weight: var( --dfs-peptide-product-grid-qa-legend-weight, 400 );
	color: var( --dfs-peptide-product-grid-qa-legend-ink, inherit );
}
.dfs-peptide-product-grid__qa-swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --dfs-peptide-product-grid-qa-swatch-pad );
	/* MEASURED 48.75 on the reference. Its own padding + line-height account
	   for only 43.5, so the remaining 5.25px is UNEXPLAINED — this matches the
	   measured outcome rather than a mechanism I have not established. */
	min-height: var( --dfs-peptide-product-grid-qa-swatch-h, 48.75px );
	border: var( --dfs-peptide-product-grid-qa-swatch-bd ) solid var( --dfs-peptide-product-grid-qa-swatch-bd-ink, #1a1a18 );
	border-radius: var( --dfs-peptide-product-grid-qa-swatch-radius );
	background: var( --dfs-peptide-product-grid-qa-swatch-bg, transparent );
	cursor: pointer;
	overflow: clip;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* The radio is the control; it is hidden from sight, never from the keyboard
   or the accessibility tree. display:none would remove it from both. */
.dfs-peptide-product-grid__qa-swatch-input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.dfs-peptide-product-grid__qa-swatch-pill {
	position: absolute;
	inset: 0;
	/* explicit, not currentColor: measured rgb(26,26,24) solid on the
	   reference, where currentColor here is rgba(26,26,24,0.8) */
	background: var( --dfs-peptide-product-grid-qa-swatch-bg-on, #1a1a18 );
	opacity: 0;
	transition: opacity 0.2s ease;
}
.dfs-peptide-product-grid__qa-swatch-text {
	position: relative;
	z-index: 1;
	font-size: var( --dfs-peptide-product-grid-qa-swatch-size, 15px );
	line-height: var( --dfs-peptide-product-grid-qa-swatch-lh, 25.5px );
	color: var( --dfs-peptide-product-grid-qa-swatch-ink, inherit );
}
.dfs-peptide-product-grid__qa-swatch:hover {
	border-color: var( --dfs-peptide-product-grid-qa-swatch-bd-ink-hover, var( --dfs-peptide-product-grid-qa-swatch-bd-ink, currentColor ) );
	background: var( --dfs-peptide-product-grid-qa-swatch-bg-hover, transparent );
}
.dfs-peptide-product-grid__qa-swatch:hover .dfs-peptide-product-grid__qa-swatch-text { color: var( --dfs-peptide-product-grid-qa-swatch-ink-hover, inherit ); }
.dfs-peptide-product-grid__qa-swatch:has( .dfs-peptide-product-grid__qa-swatch-input:checked ) .dfs-peptide-product-grid__qa-swatch-pill { opacity: 1; }
/* inherit here resolved to the SAME dark as the pill — dark on dark. The
   reference's selected label is the panel cream. */
.dfs-peptide-product-grid__qa-swatch:has( .dfs-peptide-product-grid__qa-swatch-input:checked ) .dfs-peptide-product-grid__qa-swatch-text { color: var( --dfs-peptide-product-grid-qa-swatch-ink-on, #fff2e6 ); }
.dfs-peptide-product-grid__qa-swatch:has( .dfs-peptide-product-grid__qa-swatch-input:focus-visible ) { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- buy row: stepper + CTA, one line ---- */
.dfs-peptide-product-grid__qa-buy {
	display: flex;
	align-items: stretch;
	gap: var( --dfs-peptide-product-grid-qa-buy-gap );
}
.dfs-peptide-product-grid__qa-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 var( --dfs-peptide-product-grid-qa-qty-w );
	height: var( --dfs-peptide-product-grid-qa-qty-h );
	border: var( --dfs-peptide-product-grid-qa-qty-bd ) solid var( --dfs-peptide-product-grid-qa-qty-bd-ink, rgba( 26, 26, 24, 0.15 ) );
	border-radius: var( --dfs-peptide-product-grid-qa-qty-radius );
	background: var( --dfs-peptide-product-grid-qa-qty-bg, transparent );
	color: var( --dfs-peptide-product-grid-qa-qty-ink, inherit );
}
.dfs-peptide-product-grid__qa-qtybtn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var( --dfs-peptide-product-grid-qa-qty-btn );
	align-self: stretch;
	font: inherit;
	font-size: var( --dfs-peptide-product-grid-qa-qty-glyph, 16px );
	line-height: 1;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.dfs-peptide-product-grid__qa-qtybtn:hover {
	background: var( --dfs-peptide-product-grid-qa-qty-btn-bg-hover, rgba( 0, 0, 0, 0.05 ) );
	color: var( --dfs-peptide-product-grid-qa-qty-btn-ink-hover, inherit );
}
.dfs-peptide-product-grid__qa-qtyinput {
	width: 100%;
	min-width: 0;
	font: inherit;
	font-size: var( --dfs-peptide-product-grid-qa-qty-size, 15px );
	text-align: center;
	background: none;
	border: none;
	color: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}
/* the browser spinners are furniture we already drew ourselves */
.dfs-peptide-product-grid__qa-qtyinput::-webkit-outer-spin-button,
.dfs-peptide-product-grid__qa-qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/*
 * (0,3,1). MEASURED: something on the page puts 8px 16px on this input, which
 * leaves 4px of content box inside the 36px field and clips the digit — a 15px
 * Lora "1" is 5.47px wide. Two attempts to identify the rule through
 * document.styleSheets came back unusable, so the winner is NOT MEASURED and
 * is not named here. What is measured is the outcome: at this specificity the
 * computed padding is 0 and the number is legible. The variable is still what
 * the Style control writes, so the value stays owned by the control.
 */
.dfs-peptide-product-grid .dfs-peptide-product-grid__qa-qty input.dfs-peptide-product-grid__qa-qtyinput {
	padding: var( --dfs-peptide-product-grid-qa-qty-pad, 0px );
	height: auto;
	min-height: 0;
	line-height: normal;
}

.dfs-peptide-product-grid__qa-add {
	flex: 1 1 auto;
	min-width: 0;
	height: var( --dfs-peptide-product-grid-qa-add-h );
	padding: var( --dfs-peptide-product-grid-qa-add-pad );
	font-family: inherit;
	font-size: var( --dfs-peptide-product-grid-qa-add-size, 12px );
	line-height: var( --dfs-peptide-product-grid-qa-add-lh, 19.2px );
	font-weight: var( --dfs-peptide-product-grid-qa-add-weight, 500 );
	letter-spacing: var( --dfs-peptide-product-grid-qa-add-ls, 1.68px );
	text-transform: var( --dfs-peptide-product-grid-qa-add-case, uppercase );
	color: var( --dfs-peptide-product-grid-qa-add-ink, #FFF2E6 );
	background: var( --dfs-peptide-product-grid-qa-add-bg, #2C2C28 );
	border: none;
	border-radius: var( --dfs-peptide-product-grid-qa-add-radius );
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.35s cubic-bezier( 0.25, 0.1, 0.25, 1 ),
		color 0.35s cubic-bezier( 0.25, 0.1, 0.25, 1 );
}
.dfs-peptide-product-grid__qa-add:hover:not( [disabled] ) {
	color: var( --dfs-peptide-product-grid-qa-add-ink-hover, #FFF2E6 );
	background: var( --dfs-peptide-product-grid-qa-add-bg-hover, #1A1A18 );
}
.dfs-peptide-product-grid__qa-add-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --dfs-peptide-product-grid-qa-add-gap );
}
.dfs-peptide-product-grid__qa-add-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var( --dfs-peptide-product-grid-qa-add-icon );
	height: var( --dfs-peptide-product-grid-qa-add-icon );
}
.dfs-peptide-product-grid__qa-add-icon svg { width: 100%; height: 100%; display: block; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-qa-icon="off"] .dfs-peptide-product-grid__qa-add-icon { display: none; }
.dfs-peptide-product-grid__qa-add[disabled] { opacity: var( --dfs-peptide-product-grid-qa-add-disabled, 0.45 ); cursor: not-allowed; }

/* ==========================================================================
   MOBILE LAST. These blocks were previously declared mid-sheet and lost every
   property that a later rule also set — a media query carries no extra
   specificity, so ordering is the only thing deciding the winner. Anything
   added below this line will override them in turn; keep new base rules ABOVE.
   ========================================================================== */
@media screen and ( max-width: 749px ) {
	.dfs-peptide-product-grid__qa-dialog {
		position: fixed;
		margin: auto 0 0;
		width: 100%;
		max-width: 100%;
		height: fit-content;
		max-height: 92vh;
		border-radius: var( --dfs-peptide-product-grid-qa-dialog-radius-mobile, 12px ) var( --dfs-peptide-product-grid-qa-dialog-radius-mobile, 12px ) 0 0;
	}
	.dfs-peptide-product-grid__qa-body {
		grid-template-columns: repeat( 4, 1fr );
		grid-auto-rows: auto;
		gap: 12px;
		padding: var( --dfs-peptide-product-grid-qa-dialog-pad-t, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) var( --dfs-peptide-product-grid-qa-dialog-pad-r, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) var( --dfs-peptide-product-grid-qa-dialog-pad-b, var( --dfs-peptide-product-grid-qa-dialog-pad ) ) var( --dfs-peptide-product-grid-qa-dialog-pad-l, var( --dfs-peptide-product-grid-qa-dialog-pad ) );
		overflow-y: auto;
		height: auto;
	}
	.dfs-peptide-product-grid__qa-media {
		grid-column: 1;
		grid-row: 1;
		overflow: visible;
		height: auto;
	}
	/* one frame only on the sheet: the gallery is a scroller on desktop, and a
	   column of five images inside a bottom sheet would bury the buy row. */
	.dfs-peptide-product-grid__qa-media img:not( :first-child ) { display: none; }
	/*
	 * display:contents dissolves the details column so its children become
	 * grid items of the sheet itself. Without it grid-column on .dfs-peptide-product-grid__qa-buy
	 * is inert — it is not a grid item — and the CTA gets whatever is left of a
	 * 236px column after a 142px stepper, which measured 86.3px and rendered
	 * as "CHOOSE SI".
	 */
	.dfs-peptide-product-grid__qa-details { display: contents; }
	.dfs-peptide-product-grid__qa-media {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}
	.dfs-peptide-product-grid__qa-title {
		grid-column: 2 / -1;
		grid-row: 1;
		align-self: end;
		padding: 0 32px 0 0;
		font-size: var( --dfs-peptide-product-grid-qa-title-size-mobile, 18px );
		line-height: var( --dfs-peptide-product-grid-qa-title-lh-mobile, 23px );
	}
	.dfs-peptide-product-grid__qa-price {
		grid-column: 2 / -1;
		grid-row: 2;
		align-self: start;
		padding: 0;
	}
	.dfs-peptide-product-grid__qa-details .dfs-peptide-product-grid__qa-opt,
	.dfs-peptide-product-grid__qa-opt {
		grid-column: 1 / -1;
		padding: 4px 0 0;
	}
	/* (0,2,0) to match the desktop rule it overrides — a single class loses to
	   the two-class .dfs-peptide-product-grid__qa-details .dfs-peptide-product-grid__qa-buy no matter how late it
	   is declared, and that rule's 28px side padding squeezed the CTA to 113px. */
	.dfs-peptide-product-grid__qa-details .dfs-peptide-product-grid__qa-buy,
	.dfs-peptide-product-grid__qa-buy {
		grid-column: 1 / -1;
		position: static;
		padding: 0;
		background: none;
	}
	.dfs-peptide-product-grid__qa-close { --dfs-peptide-product-grid-qa-close-inset: 8px; }
}

@media screen and ( max-width: 749px ) {
	.dfs-peptide-product-grid__qa-dialog[open] { animation: dfsPeptideProductGridSheetIn 0.32s cubic-bezier( 0.25, 0.1, 0.25, 1 ) both; }
}

/* ==========================================================================
   MODE 3 — the quick-add button is HIDDEN until the card is hovered
   ==========================================================================
   MEASURED, both sides, 1280, scrolled to the related section:
     THEIRS  0 PAINTED buttons — yet "Add Choose" is in the card's text, so the
             controls exist in the DOM and are revealed on hover
     OURS    the bag icon painted at rest, 32x32

   `quick_add_reveal` already resolved to "hover" and `data-dfs-peptide-product-grid-qa-reveal`
   said so — but that gate only covers the LABEL (`--dfs-peptide-product-grid-qa-btn-label-op: 0`),
   not the button itself. So the icon sat on every card at rest against a
   reference that shows nothing until you point at it.

   Removing the button was the wrong fix and is reverted: theirs HAS one. It just
   is not visible yet.

   `visibility` as well as opacity, so the invisible button cannot be clicked —
   a transparent control that still takes the pointer is worse than a visible
   one, because nothing explains what was hit. */

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"][data-dfs-peptide-product-grid-qa-reveal="hover"] .dfs-peptide-product-grid__qa-btn {
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s ) var( --dfs-peptide-product-grid-qa-btn-ease, cubic-bezier( 0.25, 0.1, 0.25, 1 ) ),
		visibility var( --dfs-peptide-product-grid-qa-btn-speed, 0.35s );
}

.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"][data-dfs-peptide-product-grid-qa-reveal="hover"] .dfs-peptide-product-grid__card:hover .dfs-peptide-product-grid__qa-btn,
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"][data-dfs-peptide-product-grid-qa-reveal="hover"] .dfs-peptide-product-grid__card:focus-within .dfs-peptide-product-grid__qa-btn {
	opacity: 1;
	visibility: visible;
}

/* D521 (5.124.0) — square controls on a product page. Moved here from
   dfs-motion-product-page.css, where a Product Page rule was styling THIS
   widget. body.single-product is the page that stylesheet loaded on; the
   rendered result there is unchanged (MEASURED 0px before and after on
   /product/athena-gown/), and every other page keeps the theme radius. */
body.single-product .dfs-peptide-product-grid button,
body.single-product .dfs-peptide-product-grid input,
body.single-product .dfs-peptide-product-grid select {
	border-radius: 0;
}

/* ==========================================================================
   MODE 4 ADDITIONS (5.154.0) — category tags · discount badge · COA chip +
   popup · card buttons · was price. Every element here exists only when its
   switch is on, so none of these rules can reach a mode 1-3 page at its
   defaults. Values MEASURED on aminoclub.com (harvest pg-mode4-amino,
   1920x940 + 390x844) or READ FROM SOURCE (their ALL.css / class strings).
   ========================================================================== */

/* Defaults travel as var() FALLBACKS, never as declarations on .dfs-peptide-product-grid:
   a declaration there would add inherited custom properties to every
   mode 1-3 grid; a fallback exists only where an element reads it. */

/* ---- corner placement, shared by tag / discount / chip ------------------ */
.dfs-peptide-product-grid__pos--top-left     { top: var( --dfs-peptide-product-grid-badge-inset, 8px ); left: var( --dfs-peptide-product-grid-badge-inset, 8px ); }
.dfs-peptide-product-grid__pos--top-right    { top: var( --dfs-peptide-product-grid-badge-inset, 8px ); right: var( --dfs-peptide-product-grid-badge-inset, 8px ); }
.dfs-peptide-product-grid__pos--bottom-left  { bottom: var( --dfs-peptide-product-grid-badge-inset, 8px ); left: var( --dfs-peptide-product-grid-badge-inset, 8px ); }
.dfs-peptide-product-grid__pos--bottom-right { bottom: var( --dfs-peptide-product-grid-badge-inset, 8px ); right: var( --dfs-peptide-product-grid-badge-inset, 8px ); }

/* ---- category tag (i190) ---------------------------------------------- */
.dfs-peptide-product-grid__tag {
	position: absolute;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var( --dfs-peptide-product-grid-tag-pad, 4px 10px );
	border-radius: var( --dfs-peptide-product-grid-tag-radius, 9999px );
	background: var( --dfs-peptide-product-grid-tag-fill, #cbe5fc );
	color: var( --dfs-peptide-product-grid-tag-ink, #131315 );
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	/* ring-1 ring-black/5 + shadow-sm, READ FROM SOURCE */
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ), 0 1px 2px 0 rgba( 0, 0, 0, 0.05 );
	pointer-events: none;
	white-space: nowrap;
}
.dfs-peptide-product-grid__tag-icon { display: inline-flex; width: var( --dfs-peptide-product-grid-tag-icon, 12px ); height: var( --dfs-peptide-product-grid-tag-icon, 12px ); }
.dfs-peptide-product-grid__tag-icon svg,
.dfs-peptide-product-grid__tag-icon i { width: 100%; height: 100%; font-size: var( --dfs-peptide-product-grid-tag-icon, 12px ); }
.dfs-peptide-product-grid__tag-icon svg { fill: none; }
.dfs-peptide-product-grid__tag-icon svg[class*="e-font-icon-svg"] { fill: currentColor; }
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid__tag { font-size: 10px; line-height: 15px; }   /* 390: text-[10px], 65.8x23 */
}

/* ---- discount badge (i6) ---------------------------------------------- */
.dfs-peptide-product-grid__off {
	position: absolute;
	z-index: 10;
	padding: var( --dfs-peptide-product-grid-off-pad, 3px 8px );
	border-radius: var( --dfs-peptide-product-grid-off-radius, 9999px );
	background: var( --dfs-peptide-product-grid-off-fill, #571224 );
	color: var( --dfs-peptide-product-grid-off-ink, #f2d9a4 );
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 0.06em;                 /* 0.6px at 10px */
	pointer-events: none;
	white-space: nowrap;
}

/* ---- COA chip (i8-i12) ------------------------------------------------ */
.dfs-peptide-product-grid__coa {
	position: absolute;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	margin: 0;
	padding: 0 4px 0 8px;
	border: 1px solid var( --dfs-peptide-product-grid-coa-line, #d5d5d5 );
	border-radius: 9999px;
	background: var( --dfs-peptide-product-grid-coa-fill, #ffffff );
	color: var( --dfs-peptide-product-grid-coa-ink, #131315 );
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	/* shadow-md at rest, shadow-lg on hover, active:scale-95; transition-all 150ms */
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 );
	transition: border-color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ), box-shadow 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ), transform 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid__coa:hover,
.dfs-peptide-product-grid__coa:focus-visible {
	border-color: var( --dfs-peptide-product-grid-coa-line-hover, #131315 );
	box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.1 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.1 );
	background: var( --dfs-peptide-product-grid-coa-fill, #ffffff );
	color: var( --dfs-peptide-product-grid-coa-ink, #131315 );
}
.dfs-peptide-product-grid__coa:active { transform: scale( 0.95 ); }
/* With the popup off the chip is an <a>, and Elementor's `.elementor a{box-shadow:none}`
   (0,1,1, READ from staging2 frontend.min.css) would strip its shadow. Its
   text-decoration:none agrees with ours, so only the shadow needs the extra weight. */
.dfs-peptide-product-grid a.dfs-peptide-product-grid__coa { box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 ); }
.dfs-peptide-product-grid a.dfs-peptide-product-grid__coa:hover,
.dfs-peptide-product-grid a.dfs-peptide-product-grid__coa:focus-visible { box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.1 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.1 ); }
.dfs-peptide-product-grid__coa svg { width: 12px; height: 12px; flex: none; }
.dfs-peptide-product-grid__coa-check { color: var( --dfs-peptide-product-grid-coa-check, #16a34a ); }
.dfs-peptide-product-grid__coa-chev  { color: var( --dfs-peptide-product-grid-coa-chev, #9ca3af ); }
.dfs-peptide-product-grid__coa-val   { font-weight: 600; }
.dfs-peptide-product-grid__coa-link  { color: var( --dfs-peptide-product-grid-coa-link, #6b7280 ); text-decoration: underline; text-underline-offset: 2px; }

/* ---- card buttons (i20-i24, i319) ------------------------------------ */
.dfs-peptide-product-grid__acts {
	display: flex;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
}
.dfs-peptide-product-grid__act {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var( --dfs-peptide-product-grid-act-h, 40px );
	margin: 0;
	/* No inline padding on the flex item: the reference pads an INNER button
	   (px-3 inside a flex-1 wrapper), so only Details' 2px border enters the
	   flex split. MEASURED 1920: ref 146 | 144, ours with 0 12px 134 | 156. */
	padding: 0;
	border-radius: var( --dfs-peptide-product-grid-act-radius, 9999px );
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ), background-color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ), border-color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid__act--details {
	gap: normal;
	padding: 0;
	border: 1px solid var( --dfs-peptide-product-grid-details-line, rgba( 0, 0, 0, 0.15 ) );
	background: transparent;
	color: var( --dfs-peptide-product-grid-details-ink, rgba( 0, 0, 0, 0.7 ) );
}
.dfs-peptide-product-grid__act--details:hover,
.dfs-peptide-product-grid__act--details:focus-visible {
	border-color: var( --dfs-peptide-product-grid-details-line-hover, #000000 );
	color: var( --dfs-peptide-product-grid-details-ink-hover, #000000 );
	background: transparent;
}
.dfs-peptide-product-grid__act--add {
	border: 0;
	background: var( --dfs-peptide-product-grid-add-fill, #131315 );
	color: var( --dfs-peptide-product-grid-add-ink, #ffffff );
}
.dfs-peptide-product-grid__act--add:hover,
.dfs-peptide-product-grid__act--add:focus-visible {
	background: var( --dfs-peptide-product-grid-add-fill-hover, #1f2937 );
	color: var( --dfs-peptide-product-grid-add-ink, #ffffff );
}
.dfs-peptide-product-grid__act--add.is-added,
.dfs-peptide-product-grid__act--add.is-added:hover { background: var( --dfs-peptide-product-grid-added-fill, #166534 ); }
.dfs-peptide-product-grid__act--oos,
.dfs-peptide-product-grid__act--oos:hover,
.dfs-peptide-product-grid__act--oos:disabled {
	border: 0;
	background: var( --dfs-peptide-product-grid-oos-fill, rgba( 0, 0, 0, 0.06 ) );
	color: var( --dfs-peptide-product-grid-oos-ink, rgba( 0, 0, 0, 0.35 ) );
	cursor: not-allowed;
	opacity: 1;
}
.dfs-peptide-product-grid__act svg { width: 14px; height: 14px; flex: none; }
/* px-3 lives on the reference's INNER button (i23 / i319), inside a flex-1 wrapper, so it
   narrows the label without entering the Details | Add flex split. Ours carries it on the
   label span for the same reason. SEEN at 1024 (run 2 shots): the sold-out label wraps to
   two lines in the 94px pill; MEASURED at 390: the plus icon flex-shrinks to 10.9x14. */
.dfs-peptide-product-grid__act-rest,
.dfs-peptide-product-grid__act-done { box-sizing: border-box; min-width: 0; max-width: 100%; padding-inline: 12px; }
.dfs-peptide-product-grid__act-rest svg { flex: 0 1 auto; min-width: 0; }
/* The sold-out button sits in a flex-1 slot exactly like the reference's (div.flex-1.min-w-0 >
   button.px-3, i22 / i319), so its own 12px padding never enters the flex split and the label
   stays ON the button. A label span was tried first: it left the button text-less, and the
   audit then paired the reference's text-less Add button with it (run 3 preview). */
.dfs-peptide-product-grid__act-slot { display: block; flex: 1 1 0; min-width: 0; }   /* i22: display block (run 3 audit) */
.dfs-peptide-product-grid__act-slot > .dfs-peptide-product-grid__act--oos { width: 100%; box-sizing: border-box; padding: 0 12px; white-space: normal; text-align: center; }
.dfs-peptide-product-grid__act-rest,
.dfs-peptide-product-grid__act-done { display: inline-flex; align-items: center; gap: 6px; }
.dfs-peptide-product-grid__act-busy,
.dfs-peptide-product-grid__act-done { display: none; }
.dfs-peptide-product-grid__act--add.is-busy .dfs-peptide-product-grid__act-rest,
.dfs-peptide-product-grid__act--add.is-added .dfs-peptide-product-grid__act-rest { display: none; }
.dfs-peptide-product-grid__act--add.is-busy .dfs-peptide-product-grid__act-busy { display: inline-flex; }
.dfs-peptide-product-grid__act--add.is-added .dfs-peptide-product-grid__act-done { display: inline-flex; }
.dfs-peptide-product-grid__act-busy svg { animation: dfs-peptide-product-grid-spin 1s linear infinite; }   /* animate-spin */
@keyframes dfs-peptide-product-grid-spin { to { transform: rotate( 360deg ); } }
/* Woo appends "View cart" after an AJAX add; the reference has none. */
.dfs-peptide-product-grid__acts .added_to_cart { display: none; }
.dfs-peptide-product-grid__act:focus-visible,
.dfs-peptide-product-grid__coa:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid__act { height: var( --dfs-peptide-product-grid-act-h, 36px ); font-size: 12px; line-height: 16px; }   /* 390: h-9 text-xs */
	.dfs-peptide-product-grid__act--add,
	.dfs-peptide-product-grid__act--oos { line-height: 12px; }   /* leading-none: MEASURED i23 / i319 at 390 = 12px */
	/* SEEN on the reference 390x844 shot (run 1): "Out of / stock" wraps to two lines inside
	   the 65.5x36 pill; ours held one line and ran past the pill. */
	.dfs-peptide-product-grid__act--oos { white-space: normal; text-align: center; }
}
@media ( prefers-reduced-motion: reduce ) and ( dfs-reduced-motion-honoured ) {
	.dfs-peptide-product-grid__act-busy svg { animation-duration: 3s; }
}

/* ---- was price -------------------------------------------------------- */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-was="on"] .dfs-peptide-product-grid__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-was="on"] .dfs-peptide-product-grid__price del {
	display: inline;
	order: -1;
	color: var( --dfs-peptide-product-grid-price-old-ink, #9ca3af );
	font-family: "DFS PG Anek Telugu", "Anek Telugu", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
	text-decoration: line-through;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-was="on"] .dfs-peptide-product-grid__price del .amount { color: inherit; }

/* ---- COA popup (stepStates.step0, 65 elements) ----------------------- */
dialog.dfs-peptide-product-grid__coad {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --dfs-peptide-product-grid-coad-ink, #131315 );
	overflow: hidden;
}
dialog.dfs-peptide-product-grid__coad::backdrop { background: transparent; }
dialog.dfs-peptide-product-grid__coad:not( [open] ) { display: none; }
.dfs-peptide-product-grid__coad-scrim {
	position: fixed;
	inset: 0;
	background: var( --dfs-peptide-product-grid-coad-scrim, rgba( 0, 0, 0, 0.3 ) );
	-webkit-backdrop-filter: blur( 4px );   /* backdrop-blur-sm */
	backdrop-filter: blur( 4px );
}
.dfs-peptide-product-grid__coad-frame {
	position: fixed;
	inset: 0;
	overflow-y: auto;
	display: flex;
	align-items: flex-end;          /* items-end: a bottom sheet below 640 */
	justify-content: center;
	min-height: 100%;
}
.dfs-peptide-product-grid__coad-panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 24px 24px max( 24px, env( safe-area-inset-bottom ) );
	border: 1px solid #e8e8e8;
	border-radius: 24px 24px 0 0;   /* rounded-t-[24px] */
	background: var( --dfs-peptide-product-grid-coad-fill, #ffffff );
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.1 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.1 );
	text-align: left;
	font-family: "DFS PG Anek Telugu", "Anek Telugu", system-ui, sans-serif;
	font-size: 16px;
	line-height: 24px;
}
@media ( min-width: 640px ) {
	.dfs-peptide-product-grid__coad-frame { align-items: center; padding: 16px; box-sizing: border-box; }
	.dfs-peptide-product-grid__coad-panel { max-width: 400px; padding-bottom: 24px; border-radius: var( --dfs-peptide-product-grid-coad-radius, 20px ); }
	.dfs-peptide-product-grid__coad-grip { display: none; }
}
.dfs-peptide-product-grid__coad-grip {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 40px;
	height: 4px;
	margin-left: -20px;
	border-radius: 9999px;
	background: #e0e0e0;
}
.dfs-peptide-product-grid__coad-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: #555555;
	cursor: pointer;
	transition: background-color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid__coad-close:hover,
.dfs-peptide-product-grid__coad-close:focus-visible { background: #f8f8f8; color: #555555; }
.dfs-peptide-product-grid__coad-close svg { width: 16px; height: 16px; }
.dfs-peptide-product-grid__coad-title {
	margin: 0;
	padding: 0 32px 0 0;
	color: var( --dfs-peptide-product-grid-coad-ink, #131315 );
	font-family: "DFS PG Anek Telugu", "Anek Telugu", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
}
.dfs-peptide-product-grid__coad-batch {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 9999px;
	color: #555555;
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 12px;
	line-height: 16px;
}
.dfs-peptide-product-grid__coad-batch[hidden],
.dfs-peptide-product-grid__coad [hidden] { display: none; }
.dfs-peptide-product-grid__coad-body { margin-top: 16px; }
.dfs-peptide-product-grid__coad-stat {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 16px;
	border-radius: 16px;
	background: var( --dfs-peptide-product-grid-coad-stat, #f9f9f9 );
}
.dfs-peptide-product-grid__coad-big {
	color: var( --dfs-peptide-product-grid-coad-ink, #131315 );
	font-size: 32px;
	font-weight: 700;
	line-height: 32px;
	margin: 0;
}
.dfs-peptide-product-grid__coad-cap { margin: 6px 0 0; color: #6b7280; font-size: 12px; line-height: 16px; }
.dfs-peptide-product-grid__coad-lotbox { text-align: right; }
.dfs-peptide-product-grid__coad-lot { margin: 0; color: var( --dfs-peptide-product-grid-coad-ink, #131315 ); font-size: 12px; font-weight: 600; line-height: 16px; }
.dfs-peptide-product-grid__coad-tested { margin: 2px 0 0; color: #6b7280; font-size: 11px; line-height: 16.5px; }
.dfs-peptide-product-grid__coad-lab {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	color: #6b7280;
	font-size: 12px;
	line-height: 16px;
}
.dfs-peptide-product-grid__coad-lab svg { width: 14px; height: 14px; flex: none; color: #16a34a; }
.dfs-peptide-product-grid__coad-rows {
	margin-top: 12px;
	overflow: hidden;
	border: 1px solid #ececec;
	border-radius: 16px;
}
.dfs-peptide-product-grid__coad-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 14px;
}
.dfs-peptide-product-grid__coad-row + .dfs-peptide-product-grid__coad-row { border-top: 1px solid #f0f0f0; }   /* divide-y divide-[#f0f0f0] */
.dfs-peptide-product-grid__coad-name { color: #4b5563; font-size: 12px; line-height: 16px; }
.dfs-peptide-product-grid__coad-res { display: flex; align-items: center; gap: 8px; }
.dfs-peptide-product-grid__coad-val { color: var( --dfs-peptide-product-grid-coad-ink, #131315 ); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.dfs-peptide-product-grid__coad-pill {
	padding: 2px 6px;
	border-radius: 4px;
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 13.5px;
	text-transform: uppercase;
}
.dfs-peptide-product-grid__coad-pill--pass { background: var( --dfs-peptide-product-grid-coad-pass-fill, #f0fdf4 ); color: var( --dfs-peptide-product-grid-coad-pass-ink, #15803d ); }
.dfs-peptide-product-grid__coad-pill--note { background: var( --dfs-peptide-product-grid-coad-note-fill, #f5f5f5 ); color: var( --dfs-peptide-product-grid-coad-note-ink, #6b7280 ); }
.dfs-peptide-product-grid__coad-pill--fail { background: var( --dfs-peptide-product-grid-coad-fail-fill, #fef2f2 ); color: var( --dfs-peptide-product-grid-coad-fail-ink, #b91c1c ); }
.dfs-peptide-product-grid__coad-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin-top: 16px;
	border: 1px solid var( --dfs-peptide-product-grid-coad-btn-ink, #131315 );
	border-radius: 9999px;
	background: transparent;
	color: var( --dfs-peptide-product-grid-coad-btn-ink, #131315 );
	font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ), background-color 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid__coad-btn:hover,
.dfs-peptide-product-grid__coad-btn:focus-visible { background: var( --dfs-peptide-product-grid-coad-btn-fill-hover, #131315 ); color: var( --dfs-peptide-product-grid-coad-btn-ink-hover, #ffffff ); }
.dfs-peptide-product-grid__coad-btn svg { width: 14px; height: 14px; flex: none; }
.dfs-peptide-product-grid__coad-foot {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid #e8e8e8;
	color: #999999;
	font-size: 11px;
	line-height: 16.5px;
	text-align: center;
}

/* ==========================================================================
   MODE 4 — PEPTIDE STORE (aminoclub.com/us/store, harvest pg-mode4-amino)
   Properties a Mode 1 control ALSO writes (colours, type, radius, padding,
   aspect) are NOT here: preset_css() emits them per instance, guarded, so a
   hand-set control wins. What is here has no control, or is geometry (the
   Mode 3 decision above: a registered columns default cannot be told from
   a choice, so the mode's own count lives in the stylesheet).
   ========================================================================== */

/* grid-cols-2 md:grid-cols-3 lg:grid-cols-4 · gap-3 sm:gap-4 lg:gap-6 */
/* minmax(0,1fr), never 1fr: 1fr keeps an auto minimum, so the nowrap subtitle
   widened one column. MEASURED 390 on 5.154.0: 250.5 | 171.2 vs ref 165 | 165
   (Tailwind grid-cols-2 = repeat(2,minmax(0,1fr))). */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 12px; }
@media ( min-width: 640px )  { .dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid { gap: 16px; } }
@media ( min-width: 768px )  { .dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
@media ( min-width: 1024px ) { .dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 24px; } }

/* THE CARD: one column, body on white, buttons pinned to the foot so a
   one-line and a two-line subtitle still line the buttons up (mt-auto). */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card:hover {
	box-shadow: 0 14px 32px -14px rgba( 19, 19, 21, 0.22 );   /* hover:shadow-[0_14px_32px_-14px_rgba(19,19,21,0.22)] */
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card > :not( .dfs-peptide-product-grid__image-container ) {
	margin-inline: 16px;
	order: 5;
}
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card > :not( .dfs-peptide-product-grid__image-container ) { margin-inline: 12px; }
}
/* The Text Panel (card_body_panel, ON in the Mode 4 pack): the panel is padded
   itself, so its children carry no inline margin and it carries none either. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card > .dfs-peptide-product-grid__body { margin-inline: 0; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__image-container {
	order: 0;
	flex: none;
	background: #f5f5f5;                                      /* bg-neutral-100 behind the image */
	/* body border-t border-black/[0.05]: the reference draws it BELOW the 4:5
	   image, so it is painted into a 1px margin rather than taken out of the
	   image. MEASURED 5.154.0: as a border, image 409 / card 575 vs 410 / 576. */
	margin-bottom: 1px;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.05 );
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card img {
	object-position: 80% center;                              /* object-[80%_center] */
	transition: transform 0.3s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) );
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card:hover img { transform: scale( 1.05 ); }   /* group-hover:scale-105 */
/* (0,4,0) + later in source, so these beat the `> :not(...)` order:5 above.
   MEASURED 5.154.0 first deploy: at (0,3,0) every child read order 5 and
   the price rendered above the subtitle. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__title   { order: 1; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__excerpt { order: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__price   { order: 3; margin-top: 6px; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__acts    { order: 10; }
/* flow-root, READ off the reference: the h3 (i15) and subtitle p (i16) both compute
   display flow-root (Tailwind line-clamp). One line of text either way; flow-root is
   the measured value. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__excerpt { display: flow-root; }
/* Title / excerpt / price type (i15/i16/i17). Here, not in the render-time <style>: at (0,3,0)
   Elementor's (0,4,0) Typography rule wins on every device, editor included. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__title   { font-family: "DFS PG Anek Telugu", "Anek Telugu", system-ui, sans-serif; font-size: 18px; line-height: 28px; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__excerpt { font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price   { font-family: "DFS PG Poppins", Poppins, system-ui, sans-serif; font-size: 20px; line-height: 28px; }
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__title   { font-size: 15px; line-height: 18.75px; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__excerpt { font-size: 11px; line-height: 16.5px; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price   { font-size: 17px; line-height: 21.25px; }
}
/* the price row is flex + items-baseline + gap-1.5 on BOTH axes (i17) */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price { row-gap: 6px; }

/* ---- the Text Panel (i13: p-3 lg:p-4 flex flex-col flex-grow bg-white
   border-t border-black/[0.05] rounded-b) ---------------------------------- */
/* (0,4,0), later in source: MEASURED on the first deploy at (0,2,0) the mode 4
   image rule (0,3,0) won and the band kept its grey, shadow and 1px margin. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode] .dfs-peptide-product-grid__card--panel > .dfs-peptide-product-grid__image-container {
	/* the card's own ground shows behind the image; the hairline is the panel's */
	background: transparent;
	margin-bottom: 0;
	box-shadow: none;
}
.dfs-peptide-product-grid__body {
	order: 5;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	padding: var( --dfs-peptide-product-grid-body-pad, 16px );
	background: var( --dfs-peptide-product-grid-body-fill, #ffffff );
	border-top: 1px solid var( --dfs-peptide-product-grid-body-line, rgba( 0, 0, 0, 0.05 ) );
	border-radius: 0 0 var( --dfs-peptide-product-grid-card-radius, 0px ) var( --dfs-peptide-product-grid-card-radius, 0px );
}
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid__body { padding: var( --dfs-peptide-product-grid-body-pad-sm, 12px ); }
}
/* The link fills the title box like the reference's line-clamp-1 h3 (296x28 @1920). It
   INHERITS the div's overflow / text-overflow, so the ellipsis and the Truncate switch
   behave exactly as they did with an inline link. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__title a { display: flow-root; overflow: inherit; text-overflow: inherit; }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__title a { transition: opacity 0.15s var( --dfs-peptide-product-grid-tw-ease, cubic-bezier( 0.4, 0, 0.2, 1 ) ); }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__title a:hover { opacity: 0.8; }   /* hover:opacity-80 */

@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card,
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card img { transition: none; }
}

/* ==========================================================================
   5.155.0 — FOUR CARD FEATURES, ANY MODE: Hover Video · Size Strip · Colour
   Swatches · Tag Badge, plus the Mobile Rail. Every rule keys on an element
   or root attribute that only exists while its switch is on, so Modes 1-4
   with the features off compute exactly what they did.
   Defaults MEASURED on keleighteller.com (harvest pg-mode5-kt) and READ FROM
   SOURCE (shop-bestsellers.css, linked-options config).
   ========================================================================== */

.dfs-peptide-product-grid {
	--dfs-peptide-product-grid-sizes-ink: #032224;   --dfs-peptide-product-grid-sizes-fill: rgba(255,255,255,0.95);
	--dfs-peptide-product-grid-sizes-gap: 16px;      --dfs-peptide-product-grid-sizes-pad: 6px 8px 6px 8px;
	--dfs-peptide-product-grid-sizes-out: 0.4;
	--dfs-peptide-product-grid-cs-size: 18px;        --dfs-peptide-product-grid-cs-gap: 6px;        --dfs-peptide-product-grid-cs-above: 0px;
	--dfs-peptide-product-grid-cs-ring: rgba(0,0,0,0); --dfs-peptide-product-grid-cs-ring-hover: #5f6772; --dfs-peptide-product-grid-cs-ring-active: #000000;
	--dfs-peptide-product-grid-cs-more-ink: #151515;
	--dfs-peptide-product-grid-cs-tip-ink: #ffffff;  --dfs-peptide-product-grid-cs-tip-fill: #151515;
	--dfs-peptide-product-grid-tagb-ink: #032224;    --dfs-peptide-product-grid-tagb-fill: #f6f1dc;
	--dfs-peptide-product-grid-tagb-pad: 8px 16px 8px 16px; --dfs-peptide-product-grid-tagb-w: 81px;
	--dfs-peptide-product-grid-tagb-top: 12px;       --dfs-peptide-product-grid-tagb-left: 0px;
	--dfs-peptide-product-grid-rail-w: 262px;        --dfs-peptide-product-grid-rail-h: 367px;      --dfs-peptide-product-grid-rail-gap: 16px;
	--dfs-peptide-product-grid-hvid-fade: 0.4s;      --dfs-peptide-product-grid-hvid-touch-fade: 3s;
}

/* ---- Hover Video (i6/i7: absolute, full cover, z 1) ---------------------- */
.dfs-peptide-product-grid__hvid {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;     /* the image link underneath still takes the click */
	display: none;
}
.dfs-peptide-product-grid__hvid-video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media ( min-width: 768px ) {
	/* CUT — the reference's display swap on :hover, no tween */
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid="cut"] .dfs-peptide-product-grid__item:hover .dfs-peptide-product-grid__hvid { display: block; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid="cut"] .dfs-peptide-product-grid__item:hover .has-hvid .dfs-peptide-product-grid__slider { visibility: hidden; }
	/* FADE — opt-in */
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid="fade"] .dfs-peptide-product-grid__hvid { display: block; opacity: 0; transition: opacity var( --dfs-peptide-product-grid-hvid-fade ) ease; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid="fade"] .dfs-peptide-product-grid__item:hover .dfs-peptide-product-grid__hvid { opacity: 1; }
}
@media ( max-width: 767px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid-touch="centre"] .dfs-peptide-product-grid__hvid { display: block; opacity: 0; transition: opacity var( --dfs-peptide-product-grid-hvid-touch-fade ); }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid-touch="centre"] .dfs-peptide-product-grid__item.is-active .dfs-peptide-product-grid__hvid { opacity: 1; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid-touch="centre"] .has-hvid .dfs-peptide-product-grid__slider { transition: opacity var( --dfs-peptide-product-grid-hvid-touch-fade ); }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-hvid-touch="centre"] .dfs-peptide-product-grid__item.is-active .has-hvid .dfs-peptide-product-grid__slider { opacity: 0; }
}
@media ( prefers-reduced-motion: reduce ) and ( dfs-reduced-motion-honoured ) {
	.dfs-peptide-product-grid__hvid,
	.dfs-peptide-product-grid .has-hvid .dfs-peptide-product-grid__slider { transition: none !important; }
}

/* ---- Tag Badge (i3: 81x28 at top 12 / left 0, Lato 600 12/12 upper) ------ */
.dfs-peptide-product-grid__tagb {
	position: absolute;
	top: var( --dfs-peptide-product-grid-tagb-top );
	left: var( --dfs-peptide-product-grid-tagb-left );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: var( --dfs-peptide-product-grid-tagb-w );
	height: 28px;
	padding: var( --dfs-peptide-product-grid-tagb-pad );
	background: var( --dfs-peptide-product-grid-tagb-fill );
	color: var( --dfs-peptide-product-grid-tagb-ink );
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

/* ---- Size Strip (i10: bottom of the image, 0.3s slide + fade) ------------ */
.dfs-peptide-product-grid__sizes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;   /* i10 computes start */
	gap: var( --dfs-peptide-product-grid-sizes-gap );
	padding: var( --dfs-peptide-product-grid-sizes-pad );
	background: var( --dfs-peptide-product-grid-sizes-fill );
	opacity: 0;
	transform: translateY( 100% );
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-sizes="always"] .dfs-peptide-product-grid__sizes,
.dfs-peptide-product-grid .dfs-peptide-product-grid__item:hover .dfs-peptide-product-grid__sizes,
.dfs-peptide-product-grid .dfs-peptide-product-grid__item:focus-within .dfs-peptide-product-grid__sizes { opacity: 1; transform: translateY( 0 ); }
@media ( max-width: 767px ) {
	.dfs-peptide-product-grid .dfs-peptide-product-grid__sizes { transform: translateY( 10px ); }
	.dfs-peptide-product-grid .dfs-peptide-product-grid__item.is-active .dfs-peptide-product-grid__sizes,
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-sizes="always"] .dfs-peptide-product-grid__sizes { opacity: 1; transform: translateY( 0 ); }
	.dfs-peptide-product-grid .dfs-peptide-product-grid__item.is-active .dfs-peptide-product-grid__size:first-child::after { border-bottom-color: var( --dfs-peptide-product-grid-sizes-ink ); }
}
/* qualified: Elementor's `.elementor a` is (0,1,1) */
.dfs-peptide-product-grid .dfs-peptide-product-grid__size {
	display: block;
	color: var( --dfs-peptide-product-grid-sizes-ink );
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.dfs-peptide-product-grid__size::after { content: ""; display: block; border-bottom: 1px solid transparent; }
.dfs-peptide-product-grid a.dfs-peptide-product-grid__size:hover::after,
.dfs-peptide-product-grid a.dfs-peptide-product-grid__size:focus-visible::after { border-bottom-color: var( --dfs-peptide-product-grid-sizes-ink ); }
.dfs-peptide-product-grid__size--out { opacity: var( --dfs-peptide-product-grid-sizes-out ); cursor: not-allowed; text-decoration: line-through; }
.dfs-peptide-product-grid__size:focus-visible { outline: 1px solid var( --dfs-peptide-product-grid-sizes-ink ); outline-offset: 2px; }

/* ---- Title & Price row (i17: flex, space-between, gap 8, padding-top 8) --- */
.dfs-peptide-product-grid__info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	padding-top: var( --dfs-peptide-product-grid-title-gap );
}
.dfs-peptide-product-grid__info > .dfs-peptide-product-grid__title { flex: 1; min-width: 0; margin-top: 0; }
.dfs-peptide-product-grid__info > .dfs-peptide-product-grid__price { margin-top: 0; text-align: right; }
.dfs-peptide-product-grid__info > :not( .dfs-peptide-product-grid__title ):not( .dfs-peptide-product-grid__price ) { flex-basis: 100%; }

/* ---- Colour Swatches (i47-i65: 18px dots at a 24px pitch, 1px ring) ------ */
/* i23 is a plain flex row (gap and align-items normal); the 6px pitch sits on the items */
.dfs-peptide-product-grid__colours {
	display: flex;
	flex-wrap: wrap;
	margin-top: var( --dfs-peptide-product-grid-cs-above );
	min-height: var( --dfs-peptide-product-grid-cs-size );
	line-height: 1;
	width: fit-content;   /* i23: the row is as wide as its swatches (138 at 1920) */
}
.dfs-peptide-product-grid__colours > * + * { margin-left: var( --dfs-peptide-product-grid-cs-gap ); }
.dfs-peptide-product-grid .dfs-peptide-product-grid__cs {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	width: var( --dfs-peptide-product-grid-cs-size );
	height: var( --dfs-peptide-product-grid-cs-size );
	text-decoration: none;
}
/* THE REFERENCE'S ANATOMY: an 18x18 slot (i50) holding a 20x20 ring box that
   overflows it (i51: flex, centred, 1px border) holding the 18x18 print (i52) */
.dfs-peptide-product-grid__cs-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: content-box;
	width: var( --dfs-peptide-product-grid-cs-size );
	height: var( --dfs-peptide-product-grid-cs-size );
	border: 1px solid var( --dfs-peptide-product-grid-cs-ring );
	border-radius: 50%;
	transition: border-color 0.3s;
}
.dfs-peptide-product-grid__cs-dot {
	display: block;
	width: var( --dfs-peptide-product-grid-cs-size );
	height: var( --dfs-peptide-product-grid-cs-size );
	border-radius: 50%;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.dfs-peptide-product-grid__cs:hover .dfs-peptide-product-grid__cs-ring,
.dfs-peptide-product-grid__cs:focus-visible .dfs-peptide-product-grid__cs-ring { border-color: var( --dfs-peptide-product-grid-cs-ring-hover ); }
.dfs-peptide-product-grid__cs.is-current .dfs-peptide-product-grid__cs-ring { border-color: var( --dfs-peptide-product-grid-cs-ring-active ); }
.dfs-peptide-product-grid__cs:focus-visible { outline: none; }
.dfs-peptide-product-grid .dfs-peptide-product-grid__cs-more {
	display: block;
	align-self: center;
	margin-left: calc( var( --dfs-peptide-product-grid-cs-gap ) + 4px );   /* i65: 6px pitch + 4px margin after the last dot */
	align-items: center;   /* i65 computes it; nothing inside to align, kept for the 1:1 audit */
	color: var( --dfs-peptide-product-grid-cs-more-ink );
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	text-decoration: none;
}
.dfs-peptide-product-grid .dfs-peptide-product-grid__cs-more:hover { text-decoration: underline; }
.dfs-peptide-product-grid .dfs-peptide-product-grid__cs-more--m { display: none; }
@media ( max-width: 767px ) {
	.dfs-peptide-product-grid .dfs-peptide-product-grid__cs--xm { display: none; }
	.dfs-peptide-product-grid .dfs-peptide-product-grid__cs-more--d { display: none; }
	.dfs-peptide-product-grid .dfs-peptide-product-grid__cs-more--m { display: block; }
}
@media ( min-width: 768px ) {
	.dfs-peptide-product-grid .dfs-peptide-product-grid__cs--xd { display: none; }
}
/* the colour's name, above the dot */
.dfs-peptide-product-grid__cs[data-tip]::after {
	content: attr( data-tip );
	position: absolute;
	left: 50%;
	bottom: calc( 100% + 6px );
	transform: translate( -50%, 4px );
	padding: 4px 8px;
	border-radius: 2px;
	background: var( --dfs-peptide-product-grid-cs-tip-fill );
	color: var( --dfs-peptide-product-grid-cs-tip-ink );
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 3;
}
.dfs-peptide-product-grid__cs[data-tip]:hover::after,
.dfs-peptide-product-grid__cs[data-tip]:focus-visible::after { opacity: 1; transform: translate( -50%, 0 ); }

/* ---- Mobile Rail (390 i0-i2: flex row, 16 gap, 262-wide cards) ----------- */
@media ( max-width: 767px ) {
	/* the attribute is doubled so the rail's gap beats any mode's own grid gap (Mode 5's 2-up 15px) */
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-rail="on"][data-dfs-peptide-product-grid-rail] .dfs-peptide-product-grid__grid {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		gap: var( --dfs-peptide-product-grid-rail-gap );
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-rail="on"] .dfs-peptide-product-grid__grid::-webkit-scrollbar { display: none; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-rail="on"] .dfs-peptide-product-grid__item { flex: 0 0 var( --dfs-peptide-product-grid-rail-w ); width: var( --dfs-peptide-product-grid-rail-w ); scroll-snap-align: center; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-rail="on"] .dfs-peptide-product-grid__image-container { height: var( --dfs-peptide-product-grid-rail-h ); aspect-ratio: auto; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-rail="on"] .dfs-peptide-product-grid__card img { aspect-ratio: auto; }
}

/* ==========================================================================
   MODE 5 — VIDEO HOVER (keleighteller.com "Shop Summer Pajamas").
   The look only; the behaviour is the features above. MEASURED 1920x940 /
   390x844 unless marked READ FROM SOURCE.
   ========================================================================== */
/* i0: 5 x 357.2 with 16px gaps; 3 columns at <=1250 (source); rail below 768 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 15px; }
@media ( min-width: 768px )  { .dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 16px; } }
@media ( min-width: 1251px ) { .dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); } }

/* card: image, the title | price row, the swatches — stacked (i1 block) */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__card { display: block; height: auto; }   /* i1 is a block */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__price { gap: 4px; }   /* i20 computes gap 4 */

/* i2: the image ground */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__image-container { background: #f5f5f5; }

/* i18/i19: h3 14px/1.4 (16px >=1600) letter-spacing .02em, link 16px/19.2 w500 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title {
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 14px;
	line-height: 21.6px;   /* i18: the h3's strut (theme face "Span") makes each line 21.6 at 14px — 43.2 for two */
	letter-spacing: 0.02em;
}
/* the link INHERITS family / weight / transform from the title, so the Title
   typography control (which targets .dfs-peptide-product-grid__title) reaches the visible text;
   only its size is relative: 16px on a 14px title, 1em once the title is 16 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title a {
	font-size: 1.142857em;
	line-height: 1.2;
}
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title a:hover { text-decoration: underline; }
/* i20/i21: price right-aligned, 14px (16px >=1600), line-height 16.8 */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__price {
	font-family: "DFS PG Lato", Lato, sans-serif;
	font-size: 14px;
	line-height: 16.8px;   /* i20: fixed at 14 x 1.2 — the 16px amount at >=1600 keeps it */
	text-align: right;
}
@media ( min-width: 1600px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title,
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__price { font-size: 16px; }
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title { line-height: 1.4; }   /* 22.4 at 16px, as i18 */
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"] .dfs-peptide-product-grid__title a { font-size: 1em; }
}
/* 390: the image sits at its own ratio inside the 367px frame (i4/i5 348.9) */
@media ( max-width: 767px ) {
	.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode5"][data-dfs-peptide-product-grid-rail="on"] .dfs-peptide-product-grid__card img { height: auto; }
}

/* ==========================================================================
   MODE 6 - PEPTIDE GRID (Figma frame 8-Peptides 162:2805, 1440x800)
   Scoped to the --frame root class, so Modes 1-5 compute what they did.
   Cards are 314 wide: header "Sorted By" Bebas Neue, pills Poppins 500 14/20,
   category tag #CBE5FC, discount #571224 / #F2D9A4, pack tag / Add + #121826,
   COA chip white, ADD TO CART #143245. Values the existing controls also
   write come from the controls (preset_css yields); what is here is geometry
   and type the frame fixes. Ground #FFFFFF belongs to the Section.
   ========================================================================== */
.dfs-peptide-product-grid picture[class="dfs-avif"] > source { display: none; }

/* 4 per row on desktop (314 cards, gap 19), 2 on the phone, rows repeat */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid {
	grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols, 1 ), minmax( 0, 1fr ) );
	gap: var( --dfs-peptide-product-grid-gap, 12px );
}
@media ( min-width: 1024px ) {
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__grid {
		grid-template-columns: repeat( var( --dfs-peptide-product-grid-cols-desktop, 4 ), minmax( 0, 1fr ) );
		gap: var( --dfs-peptide-product-grid-gap-desktop, 19px );
	}
}

/* header: "Sorted By: Best Sellers", Bebas Neue 400 44/79, ls -1.3, #BABABA + accent #143245 */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__browse {
	justify-content: flex-start;
	column-gap: var( --dfs-peptide-product-grid-fhead-gap, 48px );
	margin-top: var( --dfs-peptide-product-grid-fhead-top, 9px );
	margin-bottom: var( --dfs-peptide-product-grid-fhead-below, 0px );
}
/* pills: 28 apart (phone 8), lifted 10 above their centred slot without moving the cards */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__filters {
	gap: var( --dfs-peptide-product-grid-chip-gap, 28px );
	position: relative;
	top: calc( -1 * var( --dfs-peptide-product-grid-chip-lift, 10px ) );
}
/* the heading's type (Bebas Neue 400 44/79, ls -1.3) is its Typography control's default */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__fhead {
	margin: 0 0 0 var( --dfs-peptide-product-grid-fhead-indent, 8px );
	position: relative;
	top: calc( -1 * var( --dfs-peptide-product-grid-chip-lift, 10px ) );
	color: var( --dfs-peptide-product-grid-fhead-ink, #BABABA );
	white-space: nowrap;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__fhead-accent { color: var( --dfs-peptide-product-grid-fhead-accent, #143245 ); }

/* pills: Poppins 500 14/20, radius 6, 40 tall; active #143245 / #FFFFFF, inactive #143245 outline */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	/* Poppins 500 14/20 capitalize: the Filter Labels typography control's defaults */
}

/* card: image 6,6,0,0 then the #F9F9F9 body 0,0,6,6 */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__card { position: relative; background: transparent; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__image-container {
	margin-bottom: 0;
	box-shadow: none;
	border-radius: var( --dfs-peptide-product-grid-card-radius, 6px ) var( --dfs-peptide-product-grid-card-radius, 6px ) 0 0;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__body {
	gap: 0;
	padding: 23px 18px 20px;
	background: var( --dfs-peptide-product-grid-card-bg, #F9F9F9 );
	border-top: 0;
	border-radius: 0 0 var( --dfs-peptide-product-grid-card-radius, 6px ) var( --dfs-peptide-product-grid-card-radius, 6px );
}

/* visual order inside the body: the title | price row (with the pack label under it), excerpt, ADD TO CART pinned to the foot */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__info { order: 1; margin-bottom: 20px; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info:has( ~ .dfs-peptide-product-grid__excerpt ) { margin-bottom: 0; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__atc { order: 5; margin-top: auto; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__body > .dfs-peptide-product-grid__excerpt { margin-bottom: var( --dfs-peptide-product-grid-excerpt-below, 13px ); }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info { padding-top: 0; align-items: flex-end; column-gap: 12px; row-gap: 0; }
/* a name never breaks inside a word (BPC-157, TB-500): each word is one unit */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__word { display: inline-block; white-space: nowrap; }
/* the pack label and anything else in the row take their own line, flush under the name row */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info > .dfs-peptide-product-grid__plabel { align-self: flex-start; }
/* phone: when name and price do not fit one row, the price block drops under the name */
@media ( max-width: 1023px ) {
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info > .dfs-peptide-product-grid__title { flex: 1 1 auto; }
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info > .dfs-peptide-product-grid__price { margin-left: var( --dfs-peptide-product-grid-price-ml, auto ); }
}
/* Price Position (responsive control): beside = row, below = every card stacks title then price (phone default) */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info {
	flex-direction: var( --dfs-peptide-product-grid-info-dir, row );
	flex-wrap: var( --dfs-peptide-product-grid-info-wrap, wrap );
	align-items: var( --dfs-peptide-product-grid-info-align, flex-end );
}
/* the title wraps to its full name (no ellipsis); the price is one column, never wrapped */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__title, .dfs-peptide-product-grid__title a ) { white-space: normal; overflow: visible; text-overflow: clip; display: block; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info > .dfs-peptide-product-grid__price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: var( --dfs-peptide-product-grid-price-align, flex-end );
	white-space: nowrap;
	text-align: var( --dfs-peptide-product-grid-price-text, right );
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price del { display: block; order: -1; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price ins { display: block; text-decoration: none; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__title   { order: 1; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__price   { order: 2; margin-top: 0; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__plabel  { order: 3; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__excerpt { order: 4; white-space: normal; margin-top: var( --dfs-peptide-product-grid-excerpt-gap, 0 ); }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__card, .dfs-peptide-product-grid__body ) > .dfs-peptide-product-grid__acts    { order: 5; margin-top: auto; padding-top: 14px; }

/* type: title Anek Telugu 600 18/28, price Poppins 700 20/28, old price Anek Telugu 400 11/11, excerpt Anek Telugu 400 14/20.
   Title / price / old price / ADD TO CART family, size and line height are printed by preset_css while their
   Typography control is untouched; the pack label's type is its control's default. */
.dfs-peptide-product-grid.dfs-peptide-product-grid--frame.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price del {
	color: var( --dfs-peptide-product-grid-price-old-ink, #C2183A );
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__plabel {
	margin: 0;
	color: var( --dfs-peptide-product-grid-plabel-ink, #131315 );
}
.dfs-peptide-product-grid.dfs-peptide-product-grid--frame.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__excerpt {
	color: var( --dfs-peptide-product-grid-excerpt-ink, #6B7280 );
}

/* ADD TO CART: Poppins 500 14/20, #FFFFFF on #143245, radius 6, 46 tall */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	/* weight 400: preset_css prints it while the Add To Cart Typography weight is untouched */
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc:hover,
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc:focus-visible {
	transform: translateY( calc( -1 * var( --dfs-peptide-product-grid-atc-lift, 3px ) ) );
	box-shadow: 0 8px 16px var( --dfs-peptide-product-grid-atc-shadow, rgba( 20, 50, 69, 0.28 ) );
}
@media ( prefers-reduced-motion: reduce ) {
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc { transition: background-color 0.25s ease, color 0.25s ease; }
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc:hover,
	.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__atc:focus-visible { transform: none; }
}

/* tag top-left 15 / 9; discount top-right 11 / 9 */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__tag {
	left: var( --dfs-peptide-product-grid-ctag-x, 15px );
	box-sizing: border-box;
	height: 24px;
	padding-block: 0;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__off {
	right: var( --dfs-peptide-product-grid-off-x, 11px );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 45px;
	height: 24px;
}

/* bottom-left row: pack tag / Add + (62x24, #121826) then the COA chip 12 to its right */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__chiprow {
	position: absolute;
	z-index: 10;
	left: var( --dfs-peptide-product-grid-ptag-x, 15px );
	bottom: var( --dfs-peptide-product-grid-ptag-y, 19px );
	display: flex;
	align-items: center;
	gap: var( --dfs-peptide-product-grid-ptag-gap, 12px );
	right: 8px;                  /* never closer than 8px to the image edge */
	flex-wrap: wrap;             /* a row too wide for the image drops the COA chip under the pack tag */
	row-gap: 6px;
	align-items: flex-start;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__tag-icon { margin-right: 2px; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__coa { max-width: 100%; white-space: nowrap; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__ptag, .dfs-peptide-product-grid__padd ) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 62px;
	height: 24px;
	margin: 0;
	padding: var( --dfs-peptide-product-grid-ptag-pad, 0 10px );
	border: 0;
	border-radius: var( --dfs-peptide-product-grid-ptag-radius, 6px );
	background: var( --dfs-peptide-product-grid-ptag-fill, #121826 );
	color: var( --dfs-peptide-product-grid-ptag-ink, #FFFFFF );
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] :is( .dfs-peptide-product-grid__padd:hover, .dfs-peptide-product-grid__padd:focus-visible ) {
	background: var( --dfs-peptide-product-grid-ptag-fill-hover, #143245 );
	color: var( --dfs-peptide-product-grid-ptag-ink-hover, #FFFFFF );
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__padd { cursor: pointer; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__pdata { display: none; }

/* COA chip: white, 24 tall, purity Poppins 600 11/16.5 #131315, "View COA" Poppins 400 7/16.5 #6B7280 */
.dfs-peptide-product-grid.dfs-peptide-product-grid--frame.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__coa {
	position: static;
	box-sizing: border-box;
	height: 24px;
	/* Figma pill 108 px: padding 0 2 0 5.6 comes from the coa_frame_padding control default; the gap from coa_gap */
	gap: var( --dfs-peptide-product-grid-coa-gap, 2.9px );
	background: var( --dfs-peptide-product-grid-coa-fill, #FFFFFF );
	color: var( --dfs-peptide-product-grid-coa-ink, #131315 );
}
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__coa-val  { font-size: var( --dfs-peptide-product-grid-coa-val-size, 11px ); font-weight: var( --dfs-peptide-product-grid-coa-val-weight, 600 ); line-height: 16.5px; }
.dfs-peptide-product-grid.dfs-peptide-product-grid--frame.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__coa-link { font-size: var( --dfs-peptide-product-grid-coa-link-size, 7px ); font-weight: var( --dfs-peptide-product-grid-coa-link-weight, 400 ); line-height: 16.5px; color: var( --dfs-peptide-product-grid-coa-link, #6B7280 ); }

/* the pack popup: a native dialog, scrim + centred panel, GSAP fades it in */
.dfs-peptide-product-grid__pop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --dfs-peptide-product-grid-pop-ink, #131315 );
	font-family: Poppins, "DFS PG Poppins", system-ui, sans-serif;
}
.dfs-peptide-product-grid__pop:not( [open] ) { display: none; }
.dfs-peptide-product-grid__pop::backdrop { background: transparent; }
.dfs-peptide-product-grid__pop-scrim {
	position: absolute;
	inset: 0;
	background: var( --dfs-peptide-product-grid-pop-scrim, rgba( 18, 24, 38, 0.55 ) );
}
.dfs-peptide-product-grid__pop-frame {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	pointer-events: none;
}
.dfs-peptide-product-grid__pop-panel {
	position: relative;
	box-sizing: border-box;
	width: min( 100%, var( --dfs-peptide-product-grid-pop-width, 360px ) );
	max-height: 100%;
	overflow: auto;
	padding: 28px 24px 24px;
	border-radius: var( --dfs-peptide-product-grid-pop-radius, 6px );
	background: var( --dfs-peptide-product-grid-pop-fill, #FFFFFF );
	color: var( --dfs-peptide-product-grid-pop-ink, #131315 );
	pointer-events: auto;
}
.dfs-peptide-product-grid__pop-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --dfs-peptide-product-grid-pop-close-ink, inherit );
	font-size: var( --dfs-peptide-product-grid-pop-close-size, 22px );
	line-height: 32px;
	cursor: pointer;
}
.dfs-peptide-product-grid__pop-title {
	margin: 0 0 16px;
	color: var( --dfs-peptide-product-grid-pop-title-ink, #143245 );
}
.dfs-peptide-product-grid__pop-choices { display: grid; gap: var( --dfs-peptide-product-grid-pop-gap, 8px ); }
.dfs-peptide-product-grid__pop-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: var( --dfs-peptide-product-grid-pop-choice-pad, 8px 14px );
	opacity: var( --dfs-peptide-product-grid-pop-choice-opacity, 1 );
	border: 0;
	border-radius: var( --dfs-peptide-product-grid-pop-choice-radius, 6px );
	background: var( --dfs-peptide-product-grid-pop-choice-fill, #F9F9F9 );
	color: var( --dfs-peptide-product-grid-pop-choice-ink, #131315 );
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.dfs-peptide-product-grid__pop-choice:hover,
.dfs-peptide-product-grid__pop-choice:focus-visible {
	background: var( --dfs-peptide-product-grid-pop-choice-fill-hover, #143245 );
	color: var( --dfs-peptide-product-grid-pop-choice-ink-hover, #FFFFFF );
}
.dfs-peptide-product-grid .dfs-peptide-product-grid__pop-choice[disabled] { opacity: 0.6; cursor: default; }
.dfs-peptide-product-grid__pop-price { display: inline-flex; align-items: center; column-gap: var( --dfs-peptide-product-grid-pop-save-gap, 12px ); }
.dfs-peptide-product-grid__pop-save { line-height: 20px; font-size: 12px; font-weight: 700; color: var( --dfs-peptide-product-grid-pop-save-ink, #C2183A ); }
.dfs-peptide-product-grid__pop-choice:hover .dfs-peptide-product-grid__pop-save,
.dfs-peptide-product-grid__pop-choice:focus-visible .dfs-peptide-product-grid__pop-save { color: inherit; }
.dfs-peptide-product-grid__pop-status { min-height: 20px; margin: var( --dfs-peptide-product-grid-pop-status-gap, 12px ) 0 0; font-size: var( --dfs-peptide-product-grid-pop-status-size, 13px ); font-weight: var( --dfs-peptide-product-grid-pop-status-weight, inherit ); line-height: 20px; }
@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-peptide-product-grid__pop-choice, .dfs-peptide-product-grid--frame .dfs-peptide-product-grid__padd { transition: none; }
}

/* HORIZONTAL SCROLL (Grid > Horizontal Scroll, per device). Cards keep the per-row width; the rest
   continue in ONE row off the right side, which bleeds to the viewport edge (--dfs-peptide-product-grid-bleed,
   measured in JS). Percent track widths resolve against the content box, so the padding that replaces the
   negative margin does not widen the cards.
   The row layout itself is written by the Horizontal Scroll control (Elementor selectors, per device);
   only the per-row count and gap it reads are chosen here. */
.dfs-peptide-product-grid__grid {
	--dfs-peptide-product-grid-hs-n: var( --dfs-peptide-product-grid-cols-desktop, 4 );
	--dfs-peptide-product-grid-hs-g: var( --dfs-peptide-product-grid-gap-desktop, 19px );
}
@media ( max-width: 767px ) {
	.dfs-peptide-product-grid__grid {
		--dfs-peptide-product-grid-hs-n: var( --dfs-peptide-product-grid-cols, 1 );
		--dfs-peptide-product-grid-hs-g: var( --dfs-peptide-product-grid-gap, 12px );
	}
}
.dfs-peptide-product-grid__grid::-webkit-scrollbar { display: none; }
.dfs-peptide-product-grid__grid.is-scrollrow > * { min-width: 0; }
.dfs-peptide-product-grid__grid.is-scrollrow { cursor: grab; }
.dfs-peptide-product-grid__grid.is-dragging { cursor: grabbing; user-select: none; }
.dfs-peptide-product-grid__grid.is-dragging img { pointer-events: none; }

/* Mode 3 (Quick Add): the arrow colour and the card radius reach the page. White stays the arrow's look while Color is untouched (preset_css supplies the variable). The card paints no ground here, so its radius shows on the picture; 0px (the default) leaves Image Radius alone. */
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__nav { color: var( --dfs-peptide-product-grid-arrow-ink ); }
.dfs-peptide-product-grid[data-dfs-peptide-product-grid-mode="mode3"] .dfs-peptide-product-grid__image-container { border-radius: max( var( --dfs-peptide-product-grid-img-radius ), var( --dfs-peptide-product-grid-card-radius ) ); }

/* ---- Frame: the old price never moves the title/price row ------------------
   Beside the name it sits out of flow above the price (Figma: old price y 555, price 564, title 567),
   so a sale card and a plain card keep one title y. Below the name it stays in flow (the title is first). */
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__info > .dfs-peptide-product-grid__price { position: relative; }
.dfs-peptide-product-grid--frame[data-dfs-peptide-product-grid-mode="mode4"] .dfs-peptide-product-grid__price del { position: var( --dfs-peptide-product-grid-del-pos, static ); right: 0; bottom: 100%; }

/* ---- COA drawer and quick view: looks the Style tab now reaches (each fallback is the value the rule had) ---- */
.dfs-peptide-product-grid__coad-panel {
	padding: var( --dfs-peptide-product-grid-coad-pad, 24px ) var( --dfs-peptide-product-grid-coad-pad, 24px ) max( var( --dfs-peptide-product-grid-coad-pad, 24px ), env( safe-area-inset-bottom ) );
	border: var( --dfs-peptide-product-grid-coad-border-w, 1px ) solid var( --dfs-peptide-product-grid-coad-border, #e8e8e8 );
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.1 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.1 );
}
.dfs-peptide-product-grid__coad-batch {
	padding: var( --dfs-peptide-product-grid-coad-batch-pad, 4px 10px );
	border: var( --dfs-peptide-product-grid-coad-batch-border-w, 1px ) solid var( --dfs-peptide-product-grid-coad-batch-border, #e0e0e0 );
	border-radius: var( --dfs-peptide-product-grid-coad-batch-radius, 9999px );
	color: var( --dfs-peptide-product-grid-coad-batch-ink, #555555 );
}
.dfs-peptide-product-grid__coad-stat {
	padding: var( --dfs-peptide-product-grid-coad-stat-pad, 16px );
	border-radius: var( --dfs-peptide-product-grid-coad-stat-radius, 16px );
}
.dfs-peptide-product-grid__coad-btn {
	padding: var( --dfs-peptide-product-grid-coad-btn-pad, 0 );
	border-radius: var( --dfs-peptide-product-grid-coad-btn-radius, 9999px );
	background: var( --dfs-peptide-product-grid-coad-btn-fill, transparent );
	font-size: var( --dfs-peptide-product-grid-coad-btn-size, 14px );
	font-weight: var( --dfs-peptide-product-grid-coad-btn-weight, 600 );
	line-height: var( --dfs-peptide-product-grid-coad-btn-lh, 20px );
}
.dfs-peptide-product-grid__qv-close { font-size: var( --dfs-peptide-product-grid-qv-close-size, 22px ); }


/* Sorted By menu (Brad 2026-11-09): the accent is a button that opens a small white menu under it */
.dfs-peptide-product-grid__fsort { position: relative; display: inline-block; }
.dfs-peptide-product-grid .dfs-peptide-product-grid__fhead .dfs-peptide-product-grid__fsort-btn,
.dfs-peptide-product-grid .dfs-peptide-product-grid__fhead .dfs-peptide-product-grid__fsort-btn:hover,
.dfs-peptide-product-grid .dfs-peptide-product-grid__fhead .dfs-peptide-product-grid__fsort-btn:focus {
	appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: var( --dfs-peptide-product-grid-fsort-btn-radius, 0 ); box-shadow: none;
	padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
	color: var( --dfs-peptide-product-grid-fhead-accent, #143245 ); cursor: pointer;
}
.dfs-peptide-product-grid .dfs-peptide-product-grid__fhead .dfs-peptide-product-grid__fsort-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dfs-peptide-product-grid__fsort-btn::after {
	content: ""; display: inline-block; width: .22em; height: .22em; margin-left: .2em; vertical-align: middle;
	border-right: .06em solid currentColor; border-bottom: .06em solid currentColor;
	transform: translateY( -.14em ) rotate( 45deg );
}
.dfs-peptide-product-grid__fsort-menu {
	position: absolute; left: 0; top: calc( 100% - 14px ); z-index: 30;
	display: flex; flex-direction: column; min-width: 200px; padding: 6px;
	background: #ffffff; border-radius: var( --dfs-peptide-product-grid-fsort-menu-radius, 12px ); box-shadow: 0 12px 32px rgba( 8, 35, 56, .18 ); white-space: nowrap;
}
.dfs-peptide-product-grid__fsort-menu[hidden] { display: none; }
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button,
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button:hover,
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button:focus {
	appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0; padding: 10px 12px;
	border: 0; border-radius: var( --dfs-peptide-product-grid-fsort-item-radius, 8px ); box-shadow: none; background: transparent; text-align: left; cursor: pointer;
	font: 500 16px/1.2 "Anek Telugu", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #143245;
}
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button:hover,
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button:focus-visible { background: #F2F5F7; outline: none; }
.dfs-peptide-product-grid .dfs-peptide-product-grid__fsort-menu button[aria-checked="true"] { font-weight: 700; }