/* =========================================================
   Peptik - parity rules that are not in themestyle.css (15 Oct 2026 retest). Loaded on every page (functions.php,
   peptik_parity_assets). Switch it all off with:  add_filter( 'peptik_parity_css', '__return_false' );
   ========================================================= */

/* 1. Typography baseline - what Shopify's <body> is: 18px Lato, line-height 1.4 (25.2px), and the font stack
      "Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif".
      Measured on 145 of 146 pages in the audit: this site had 16px / 20px (forced with !important). (The stack was first set to
      "Lato, sans-serif" from a reading of the 15 Oct report; the 21 Oct report shows that "Lato, sans-serif" is the WOO side, so it is corrected.)
      Text that has its own size (headings, buttons, cards, the cart, the account area) keeps it; this changes only text that
      inherits from <body>. */
/* The stack is Shopify's own (measured in the audit). It matters beyond Lato itself: Shopify's Lato file has no  ≥ ≈ ™ −  glyphs, so those
   are drawn by the next font in this list - the same list must be here or they would be drawn by a different font. */

/* 2. Phones: the "Need guidance choosing a peptide?" WhatsApp panel keeps a 16px gutter on each side.
      In Shopify the gutter comes from .page-width; that class has no definition in this theme, so the panel ran edge to edge. */
@media (max-width: 749px) {
	.peptik-collection-consult { padding-left: 16px; padding-right: 16px; }
}

/* 3. Empty cart (Shopify: snippets/cart-products.liquid) - the log-in line and the primary "Continue shopping" button.
      The centred column itself (.cart-page--empty) is already in style2.css. */
.cart-page--empty .cart-items__empty-login { margin: 0 0 18px !important; text-align: center; }   /* audit S051/S057 (!important: themestyle's last-child reset) */
.cart-page--empty .cart-items__empty-login a { color: #10003e; text-decoration: underline; text-underline-offset: 3px; }   /* audit S052/S058 */
.cart-page--empty .cart-items__empty-button { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--margin-md, 16px); padding: var(--padding-lg, 16px) var(--padding-4xl, 48px);
	background: #10003e; border: 0; border-radius: 12px; color: #fff; font-size: 18px; font-weight: 400; line-height: 25.2px; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s ease; }   /* audit S053-S056 / S059-S062 */
.cart-page--empty .cart-items__empty-button:hover { background: #24106a; color: #fff; }

/* 4. Cart: accepted payment methods - the current Shopify set (Visa, Mastercard, American Express, Bank Transfer, Tabby, Tamara, Crypto).
      peptik_cart_pay_block() prints the chips; themestyle.css lays three of them out in 3 columns, so seven get 4 columns (4 + 3). */
.peptik-pay .peptik-pay__logos.peptik-pay__temporary-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.peptik-pay__method .peptik-pay__card-logo { display: block; width: 48px; height: 30px; flex-shrink: 0; }   /* the card logos are 48 x 30 */
.peptik-pay__method svg.peptik-pay__card-logo {
    width: 48px;
    height: 30px;
}
.peptik-pay__method svg:not(.peptik-pay__card-logo) { width: 18px; height: 18px; }                          /* Bank Transfer / Crypto icons: room for their text in a 4-column chip */
.peptik-pay__method { gap: 5px; padding: 5px 4px; overflow: hidden; }
.peptik-pay__method--tamara { background: #3e1e68; border-color: #3e1e68; }                                  /* same purple as the Tamara chip in style2.css */
.peptik-pay__tamara-wordmark { font-size: 18px; font-weight: 800; letter-spacing: -.6px; color: #fff; }
@media (max-width: 359px) {
	.peptik-pay .peptik-pay__logos.peptik-pay__temporary-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* the smallest phones: 3 + 3 + 1 */
}

/* 5. Product page "Quantity" row (1 Box / 3-Months / 6-Months). themestyle.css gives each button min-width:120px, so a third tier
      wrapped onto a second line on phones (3 x 120 + gaps = 380px, a phone has 358px). 84px keeps three tiers on one line, even at 320px. */
@media (max-width: 749px) {
	.peptik-pdp-cycle__b { min-width: 84px; padding: 8px 14px; font-size: 14px; line-height: 16.8px; white-space: nowrap; }   /* audit 22 Oct S007-S012 / F10: Shopify 14px / 16.8px, padding 8px 14px */   /* "3-Months" stays on one line instead of breaking at the hyphen */
}

/* 6. Product page buy row (stepper + "Add to cart | price") on phones. Shopify's rule, adapted to this markup: the button only
      shares a line with the stepper if its WHOLE label fits (min-width: fit-content); otherwise it drops to its own full-width row,
      like Shopify. Before, themestyle.css gave it flex:1 (start from zero width and share the line) + a 200px minimum, so with a long
      price ("$2,204 USD  $1,874 USD") the button was squeezed beside the stepper and its label broke over 2-4 lines. The price part
      (| compare current) is kept together on one line. With a short price the two still sit side by side. */
.woocommerce .cart > .single_add_to_cart_button, .woocommerce .cart .woocommerce-variation-add-to-cart > .single_add_to_cart_button { flex: 1 1 185px; min-width: fit-content; }   /* only a button that IS a flex item of the row: inside .peptik-cart-actions (a column) this would set its height */
.woocommerce .cart .single_add_to_cart_button .btn-price { white-space: nowrap; }
.woocommerce .cart .peptik-cart-actions { flex: 1 1 185px; min-width: fit-content; }   /* the sold-out version of the same row */

/* 7. A cart with nothing to ship (only the consultation, a service). Shopify's summary then shows just "Total" for a visitor outside the UAE:
      no Shipping row (the template leaves it out), and the Subtotal - which would only repeat the Total - is dropped. It stays for a UAE visitor
      (the VAT line is under it) and whenever a discount line needs it. The attribute is set by cart-page.php; the country by peptik-geo.js. */
html[data-peptik-country]:not([data-peptik-country=""]):not([data-peptik-country="AE"]) .cartsubtotal[data-peptik-no-shipping]:not(:has(.cartrow--saved:not(.hidden))) [data-peptik-subtotal] { display: none; }

/* 8. Scrollbar - Shopify's own (assets/base.css, "Global scrollbar styles"): a thin scrollbar whose thumb is the text colour (#36334a) at 40%
      (60% on hover) on a transparent track. Shopify writes the colour as var(--color-foreground-rgb) / var(--opacity-40): those variables do not
      exist here, so the values are filled in. */
html {
	/* Firefox - and Chrome 121+, which ignores the ::-webkit-scrollbar rules below once these are set */
	scrollbar-width: thin;
	scrollbar-color: rgb(54 51 74 / 0.4) #fff;
}

/* Safari and older Chrome / Edge */
::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: rgb(54 51 74 / 0.4); border-radius: 20px; border: 6px solid transparent; background-clip: content-box; transition: background-color 0.2s; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(54 51 74 / 0.6); }

/* 9. Shopify theme variables. style2.css is Shopify's CSS and is written against ~400 custom properties (var(--padding-xl), var(--gap-sm),
      var(--icon-size-xs), var(--color-foreground-muted) ...) that Shopify defines once on :root. They were missing here, and a declaration
      whose variable is undefined is dropped silently - 1,265 such declarations in style2.css / themestyle.css alone.
      Sources: the live theme output (first group), snippets/theme-styles-variables.liquid (second group, with the {{ settings.x }} values filled
      in from the theme settings) and assets/base.css (third group). Only variables that nothing at :root already defines are listed, so nothing
      here overrides your own values. Shopify's values for these three are deliberately NOT applied, because themestyle.css sets its own:
      --font-size--h1, --font-size--h2 and --color-border (#E7ECF8 instead of rgb(0 0 0 / 0.06)). */
:root {
	/* ---- from the live theme output ---- */
	--letter-spacing-sm: 0.06em;
	--letter-spacing-md: 0.13em;
	--font-body--family: Lato, sans-serif;
	--font-body--style: normal;
	--font-body--weight: 400;
	--font-subheading--family: Lato, sans-serif;
	--font-subheading--style: normal;
	--font-subheading--weight: 400;
	--font-heading--family: Lato, sans-serif;
	--font-heading--style: normal;
	--font-heading--weight: 400;
	--font-accent--family: Lato, sans-serif;
	--font-accent--style: normal;
	--font-accent--weight: 400;
	--font-heading--spacing: 0.25em;
	--font-h1--spacing: var(--font-heading--spacing);
	--font-h2--spacing: var(--font-heading--spacing);
	--font-h3--spacing: var(--font-heading--spacing);
	--font-h4--spacing: var(--font-heading--spacing);
	--font-h5--spacing: var(--font-heading--spacing);
	--font-h6--spacing: var(--font-heading--spacing);
	--font-paragraph--spacing: 0.5em;
	--font-h1--color: var(--color-foreground-heading);
	--font-h2--color: var(--color-foreground-heading);
	--font-h3--color: var(--color-foreground-heading);
	--font-h4--color: var(--color-foreground-heading);
	--font-h5--color: var(--color-foreground-heading);
	--font-h6--color: var(--color-foreground-heading);
	--layer-section-background: -2;
	--layer-lowest: -1;
	--layer-base: 0;
	--layer-flat: 1;
	--layer-raised: 2;
	--layer-heightened: 4;
	--layer-sticky: 8;
	--layer-window-overlay: 10;
	--layer-header-menu: 12;
	--layer-overlay: 16;
	--layer-menu-drawer: 18;
	--layer-temporary: 20;
	--max-width--body-normal: 32.5em;
	--max-width--body-narrow: 22.75em;
	--max-width--heading-normal: 32.5em;
	--max-width--heading-narrow: 19.5em;
	--max-width--display-normal: 13em;
	--max-width--display-narrow: 9.75em;
	--max-width--display-tight: 3.25em;
	--letter-spacing--display-tight: -0.03em;
	--letter-spacing--display-normal: 0em;
	--letter-spacing--display-loose: 0.03em;
	--letter-spacing--heading-tight: -0.03em;
	--letter-spacing--heading-normal: 0em;
	--letter-spacing--heading-loose: 0.03em;
	--letter-spacing--body-tight: -0.03em;
	--letter-spacing--body-normal: 0em;
	--letter-spacing--body-loose: 0.03em;
	--line-height: 1;
	--line-height--display-tight: 1;
	--line-height--display-normal: 1.1;
	--line-height--display-loose: 1.2;
	--line-height--heading-tight: 1.15;
	--line-height--heading-normal: 1.25;
	--line-height--heading-loose: 1.35;
	--line-height--body-tight: 1.2;
	--line-height--body-normal: 1.4;
	--line-height--body-loose: 1.6;
	--font-size--paragraph: 1.125rem;
	--font-size--h3: 2.0rem;
	--font-size--h4: 1.5rem;
	--font-size--h5: 0.875rem;
	--font-size--h6: 0.75rem;
	--font-paragraph--weight: 400;
	--font-paragraph--letter-spacing: var(--letter-spacing--body-normal);
	--font-paragraph--size: var(--font-size--paragraph);
	--font-paragraph--family: var(--font-body--family);
	--font-paragraph--style: var(--font-body--style);
	--font-paragraph--line-height: var(--line-height--body-normal);
	--font-h1--weight: var(--font-heading--weight);
	--font-h1--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h1--size: var(--font-size--h1);
	--font-h1--family: var(--font-heading--family);
	--font-h1--style: var(--font-heading--style);
	--font-h1--case: none;
	--font-h1--line-height: var(--line-height--display-tight);
	--font-h2--weight: var(--font-heading--weight);
	--font-h2--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h2--size: var(--font-size--h2);
	--font-h2--family: var(--font-heading--family);
	--font-h2--style: var(--font-heading--style);
	--font-h2--case: none;
	--font-h2--line-height: var(--line-height--display-tight);
	--font-h3--weight: var(--font-heading--weight);
	--font-h3--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h3--size: var(--font-size--h3);
	--font-h3--family: var(--font-heading--family);
	--font-h3--style: var(--font-heading--style);
	--font-h3--case: none;
	--font-h3--line-height: var(--line-height--display-normal);
	--font-h4--weight: var(--font-heading--weight);
	--font-h4--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h4--size: var(--font-size--h4);
	--font-h4--family: var(--font-heading--family);
	--font-h4--style: var(--font-heading--style);
	--font-h4--case: none;
	--font-h4--line-height: var(--line-height--display-tight);
	--font-h5--weight: var(--font-subheading--weight);
	--font-h5--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h5--size: var(--font-size--h5);
	--font-h5--family: var(--font-subheading--family);
	--font-h5--style: var(--font-subheading--style);
	--font-h5--case: none;
	--font-h5--line-height: var(--line-height--display-loose);
	--font-h6--weight: var(--font-subheading--weight);
	--font-h6--letter-spacing: var(--letter-spacing--heading-normal);
	--font-h6--size: var(--font-size--h6);
	--font-h6--family: var(--font-subheading--family);
	--font-h6--style: var(--font-subheading--style);
	--font-h6--case: none;
	--font-h6--line-height: var(--line-height--display-loose);
	--font-size--3xs: 0.625rem;
	--font-size--2xs: 0.75rem;
	--font-size--xs: 0.8125rem;
	--font-size--sm: 0.875rem;
	--font-size--md: 1rem;
	--font-size--lg: 1.125rem;
	--font-size--xl: 1.25rem;
	--font-size--2xl: 1.5rem;
	--font-size--3xl: 2rem;
	--font-size--4xl: 2.5rem;
	--font-size--5xl: 3rem;
	--font-size--6xl: 3.5rem;
	--menu-font-sm--size: 0.875rem;
	--menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14));
	--menu-font-md--size: 1rem;
	--menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16));
	--menu-font-lg--size: 1.125rem;
	--menu-font-lg--line-height: calc(1.1 + 0.5 * min(16 / 18));
	--menu-font-xl--size: 1.25rem;
	--menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20));
	--menu-font-2xl--size: 1.75rem;
	--menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28));
	--color-error: #8B0000;
	--color-success: #006400;
	--color-white: #FFFFFF;
	--color-white-rgb: 255 255 255;
	--color-black: #000000;
	--color-instock: #3ED660;
	--color-lowstock: #EE9441;
	--color-outofstock: #C8C8C8;
	--opacity-5: 0.05;
	--opacity-8: 0.08;
	--opacity-10: 0.1;
	--opacity-15: 0.15;
	--opacity-20: 0.2;
	--opacity-25: 0.25;
	--opacity-30: 0.3;
	--opacity-40: 0.4;
	--opacity-50: 0.5;
	--opacity-60: 0.6;
	--opacity-70: 0.7;
	--opacity-80: 0.8;
	--opacity-85: 0.85;
	--opacity-90: 0.9;
	--opacity-subdued-text: var(--opacity-70);
	--shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
	--gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
	--margin-3xs: 0.125rem;
	--margin-2xs: 0.3rem;
	--margin-xs: 0.5rem;
	--margin-sm: 0.7rem;
	--margin-md: 0.8rem;
	--margin-lg: 1rem;
	--margin-xl: 1.25rem;
	--margin-2xl: 1.5rem;
	--margin-3xl: 1.75rem;
	--margin-4xl: 2rem;
	--margin-5xl: 3rem;
	--margin-6xl: 5rem;
	--scroll-margin: 50px;
	--padding-3xs: 0.125rem;
	--padding-lg: 1rem;
	--padding-xl: 1.25rem;
	--padding-2xl: 1.5rem;
	--padding-3xl: 1.75rem;
	--padding-4xl: 2rem;
	--padding-5xl: 3rem;
	--padding-6xl: 4rem;
	--gap-3xs: 0.125rem;
	--gap-2xs: 0.3rem;
	--gap-xs: 0.5rem;
	--gap-sm: 0.7rem;
	--gap-md: 0.9rem;
	--gap-lg: 1rem;
	--gap-xl: 1.25rem;
	--gap-3xl: 3rem;
	--spacing-scale-sm: 0.6;
	--spacing-scale-md: 0.7;
	--spacing-scale-default: 1.0;
	--checkout-button-gap: 10px;
	--style-border-width: 1px;
	--style-border-radius-xs: 0.2rem;
	--style-border-radius-sm: 0.6rem;
	--style-border-radius-md: 0.8rem;
	--style-border-radius-50: 50%;
	--style-border-radius-lg: 1rem;
	--style-border-radius-pills: 40px;
	--style-border-radius-inputs: 4px;
	--style-border-width-primary: 0px;
	--style-border-width-secondary: 1px;
	--style-border-width-inputs: 1px;
	--style-border-popover: 1px none rgb(var(--color-border-rgb) / 50%);
	--style-border-drawer: 1px none rgb(var(--color-border-rgb) / 50%);
	--style-border-swatch-opacity: 10%;
	--style-border-swatch-width: 1px;
	--style-border-swatch-style: solid;
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	--animation-speed-fast: 0.0625s;
	--animation-speed: 0.125s;
	--animation-speed-slow: 0.2s;
	--animation-speed-medium: 0.15s;
	--animation-easing: ease-in-out;
	--animation-slideshow-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--drawer-animation-speed: 0.2s;
	--animation-values-slow: var(--animation-speed-slow) var(--animation-easing);
	--animation-values: var(--animation-speed) var(--animation-easing);
	--animation-values-fast: var(--animation-speed-fast) var(--animation-easing);
	--animation-values-allow-discrete: var(--animation-speed) var(--animation-easing) allow-discrete;
	--animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0);
	--animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
	--animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
	--animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);
	--spring-d300-b0-easing: linear(0, 0.0033 0.81%, 0.027 2.42%, 0.0916 4.84%, 0.4745 15.32%, 0.6422 20.97%, 0.7175, 0.7789, 0.8283 30.64%, 0.876, 0.9111 38.71%, 0.941, 0.9611 48.39%, 0.9707, 0.978 54.84%, 0.9885 62.1%, 0.9949 70.97%, 0.9982 82.26%, 0.9997 100%);
	--spring-d300-b0-duration: 0.4980s;
	--spring-d280-b0-easing: linear(0, 0.0044, 0.0164 1.85%, 0.085 4.63%, 0.4571 14.81%, 0.575 18.52%, 0.6505, 0.7148 24.07%, 0.7849, 0.8393, 0.8809 35.18%, 0.9189, 0.9453 44.44%, 0.9662, 0.9793 55.55%, 0.9894 62.95%, 0.995 71.28%, 0.9982 82.39%, 0.9997 99.98%);
	--spring-d280-b0-duration: 0.4648s;
	--spring-d260-b0-easing: linear(0, 0.0058, 0.0216 2.15%, 0.0748 4.29%, 0.4646 15.03%, 0.5673, 0.655, 0.7279, 0.7872, 0.8349, 0.8727 34.36%, 0.9107, 0.9379 42.95%, 0.9609 48.31%, 0.9778 54.76%, 0.9887 62.27%, 0.9948 70.86%, 0.9983 82.67%, 0.9997 99.85%);
	--spring-d260-b0-duration: 0.4316s;
	--spring-d220-b0-easing: linear( 0, 0.0093 1.37%, 0.0696 4.12%, 0.4667 15.09%, 0.6322 20.58%, 0.6986 23.32%, 0.7793 27.44%, 0.8219 30.18%, 0.8721, 0.9089 38.42%, 0.9427, 0.9644, 0.978 54.88%, 0.9881 61.74%, 0.9944 69.97%, 0.998 80.95%, 0.9996 98.78% );
	--spring-d220-b0-duration: 0.3818s;
	--spring-d180-b0-easing: linear(0, 0.0234, 0.0805 4.48%, 0.4865 15.68%, 0.6211 20.16%, 0.7696 26.88%, 0.8064 29.12%, 0.8646, 0.9063, 0.9358, 0.9563 47.04%, 0.9757, 0.9867 60.48%, 0.9941 69.44%, 0.9979 80.64%, 0.9996 98.56%);
	--spring-d180-b0-duration: 0.2988s;
	--view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut;
	--view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition;
	--focus-outline-width: 0.09375rem;
	--focus-outline-offset: 0.2em;
	--badge-blob-padding-block: 1px;
	--badge-blob-padding-inline: 12px 8px;
	--badge-rectangle-padding-block: 1px;
	--badge-rectangle-padding-inline: 6px;
	--color-background: rgb(255 255 255 / 1.0);
	--color-background-rgb: 255 255 255;
	--opacity-5-15: 0.05;
	--opacity-10-25: 0.1;
	--opacity-35-55: 0.35;
	--opacity-40-60: 0.4;
	--opacity-30-60: 0.3;
	--color-foreground: rgb(54 51 74 / 1.0);
	--color-foreground-rgb: 54 51 74;
	--color-foreground-heading: rgb(16 0 62 / 1.0);
	--color-foreground-heading-rgb: 16 0 62;
	--color-primary: rgb(16 0 62 / 1.0);
	--color-primary-rgb: 16 0 62;
	--color-primary-hover: rgb(0 0 0 / 1.0);
	--color-primary-hover-rgb: 0 0 0;
	--color-border-rgb: 0 0 0;
	--color-shadow: rgb(0 0 0 / 1.0);
	--color-shadow-rgb: 0 0 0;
	--color-primary-button-text: rgb(255 255 255 / 1.0);
	--color-primary-button-background: rgb(16 0 62 / 1.0);
	--color-primary-button-border: rgb(16 0 62 / 1.0);
	--color-primary-button-hover-text: rgb(255 255 255 / 1.0);
	--color-primary-button-hover-background: rgb(51 51 51 / 1.0);
	--color-primary-button-hover-border: rgb(0 0 0 / 1.0);
	--color-secondary-button-text: rgb(0 0 0 / 1.0);
	--color-secondary-button-background: rgb(0 0 0 / 0.0);
	--color-secondary-button-border: rgb(0 0 0 / 1.0);
	--color-secondary-button-hover-text: rgb(51 51 51 / 1.0);
	--color-secondary-button-hover-background: rgb(250 250 250 / 1.0);
	--color-secondary-button-hover-border: rgb(51 51 51 / 1.0);
	--color-input-background: rgb(255 255 255 / 0.78);
	--color-input-text: rgb(51 51 51 / 1.0);
	--color-input-text-rgb: 51 51 51;
	--color-input-border: rgb(223 223 223 / 1.0);
	--color-input-hover-background: rgb(0 0 0 / 0.01);
	--color-variant-background: rgb(255 255 255 / 1.0);
	--color-variant-border: rgb(0 0 0 / 0.13);
	--color-variant-text: rgb(0 0 0 / 1.0);
	--color-variant-text-rgb: 0 0 0;
	--color-variant-hover-background: rgb(245 245 245 / 1.0);
	--color-variant-hover-text: rgb(0 0 0 / 1.0);
	--color-variant-hover-border: rgb(230 230 230 / 1.0);
	--color-selected-variant-background: rgb(0 0 0 / 1.0);
	--color-selected-variant-border: rgb(0 0 0 / 1.0);
	--color-selected-variant-text: rgb(255 255 255 / 1.0);
	--color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
	--color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
	--color-selected-variant-hover-border: rgb(26 26 26 / 1.0);
	--input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
	--input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
	--input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
	--color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
	--shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
	--shadow-blur: 20px;
	--shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
	--modal-max-height: 65dvh;
	--quick-add-modal-height: min(38.5rem, 96vh);
	--quick-add-modal-width: min(54rem, 96vw);
	--quick-add-modal-gallery-width: 24rem;
	--card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5));
	--card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30));
	--card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10));
	--cart-primary-font-family: var(--font-body--family);
	--cart-primary-font-style: var(--font-body--style);
	--cart-primary-font-weight: var(--font-body--weight);

	/* ---- from snippets/theme-styles-variables.liquid (icons, inputs, buttons, drawers, ...) ---- */
	--narrow-content-width: 36rem;
	--normal-content-width: 42rem;
	--wide-content-width: 46rem;
	--narrow-page-width: 90rem;
	--normal-page-width: 120rem;
	--wide-page-width: 150rem;
	--section-height-small: 15rem;
	--section-height-medium: 25rem;
	--section-height-large: 35rem;
	--icon-size-2xs: 0.6rem;
	--icon-size-xs: 0.85rem;
	--icon-size-md: 1.375rem;
	--icon-size-lg: 1.5rem;
	--icon-stroke-width: 1.5px;
	--input-email-min-width: 200px;
	--input-search-max-width: 650px;
	--input-padding-y: 0.8rem;
	--input-padding-x: 0.8rem;
	--input-padding: var(--input-padding-y) var(--input-padding-x);
	--input-box-shadow-width: var(--style-border-width-inputs);
	--input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border);
	--input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border);
	--input-textarea-min-height: 55px;
	--checkbox-size: 22px;
	--checkbox-border-radius: 7px;
	--checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
	--checkbox-label-padding: 8px;
	--button-size-sm: 30px;
	--button-size-md: 36px;
	--button-size: var(--minimum-touch-target);
	--button-padding-inline: 24px;
	--button-padding-block: 16px;
	--border-color: rgb(var(--color-border-rgb) / var(--opacity-50));
	--border-width-sm: 1px;
	--border-width-md: 2px;
	--border-width-lg: 5px;
	--border-radius-sm: 0.25rem;
	--drawer-inline-padding: 25px;
	--drawer-menu-inline-padding: 2.5rem;
	--drawer-header-block-padding: 20px;
	--drawer-content-block-padding: 10px;
	--drawer-header-desktop-top: 0rem;
	--drawer-padding: calc(var(--padding-sm) + 7px);
	--drawer-height: 100dvh;
	--drawer-width: 95vw;
	--drawer-max-width: 500px;
	--variant-picker-swatch-width-unitless: 34;
	--variant-picker-swatch-height-unitless: 34;
	--variant-picker-swatch-width: 34px;
	--variant-picker-swatch-height: 34px;
	--variant-picker-swatch-radius: 32px;
	--variant-picker-button-radius: 12px;
	--variant-picker-button-border-width: 1px;
	--slideshow-controls-size: 3.5rem;
	--slideshow-controls-icon: 2rem;
	--peek-next-slide-size: 3rem;
	--backdrop-opacity: 0.15;
	--backdrop-color-rgb: var(--color-shadow-rgb);
	--minimum-touch-target: 44px;
	--disabled-opacity: 0.5;
	--skeleton-opacity: 0.025;
	--shape--circle: circle(50% at center);
	--shape--sunburst: polygon(100% 50%,94.62% 55.87%,98.3% 62.94%,91.57% 67.22%,93.3% 75%,85.7% 77.39%,85.36% 85.36%,77.39% 85.7%,75% 93.3%,67.22% 91.57%,62.94% 98.3%,55.87% 94.62%,50% 100%,44.13% 94.62%,37.06% 98.3%,32.78% 91.57%,25% 93.3%,22.61% 85.7%,14.64% 85.36%,14.3% 77.39%,6.7% 75%,8.43% 67.22%,1.7% 62.94%,5.38% 55.87%,0% 50%,5.38% 44.13%,1.7% 37.06%,8.43% 32.78%,6.7% 25%,14.3% 22.61%,14.64% 14.64%,22.61% 14.3%,25% 6.7%,32.78% 8.43%,37.06% 1.7%,44.13% 5.38%,50% 0%,55.87% 5.38%,62.94% 1.7%,67.22% 8.43%,75% 6.7%,77.39% 14.3%,85.36% 14.64%,85.7% 22.61%,93.3% 25%,91.57% 32.78%,98.3% 37.06%,94.62% 44.13%);
	--shape--diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	--shape--blob: polygon(85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%);
	--height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm));
	--card-width-small: 10rem;
	--height-small: 10rem;
	--height-medium: 11.5rem;
	--height-large: 13rem;
	--height-full: 100vh;
	--variant-picker-border-width: 1px;
	--variant-picker-border-style: solid;
	--variant-picker-border-opacity: 10%;
	--button-font-family-primary: var(--font-body--family);
	--button-font-family-secondary: var(--font-body--family);

	/* ---- from assets/base.css (hover, surface and submenu transitions) ---- */
	--hover-lift-amount: 4px;
	--hover-scale-amount: 1.03;
	--hover-subtle-zoom-amount: 1.015;
	--hover-shadow-color: var(--color-shadow);
	--hover-transition-duration: 0.25s;
	--hover-transition-timing: ease-out;
	--surface-transition-duration: 0.3s;
	--surface-transition-timing: var(--ease-out-quad);
	--submenu-animation-speed: 360ms;
	--submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media screen and (min-width: 750px) {
	:root {
		--section-height-small: 50svh;
		--section-height-medium: 65svh;
		--section-height-large: 80svh;
		--badge-blob-padding-block: 4px;
		--badge-blob-padding-inline: 16px 12px;
		--badge-rectangle-padding-block: 4px;
		--badge-rectangle-padding-inline: 10px;
		--checkbox-size: 16px;
		--checkbox-border-radius: 5px;
		--checkbox-label-padding: 6px;
		--height-small: 17.5rem;
		--height-medium: 21.25rem;
		--height-large: 25rem;
	}
}

/* 10. Differences measured by the 21 October full-page audit (developer files: all-css-fixes.csv, functional-fix-checklist.csv). Each rule below
       copies the value Shopify renders ("targetShopify" in the ledger); nothing here is a guess. */

/* 10a. <body>. Shopify's is white with #36334a text (base.css: body { color: var(--color-foreground); background: var(--color-background) }).
        The ledger lists this on 145 of 146 routes; every piece of text that inherits its colour from <body> was black here. */
body { background: var(--color-background); color: var(--color-foreground); }

/* 10b. Shopify's base.css is not loaded here, so these small utility rules were missing, and the header icon buttons fell back to the browser's
        default button look (13.33px font, padding 1px 6px) instead of 18px / padding 0. They are wrapped in :where() - zero specificity - because in
        Shopify base.css loads BEFORE the component rules and the components win; this file loads last, so without :where() it would override
        .header-actions__action { display: flex } and similar. */
:where(.button-unstyled) {
	display: block;
	padding: 0;
	background-color: inherit;
	color: inherit;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	font-family: var(--font-paragraph--family);
	font-style: var(--font-paragraph--style);
	font-size: var(--font-paragraph--size);
}
/* Shopify's .button-unstyled (specificity 0,1,0) beats a bare button { font-family } rule (0,0,1); here themestyle.css has one, so the font
   properties of a <button> get the same specificity. */
button.button-unstyled { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); font-size: var(--font-paragraph--size); }
:where(.button-unstyled:hover) {
	background-color: inherit;
}
:where(.svg-wrapper) {
	color: currentcolor;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size-sm);
	height: var(--icon-size-sm);
	pointer-events: none;
}
:where(.svg-wrapper--smaller) {
	width: var(--icon-size-2xs);
	height: var(--icon-size-2xs);
}
:where(.list-unstyled) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 10c. Product page, "Why Peptik Next-Generation..." heading (#peptik-dual-title, pen products). Shopify scopes two extra rules to
        .peptik-product-inner__dual; WP has no such wrapper, so the same values are scoped to .peptik-product-inner. The homepage uses the same
        section outside .peptik-product-inner and is not touched. Ledger: 34px -> 38px desktop; 43px -> 26px mobile, 358px -> 326px wide at x=32. */
.peptik-product-inner .peptik-dual h2 { margin-bottom: 20px; font-size: 38px; line-height: 44px; letter-spacing: -1.6px; }
@media (max-width: 749px) {
	.peptik-product-inner .peptik-dual h2 { margin: 0 0 14px; font-size: 26px; line-height: 32px; letter-spacing: -1px; }
}

/* 10d. Removed 22 Oct: the 22 Oct audit (S044) shows Shopify's catalog toggle title is 16px on mobile; the old ledger was read the wrong way round. */

/* 10e. Card dose buttons ("12 Boxes"): Shopify's mobile rule, missing from themestyle.css. */
@media (max-width: 749px) {
	.peptik-card-cycle .peptik-card-dose__b { font-size: 15px; padding: 8px 15px; }
}

/* 10f. Sticky add-to-cart bar button. Shopify's .button gives it line-height var(--font-paragraph--line-height) (1.4 = 25.2px) and its mobile
        rule gives padding var(--padding-lg); neither reached this button. Scoped to this button only - .button is also WooCommerce's class. */
.sticky-add-to-cart__button.button { line-height: var(--font-paragraph--line-height); }
/* style2.css has .sticky-add-to-cart__button { padding: 16px 24px !important }, which Shopify's live theme no longer has (the ledger measures 16px on
   mobile), so this one needs !important too. Desktop already matches. */
@media screen and (max-width: 749px) {
	.sticky-add-to-cart__button.button { padding: var(--padding-lg) !important; }
}

/* 10g. Main add-to-cart button. Corrected 22 Oct (audit F10, S004-S006, S013): Shopify is 16px / 22px with padding 16px 24px; the old ledger
        was read the wrong way round. The 6px gap stays: the label and price are separate items here. */
.woocommerce .cart .single_add_to_cart_button { padding: 16px 24px; }   /* S006 desktop + S013 mobile */
@media (min-width: 768px) {
	.woocommerce .cart .single_add_to_cart_button { font-size: 16px; line-height: 22px; }   /* S004/S005: desktop back to 16px / 22px */
}
@media (max-width: 767px) {
	/* Phones keep 15px / 20px: the audit measured no font difference on mobile while this file set 15/20 at every width, and
	   F10 restores 16/22 for desktop only. 20px + 2 x 16px padding = the 52px button height, so the price is not clipped. */
	.woocommerce .cart .single_add_to_cart_button { font-size: 15px; line-height: 20px; }
}


/* ============================================================================================================================
   11. 22 October 2026 template audit (peptik-template-fixes-20261022). Rows read "current (Woo) -> target (Shopify)".
       Many of these are margins that themestyle.css's global ":last-child:is(p, h1...h6) { margin-bottom: 0 !important }" removes,
       so those rules need !important and a component selector. Each rule is scoped to its own component; no global p/h2/a reset.
   ============================================================================================================================ */

/* 11a. Footer (S002/S016, S003/S017): brand text keeps 12px below it, the last legal fine-print paragraph 8px. */
.section-group-footer-group .footer-brand .footer-text { margin: 0 0 12px !important; }
.section-group-footer-group .footer-legal-fine p { margin: 0 0 8px !important; }

/* 11b. Product description: its last paragraph keeps the 12px below it (S018/S019, GHK-Cu). */
#product-overview .peptik-product-inner__panel-body > p:last-child { margin-bottom: 12px !important; }

/* 11c. Recommendation cards (F09): Shopify's recommendation title is 20px / 26px, weight 500. The main catalog title is untouched. */
.peptik-recs .productinfo h4 { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: normal; }

/* 11d. Contact page (S020-S023). */
.aboutus-section .bodytext h5:last-child { margin-bottom: 16px !important; }
.contactcustom .contact-custom__info h2 { margin: 0 0 16px !important; }
@media (max-width: 749px) {
	/* S023 on About (P120): the section heading keeps its 16px bottom margin on phones when it is the last child
	   (themestyle's :last-child reset removes it; Shopify has no such reset). */
	.scientific-standards .standards-title.bodytext h2:last-child { margin-bottom: 16px !important; }
}

/* 11e. About and Home cards at desktop (S024, S025, S026, S030). Below 1271px themestyle.css already sets these. */
@media (min-width: 1271px) {
	.qualitySctn .regulatory-card p { margin-top: 14px; }
	.aboutpeptik .regulatory-card p,
	.page-template-home-page .regulatory-section .regulatory-card p,
	.page-template-page-templates-home-page .regulatory-section .regulatory-card p { margin-top: 16px; }
	.regulatory-section .regulatory-header.bodytext h2:last-child { margin-bottom: 24px !important; }
	.about-features .about-item p { margin-top: 18px; }
}

/* 11f. FAQ page intro on phones (S027): 16px above it, not 20px. */
@media (max-width: 749px) {
	.faqpage .container > h1 + p { margin-top: 16px; }
}

/* 11g. Calculator filters "All / Pens / Vials / Spray/Cream" (S032-S035): line-height 1.4 of 14px. */
.peptik-howto-library__filters button { line-height: 19.6px; }

/* 11h. Main navigation, Shopify's rule (26 Oct 2026): the current page's link is blue (#0745c4) unless the pointer is over
        another menu item, in which case the hovered item is blue and the current one returns to normal - like Shopify's
        .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active.
        The 22 Oct audit (S036) saw grey on /lab-results and the search page because Shopify does not mark Lab Results as the
        current link there (its menu link points to a different URL); the colour rule itself is blue on both sites. */
.navigation ul:not(:has(li:hover)) li.current_page_item > a,
.navigation ul:not(:has(li:hover)) li.current-menu-item > a,
.navigation ul li:is(:hover, :focus-within) > a { color: #0745c4; }
/* themestyle.css keeps the current link blue at all times; while another item is hovered it goes back to the normal grey. */
.navigation ul:has(li:hover) li:is(.current_page_item, .current-menu-item):not(:hover) > a { color: #686677; }

/* 11i. Catalog (S037, S042, S043): toggle subtitle weight 400; the mobile delivery line is 15px with normal letter-spacing
        (the 13.5px rule at the end of themestyle.css still applies to the other hero line). */
.peptik-type-toggle__subtitle { font-weight: 400; }
@media (max-width: 749px) {
	.clctnmain .hero-features li.peptik-clctn-delivery { font-size: 15px; letter-spacing: normal; }
}

/* 11j. Unavailable card dose / pack choices (F13, S040/S041, S049/S050): Shopify's own is-out style. functions.php now adds the
        class from the same availability value the add-to-cart uses. */
.peptik-card-dose__b.is-out,
.peptik-card-cycle .peptik-card-dose__b.is-out { color: #9aa0af; text-decoration: line-through; cursor: not-allowed; opacity: .55; }

/* 11k. Search page (S063-S065, S070-S072). The Clear button keeps its vertical centre but with margin 0, like Shopify. */
.searchtop .bodytext search-page-input-component a.search__reset-button,
.searchtop .bodytext search-page-input-component a.search__reset-button:hover,
.searchtop .bodytext search-page-input-component a.search__reset-button:focus,
.searchtop .bodytext search-page-input-component a.search__reset-button:active { top: calc(50% - 14px) !important; bottom: auto !important; margin: 0 !important; }
.searchtop .bodytext search-page-input-component a.search__reset-button { color: #333333; }
@media (min-width: 980px) {
	.collectionmain.mysearch .productinfo h4 { margin-bottom: 0; }
}
@media (max-width: 749px) {
	.searchtop .bodytext h2 { margin-bottom: 16px; }
}

/* 11l. Removed 26 Oct: the lab-results template now prints the empty .peptik-kr__standards-grid like Shopify, which gives the
        spacing above "Browse products" by itself. */

/* 11m. Consultation "Add to cart" button (26 Oct 2026): keep the dark text on hover and focus. themestyle.css turns every
        hovered link pink (a:hover { color: var(--accentpink) }), and style2.css only changed the background on hover. */
.pkc-btn:hover,
.pkc-btn:focus-visible { background: #dcb877; color: #3b2a12; }

/* 11n. Product card star rating in Loox's markup (functions.php peptik_card_loox_rating). Star colour #EBBF20 = Shopify's
        .loox-rating .loox-icon { color: #EBBF20 }; the stars are filled with currentColor, as Loox does. */
.loox-rating { --peptik-star: #EBBF20; --peptik-star-empty: #d6d1df; display: block; margin: 6px 0 4px; line-height: 1; }
.loox-rating .loox-rating-content { display: inline-flex; align-items: center; gap: 2px; }
.loox-rating .loox-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #EBBF20; }
.loox-rating .loox-icon[data-lx-fill="full"] { fill: currentColor; }
.loox-rating .loox-icon[data-lx-fill="half"] { fill: url(#looxicons-half); }
.loox-rating .loox-icon[data-lx-fill="empty"] { fill: var(--peptik-star-empty); }
.loox-rating .loox-rating-label { font-size: 18px; line-height: 1; color: inherit; }

/* 11o. Research Stacks page (page-templates/research-stacks-page.php): Shopify's Swiper row as a CSS scroll-snap row.
        3 cards per view with 30px gaps on desktop, 2 with 20px from 768px, 1.15 with 12px on phones. The row itself
        scrolls, so the bullets below it stay in place. Bullets: Swiper's base look (8px dots, 4px apart); colours and
        the <=1024px display come from themestyle.css, as on Shopify. */
.home-products.rst .swiper-wrapper { display: flex; gap: 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.home-products.rst .swiper-wrapper::-webkit-scrollbar { display: none; }
.home-products.rst .swiper-slide { flex: 0 0 calc((100% - 60px) / 3); min-width: 0; scroll-snap-align: start; }
.home-products.rst .swiper-slide > .productcard { height: 100%; }
.home-products.rst .swiper-pagination-bullet { display: inline-block; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; cursor: pointer; transition: .2s transform; }
@media (max-width: 1023px) {
	.home-products.rst .swiper-wrapper { gap: 20px; }
	.home-products.rst .swiper-slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
	.home-products.rst .swiper-wrapper { gap: 12px; }
	.home-products.rst .swiper-slide { flex-basis: calc((100% - 12px) / 1.15); }
}


/* ============================================================================================================================
   12. 27 October 2026 audit (peptik-updated-audit-20261027).
   ============================================================================================================================ */

/* 12a. F05 / S003 / S004 Contact. Both form-column headings keep 16px below them; on phones the Everest Forms rows stack
        one field per row (first/last name, email/phone), like Shopify. */
.contactcustom .contact-custom__form h2 { margin: 0 0 16px !important; }
@media (max-width: 749px) {
	.contactcustom .evf-frontend-grid { flex-direction: column; }
	.contactcustom .evf-frontend-grid > .evf-grid-1,
	.contactcustom .evf-frontend-grid > .evf-grid-2,
	.contactcustom .evf-frontend-grid > [class*="evf-grid-"],
	.contactcustom .evf-frontend-grid .evf-field { width: 100% !important; min-width: 0; flex: 0 0 auto; }
}

/* 12b. F06 About on phones: Shopify's mobile About page has no Scientific Standards block (its three cards, View Research
        Catalogue, Scientific Transparency, Batch Verification) between Batch Traceability and Our Process. Desktop keeps it
        (desktop About already passes). Only the About template is affected. */
@media (max-width: 749px) {
	.page-template-about-us-page .scientific-standards,
	.page-template-page-templatesabout-us-page-php .scientific-standards { display: none; }
}

/* 12c. F07 Vial gallery on phones (audit page 26). Shopify shows the vial image cropped to 1584:900 - about 220px tall at a
        420px screen (358 x 203px at 390px). WP showed it inside a square box (themestyle.css gives the media column
        aspect-ratio 1/1 on phones), so the image box was 388px tall with blank space under the picture.
        Vial pages only (body class peptik-format-vial from functions.php); Pen and Spray keep the square box; desktop unchanged. */
@media (max-width: 767px) {
	.peptik-format-vial .productmain .product-information__media,
	.peptik-format-vial .productmain .product-information__media media-gallery,
	.peptik-format-vial .productmain .product-information__media slideshow-component { aspect-ratio: auto; height: auto; }
	.peptik-format-vial .productmain .product-information__media a { display: block; }
	.peptik-format-vial .productmain .product-information__media img,
	.peptik-format-vial .productmain .product-information__media img.product-media__image2,
	.peptik-format-vial .productmain .product-information__media img[class*="product-media__image"] {
		display: block; width: 100% !important; height: auto !important; aspect-ratio: 1584 / 900; object-fit: cover !important;
	}
}

/* 12d. F08 Pen comparison on phones (product pages only; the home page already passes): restore the 16px side padding of the
        inner container and Shopify's panel padding 28px 16px 12px. */
@media (max-width: 767px) {
	.single-product .peptik-dual > .container { padding: 0 16px; }
	.single-product .peptik-dual__panel { padding: 28px 16px 12px; }
}

/* 12e. F09 / S009 / S010 Tracking title line-height 34px (Shopify), both widths. */
.peptik-track .peptik-track__title { line-height: 34px; }

/* 12f. F09 / S019 Catalog format tiles on phones: only the Spray/Cream tile's title is 14px (the longer label); Pen and Vial stay 16px. */
@media (max-width: 749px) {
	.peptik-type-toggle__card[data-format^="sprays"] .peptik-type-toggle__title { font-size: 14px; }
}

/* 12g. Footer on phones (every page: "Quick Links" and "Company Information" bands 8px taller than Shopify). themestyle.css
        sets the column gap twice - 32px for .footer-grid--cols (<=768px) and later 40px for .footer-grid (<=979px) - and the
        later 40px wins. Shopify uses 32px. */
@media (max-width: 768px) {
	.footer-grid.footer-grid--cols { gap: 32px; }
}

/* 12h. Empty cart (P163 "Cart" band 481 vs 434 desktop, 653 vs 585 mobile). Measured from the audit screenshots: Shopify's
        log-in line sits 24px lower (20px on phones) and "You may also like" starts about 80px higher. */
.cart-page--empty .cart-items__empty-login { margin-top: 24px !important; }
body:has(.cart-page.cart-page--empty) .cart-related-products { margin-top: -80px; }
@media (max-width: 749px) {
	.cart-page--empty .cart-items__empty-login { margin-top: 20px !important; }
}

/* 12i. Comparison panel on product pages: Shopify's own rule (.peptik-product-inner__dual .peptik-dual__panel { padding-bottom: 16px },
        12px on phones - already in 12d). The panel had the home page's 64px bottom padding on product pages (P065 "Dual-Chamber
        Advantage" band 1440 vs 1392 = exactly 48px). Home page unchanged. */
@media (min-width: 768px) {
	.single-product .peptik-dual__panel { padding-bottom: 16px; }
}

/* 12j. Dosage cell notes (Shopify's .peptik-dose-list__note and item spacing; the note element is new on WP with the ported
        dosage renderer in functions.php peptik_dose_list_inner_html). */
.peptik-dose-list__note { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: #686677; }
.peptik-dosage-panel .peptik-dose-list__item { margin-bottom: 9px; }
.peptik-dosage-panel .peptik-dose-list__item:last-of-type { margin-bottom: 4px; }
/* Shopify's panel spans are upper case (".peptik-dosage-panel span { text-transform: uppercase }"), so the dose list reads
   "15 UNITS / INJECTION", "10 UNITS · 50 MG"; the reconstitution note keeps its own inline text-transform: none, as on Shopify. */
.peptik-dosage-panel .peptik-dose-list span { text-transform: uppercase; }
.peptik-dosage-panel .peptik-dose-list__mg { margin-top: 1px; font-size: 0.88em; line-height: 1.15; opacity: 0.6; }

/* 12k. Regulatory / quality cards (Home "Compliance & Regulatory Positioning", About "Our Mission", "Research-Grade Sourcing",
        "Our Process"): every card band was 6-7px taller than Shopify on both widths. Shopify's base.css makes images
        display:block, so an icon has no text-baseline gap under it; WP's icons are inline and gain that gap. Scoped to
        these card icons only (base.css's global img rule is deliberately not ported). */
.regulatory-card img,
.regulatory-section .regulatory-icon { display: block; max-width: 100%; }


/* 13a. 28 Oct 2026 - sold-out product card, as Shopify: "Out of Stock" pill top-left, greyed image, dimmed price.
        Values copied from the live Shopify card. The title is now plain text inside the h4 (no link), clickable via JS. */
.product-card__sold-out-badge {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	display: inline-flex; align-items: center;
	color: rgb(255, 255, 255); background: rgb(16, 0, 62);
	font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1;
	padding: 6px 12px; border-radius: 9999px; pointer-events: none;
}
.product-card__sold-out-badge,
.product-card__new-badge { left: 12px !important; right: auto !important; }
.product-card--sold-out .card-image img { opacity: 0.55; filter: grayscale(0.35); }
.product-card--sold-out .price { opacity: 0.6; }
li.product-card .custom-product-card { cursor: pointer; } /* the whole card opens the product, as Shopify */

/* 13b. 28 Oct 2026 - dose row on product cards (Reta-Tik 10mg / 20mg / 40mg), as Shopify: full-width wrapping row of
        buttons, 6px apart, 8px under the price. Shopify's rule targets a direct child of [data-peptik-card-price]; on WP
        the row sits one level deeper (inside .peptik-card-price-value), hence the descendant selector. Cycle rows
        (1 Box / Full Cycle, class peptik-card-cycle) are not affected. */
[data-peptik-card-price] .peptik-card-dose:not(.peptik-card-cycle) {
	display: flex;
	width: 100%;
	max-width: 100%;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	margin-left: 0;
	vertical-align: middle;
}


/* 13c. 28 Oct 2026 - variable product page (Reta-Tik): the stepper + "Add to cart | price" row. WooCommerce wraps them in
        .single_variation_wrap > .woocommerce-variation-add-to-cart, which was not a flex row, so the button shrank to its text
        and sat under the stepper. Now the same row as a simple product (section 6): stepper and full-width button side by side. */
.woocommerce form.variations_form .single_variation_wrap { flex: 0 0 100%; width: 100%; }
.woocommerce form.variations_form .woocommerce-variation-add-to-cart { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; width: 100%; }
.woocommerce form.variations_form .woocommerce-variation-add-to-cart > .single_add_to_cart_button { flex: 1 1 185px; min-width: fit-content; }