/** Shopify CDN: Minification failed

Line 1829:19 Unexpected "*"

**/
/* ==========================================================================
   SCANDI SWEET SHOP — Custom Theme Overrides for Shopify Taste Theme
   Transforms the Taste theme to match the Scandi Sweet Shop Lovable design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GOOGLE FONTS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES / DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --candy-raspberry: #E91E63;
  --candy-raspberry-rgb: 233, 30, 99;
  --candy-raspberry-light: hsl(340, 82%, 85%);
  --candy-raspberry-dark: hsl(340, 82%, 42%);
  --candy-lemon: #FACC14;
  --candy-lemon-rgb: 250, 204, 20;
  --candy-lemon-light: hsl(48, 96%, 90%);
  --candy-sky: #7DD3FC;
  --candy-sky-rgb: 125, 211, 252;
  --candy-sky-light: hsl(197, 71%, 92%);
  --candy-mint: #34D399;
  --candy-mint-rgb: 52, 211, 153;
  --candy-mint-light: hsl(158, 64%, 88%);
  --candy-blueberry: #4339C6;
  --candy-blueberry-rgb: 67, 57, 198;
  --candy-blueberry-light: hsl(244, 55%, 88%);
  --candy-cola: hsl(24, 70%, 25%);

  /* Neutrals */
  --candy-cream: #FAF7F2;
  --scandi-bg: #FEFDFB;
  --scandi-fg: #1F2937;
  --scandi-muted: hsl(220, 10%, 45%);
  --scandi-border: rgba(31, 41, 55, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 41, 55, 0.08);
  --shadow-lg: 0 8px 24px rgba(31, 41, 55, 0.12);
  --shadow-xl: 0 20px 40px -12px rgba(31, 41, 55, 0.15);
  --shadow-candy: 0 4px 20px rgba(var(--candy-raspberry-rgb), 0.25);
  --shadow-candy-hover: 0 20px 40px -12px rgba(var(--candy-raspberry-rgb), 0.2);
  --shadow-candy-btn: 0 8px 24px -4px rgba(var(--candy-raspberry-rgb), 0.35);

  /* Transitions */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Radii */
  --radius-full: 9999px;
  --radius-2xl: 12px;
  --radius-xl: 12px;
  --radius-lg: 8px;

  /* Section spacing */
  --section-py: 4rem;
  --section-py-lg: 6rem;
}

/* --------------------------------------------------------------------------
   3. BASE / GLOBAL RESETS
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--scandi-fg);
  background-color: var(--scandi-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--candy-raspberry-light);
  color: var(--scandi-fg);
}

::-moz-selection {
  background: var(--candy-raspberry-light);
  color: var(--scandi-fg);
}

/* Focus ring — raspberry accent */
*:focus-visible {
  outline: 2px solid var(--candy-raspberry) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--candy-raspberry-rgb), 0.15) !important;
}

/* Cascade override for .button focus states — Taste's base.css:1278 rule
   `.button:focus-visible, .button:focus, .button.focused, ...` sets
   `outline: 0` shorthand + multi-stop grey box-shadow without !important.
   Our generic *:focus-visible above has !important on the outline shorthand,
   which wins outline-color (computed shows raspberry) but Chrome's outline
   shorthand + focus-ring rendering interactions leave outline-width (1.5px
   instead of 2px), outline-offset (0px instead of 2px), and box-shadow
   (none instead of raspberry halo) partially broken.

   Higher-specificity .button selector + !important on each LONGHAND
   property locks all four to spec values. Includes .focused class because
   Taste's global.js:173-178 manually toggles it for custom focus tracking
   on certain form components.

   Covers :focus AND :focus-visible (not just keyboard) — conscious
   deviation from strict Lovable parity: Lovable's spec uses focus-visible
   Tailwind modifier (keyboard-only), but Taste's grey 3-stop halo fires
   on `.button:focus` for mouse-click too. Showing raspberry on both
   keyboard tab AND mouse click is visually better than letting the grey
   halo bleed through on click. Trade-off documented in MEMORY-ACTIVE
   conscious deviations. */
.button:focus-visible,
.button:focus,
.button.focused,
.product-form__submit:focus-visible,
.product-form__submit:focus,
.product-form__submit.focused {
  outline: 2px solid var(--candy-raspberry) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(var(--candy-raspberry-rgb), 0.15) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--candy-cream);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--candy-raspberry-rgb), 0.3);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.5);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--candy-raspberry-rgb), 0.3) var(--candy-cream);
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  color: var(--scandi-fg);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.h0 {
  font-size: clamp(1.875rem, 5vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.h1 {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
}

.h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
}

.h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
}

p, span, a, li, td, th, label, input, textarea, select, button,
.rte, .rte p {
  font-family: 'Inter', sans-serif;
}

.rte {
  color: var(--scandi-muted);
  line-height: 1.7;
}

/* Muted body text */
.banner__text,
.rich-text__text,
.image-with-text__text,
.multicolumn-card__info p {
  color: var(--scandi-muted);
}

/* --------------------------------------------------------------------------
   5. ANNOUNCEMENT BAR — Raspberry ticker
   -------------------------------------------------------------------------- */
.utility-bar {
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  border: none !important;
  overflow: hidden;
  position: relative;
}

.utility-bar * {
  color: #fff !important;
}

.announcement-bar__message {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  text-transform: none;
}

/* Ticker animation for announcement bar links */
.utility-bar .announcement-bar__link {
  animation: ticker-scroll 20s linear infinite;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  /* transparent so the .header-wrapper gradient (HDR-1) shows edge-to-edge.
     Was var(--scandi-bg) opaque cream, which covered the wash across the
     page-width content area (only leaked into the side margins). */
  background: transparent !important;
  border-bottom: 1px solid var(--scandi-border) !important;
  box-shadow: none !important;
}

.header__heading-link {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800;
  color: var(--scandi-fg) !important;
}

.list-menu__item {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--scandi-fg) !important;
  transition: color var(--duration-normal) var(--ease-smooth);
  position: relative;
}

.list-menu__item:hover {
  color: var(--candy-raspberry) !important;
}

.list-menu__item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--candy-raspberry);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-smooth), left var(--duration-normal) var(--ease-smooth);
}

.list-menu__item:hover::after {
  width: 100%;
  left: 0;
}

/* Header icons */
.header__icon .icon {
  transition: color var(--duration-fast) var(--ease-smooth);
}

.header__icon:hover .icon {
  color: var(--candy-raspberry) !important;
}

/* --------------------------------------------------------------------------
   7. BUTTONS — Pill-shaped with candy glow
   -------------------------------------------------------------------------- */
.button,
.shopify-challenge__button,
button.button,
.shopify-payment-button__button,
.form__submit {
  border-radius: var(--radius-full) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: all var(--duration-normal) var(--ease-smooth) !important;
  position: relative;
  overflow: hidden;
}

/* Primary / solid buttons */
.button--primary,
.shopify-payment-button__button--unbranded {
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(var(--candy-raspberry-rgb), 0.3);
}

.button--primary:hover,
.shopify-payment-button__button--unbranded:hover {
  background: var(--candy-raspberry-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-candy-btn) !important;
}

.button--primary:active,
.shopify-payment-button__button--unbranded:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(var(--candy-raspberry-rgb), 0.2) !important;
}

/* Secondary / outline buttons */
.button--secondary {
  border: 2px solid var(--candy-raspberry) !important;
  color: var(--candy-raspberry) !important;
  background: transparent !important;
}

.button--secondary:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.button--secondary:active {
  transform: scale(0.95);
}

/* Tertiary / text buttons */
.button--tertiary {
  border-radius: var(--radius-full) !important;
  color: var(--candy-raspberry) !important;
}

.button--tertiary:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06) !important;
}

/* Quick-add and quantity buttons */
.quick-add__submit {
  border-radius: var(--radius-full) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  transition: all var(--duration-normal) var(--ease-smooth) !important;
}

.quick-add__submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.quantity__button {
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-smooth);
  border: 1px solid var(--scandi-border);
}

.quantity__button:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06);
  border-color: var(--candy-raspberry);
  color: var(--candy-raspberry);
}

/* Variant pills */
.product-form__input--pill .product-form__input {
  border-radius: var(--radius-full) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.product-form__input--pill .product-form__input:checked + label,
.product-form__input--pill .product-form__input.active + label {
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  border-color: var(--candy-raspberry) !important;
}

/* --------------------------------------------------------------------------
   8. PRODUCT CARDS — Hover lift with raspberry shadow
   -------------------------------------------------------------------------- */
.card-wrapper {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-bounce),
              box-shadow var(--duration-slow) var(--ease-smooth);
  background: #fff;
}

.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-candy-hover);
}

.card,
.card--standard,
.card--media {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden;
  border: none !important;
  background: #fff;
}

.card__inner {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden;
}

.card__media {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden;
  background: #f9f9f9;
}

.card__media img,
.media--hover-effect img {
  transition: transform var(--duration-slow) var(--ease-smooth);
  object-fit: contain !important;
  padding: 8px;
}

.card-wrapper:hover .card__media img,
.card-wrapper:hover .media--hover-effect img {
  transform: scale(1.05);
}

.card__content {
  text-align: left;
  padding: 1rem 1.25rem 1.25rem;
}

.card__heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  font-size: 1rem;
  color: var(--scandi-fg);
  line-height: 1.3;
}

.card__heading a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.card__heading a:hover {
  color: var(--candy-raspberry);
}

/* Cards on cream background sections */
.color-scheme-2 .card-wrapper,
.color-scheme-2 .card {
  background: #fff;
}

/* --------------------------------------------------------------------------
   9. PRICING — Raspberry pink, Nunito bold
   -------------------------------------------------------------------------- */
.price-item--regular,
.price-item--sale,
.price .money {
  color: var(--candy-raspberry) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1em;
}

.price-item--regular {
  text-decoration: none;
}

/* Compare-at / strikethrough price */
.price--on-sale .price-item--regular {
  color: var(--scandi-muted) !important;
  font-weight: 500 !important;
  text-decoration: line-through;
  font-size: 0.9em;
  opacity: 0.7;
}

.price__sale .price-item--sale {
  color: var(--candy-raspberry) !important;
}

/* --------------------------------------------------------------------------
   10. BADGES — Pill-shaped, colored by type
   -------------------------------------------------------------------------- */
.badge {
  border-radius: var(--radius-full) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.25rem 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none !important;
  line-height: 1.4;
}

/* Sale badge — lemon */
.badge[class*="sale"],
.badge--sale {
  background: var(--candy-lemon) !important;
  color: var(--scandi-fg) !important;
}

/* Sold-out badge — muted */
.badge[class*="sold"],
.badge--soldout {
  background: hsl(220, 10%, 85%) !important;
  color: var(--scandi-fg) !important;
}

/* Position badges (top-left/bottom-right default to lemon for SALE) */
.badge--bottom-right,
.badge--top-left {
  background: var(--candy-lemon) !important;
  color: var(--scandi-fg) !important;
}

/* Custom badge colors via metafield classes or manual overrides */
.badge--new,
.badge[data-badge="new"] {
  background: var(--candy-lemon) !important;
  color: var(--scandi-fg) !important;
}

.badge--bestseller,
.badge[data-badge="bestseller"] {
  background: var(--candy-raspberry) !important;
  color: #fff !important;
}

/* Dietary tag pills */
.badge--vegan,
.tag--vegan {
  background: rgba(var(--candy-mint-rgb), 0.2) !important;
  color: hsl(158, 64%, 35%) !important;
}

.badge--halal,
.tag--halal {
  background: rgba(var(--candy-blueberry-rgb), 0.2) !important;
  color: hsl(244, 55%, 40%) !important;
}

/* --------------------------------------------------------------------------
   11. HERO BANNER — Gradient overlay, centered content
   -------------------------------------------------------------------------- */
.banner,
.banner--content-align-center {
  position: relative;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(250, 247, 242, 0.85) 0%,
    rgba(254, 253, 251, 0.7) 50%,
    rgba(250, 247, 242, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.banner__box {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-2xl);
  padding: 2rem;
}

.banner__content {
  position: relative;
  z-index: 2;
}

.banner__heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
  color: var(--scandi-fg) !important;
}

.banner__text {
  font-family: 'Inter', sans-serif;
  color: var(--scandi-muted);
  font-size: 1.1rem;
  max-width: 600px;
}

.banner .button {
  margin-top: 0.5rem;
}

/* Decorative background blobs for hero-like sections */
.banner__media::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--candy-raspberry-rgb), 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   12. NEWSLETTER SECTION — Candy gradient background
   -------------------------------------------------------------------------- */
.newsletter,
.newsletter-section {
  background: linear-gradient(
    135deg,
    rgba(var(--candy-raspberry-rgb), 0.08) 0%,
    rgba(var(--candy-lemon-rgb), 0.08) 40%,
    rgba(var(--candy-sky-rgb), 0.08) 100%
  ) !important;
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(var(--candy-raspberry-rgb), 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter .field__input {
  border-radius: var(--radius-full) !important;
  border: 2px solid var(--scandi-border);
  font-family: 'Inter', sans-serif;
  transition: border-color var(--duration-fast) var(--ease-smooth);
}

.newsletter .field__input:focus {
  border-color: var(--candy-raspberry) !important;
  box-shadow: 0 0 0 3px rgba(var(--candy-raspberry-rgb), 0.1) !important;
}

.newsletter .newsletter__button {
  border-radius: var(--radius-full) !important;
  background: var(--candy-raspberry) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   13. TRUST / MULTICOLUMN SECTION
   -------------------------------------------------------------------------- */
.multicolumn {
  position: relative;
}

.multicolumn-list__item {
  text-align: center;
  padding: 1.5rem 1rem;
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.multicolumn-list__item:hover {
  transform: translateY(-4px);
}

/* Trust strip — dark background variant with colored icons */
.color-scheme-5 .multicolumn-list__item .icon,
.color-scheme-5 .multicolumn-card .icon,
.multicolumn--trust .icon {
  width: 48px;
  height: 48px;
}

/* Icon color coding for trust strip */
.color-scheme-5 .multicolumn-list__item:nth-child(1) .icon,
.multicolumn-list__item[data-icon="package"] .icon {
  color: var(--candy-mint) !important;
}

.color-scheme-5 .multicolumn-list__item:nth-child(2) .icon,
.multicolumn-list__item[data-icon="truck"] .icon {
  color: var(--candy-sky) !important;
}

.color-scheme-5 .multicolumn-list__item:nth-child(3) .icon,
.multicolumn-list__item[data-icon="shield"] .icon {
  color: var(--candy-blueberry) !important;
}

.multicolumn-card__info h3,
.multicolumn-card__info .h3 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.multicolumn-card__info p {
  color: var(--scandi-muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   14. IMAGE WITH TEXT SECTIONS
   -------------------------------------------------------------------------- */
.image-with-text {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.image-with-text__media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.image-with-text__content {
  padding: 2rem;
}

.image-with-text__heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

/* --------------------------------------------------------------------------
   15. RICH TEXT SECTIONS
   -------------------------------------------------------------------------- */
.rich-text {
  text-align: center;
}

.rich-text__heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

.rich-text__text {
  color: var(--scandi-muted);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   16. FOOTER — Dark background with accent colors
   -------------------------------------------------------------------------- */
.footer {
  background: var(--scandi-fg) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer h2,
.footer .h2,
.footer h3,
.footer .h3,
.footer .footer-block__heading {
  color: #fff !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

.footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.footer a:hover {
  color: var(--candy-raspberry) !important;
}

/* Social icons in footer */
.footer .social-icons__link svg,
.footer .list-social__link svg {
  transition: transform var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.footer .social-icons__link:hover svg,
.footer .list-social__link:hover svg {
  transform: translateY(-2px);
  color: var(--candy-raspberry) !important;
}

/* Footer input fields */
.footer .field__input {
  border-radius: var(--radius-full) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.footer .field__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer .field__input:focus {
  border-color: var(--candy-raspberry) !important;
}

/* Footer bottom bar */
.footer__content-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* --------------------------------------------------------------------------
   17. FAQ / COLLAPSIBLE SECTIONS
   -------------------------------------------------------------------------- */
.collapsible-content {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.collapsible-content__wrapper {
  border: none !important;
}

.collapsible-content .accordion {
  border: none !important;
}

.collapsible-content .accordion__title,
.collapsible-content summary {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--candy-cream);
  margin-bottom: 0.5rem;
  transition: background var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
  border: none !important;
}

.collapsible-content .accordion__title:hover,
.collapsible-content summary:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06);
  color: var(--candy-raspberry);
}

.collapsible-content .accordion__content,
.collapsible-content .accordion__body {
  padding: 0.75rem 1.5rem 1.25rem;
  color: var(--scandi-muted);
  line-height: 1.7;
}

/* Open state indicator */
.collapsible-content details[open] summary {
  background: rgba(var(--candy-raspberry-rgb), 0.06);
  color: var(--candy-raspberry);
}

/* --------------------------------------------------------------------------
   18. CART DRAWER
   -------------------------------------------------------------------------- */
.drawer,
.cart-drawer {
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl) !important;
  box-shadow: -8px 0 40px rgba(31, 41, 55, 0.15) !important;
}

.drawer__inner {
  padding: 1.5rem;
}

.drawer__header {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  border-bottom: 1px solid var(--scandi-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.drawer__close {
  border-radius: 50% !important;
  transition: background var(--duration-fast) var(--ease-smooth);
}

.drawer__close:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06);
}

/* Cart items in drawer */
.cart-item {
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  transition: background var(--duration-fast) var(--ease-smooth);
}

.cart-item__image {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

.cart-item__name {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
}

.cart-item__price {
  color: var(--candy-raspberry) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
}

/* Cart drawer footer/totals */
.cart-drawer__footer {
  border-top: 1px solid var(--scandi-border) !important;
  padding-top: 1rem;
}

.totals__total-value {
  color: var(--candy-raspberry) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800;
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   19. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.product__info-wrapper {
  padding: 2rem 0;
}

.product__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.15;
  color: var(--scandi-fg);
}

.product__media-wrapper {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.product__media-item {
  border-radius: var(--radius-2xl) !important;
  overflow: hidden;
}

/* Product description */
.product__description,
.product__description .rte {
  color: var(--scandi-muted);
  line-height: 1.7;
}

/* Product price on PDP */
.product__info-wrapper .price-item--regular,
.product__info-wrapper .price-item--sale {
  font-size: 1.5rem !important;
}

/* Trust indicators on product page */
.product__info-wrapper .icon-checkmark,
.product__info-wrapper .icon-check {
  color: var(--candy-mint) !important;
}

/* Product tabs / accordion */
.product__accordion .accordion__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
}

/* Thumbnail navigation */
.thumbnail-list .thumbnail {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-smooth);
}

.thumbnail-list .thumbnail.is-active,
.thumbnail-list .thumbnail:hover {
  border-color: var(--candy-raspberry);
}

/* --------------------------------------------------------------------------
   20. COLLECTION PAGES
   -------------------------------------------------------------------------- */
.collection-hero {
  background: linear-gradient(135deg, var(--candy-cream), var(--scandi-bg)) !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  padding: 3rem 0;
}

.collection-hero__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

.collection-hero__description {
  color: var(--scandi-muted);
}

/* Collection grid */
.collection .grid {
  gap: 1.5rem;
}

/* Active filters */
.active-facets__button {
  border-radius: var(--radius-full) !important;
  font-family: 'Inter', sans-serif;
  border-color: var(--candy-raspberry) !important;
  color: var(--candy-raspberry) !important;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.active-facets__button:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06) !important;
}

/* Facet filters */
.facets__disclosure {
  border-radius: var(--radius-full) !important;
}

.facets__summary {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
}

/* Sort by dropdown */
.facet-filters__sort select {
  border-radius: var(--radius-full) !important;
  font-family: 'Inter', sans-serif;
}

/* Pagination */
.pagination__item {
  border-radius: var(--radius-full) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-smooth);
}

.pagination__item--current,
.pagination__item:hover {
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  border-color: var(--candy-raspberry) !important;
}

/* --------------------------------------------------------------------------
   21. COLOR SCHEMES — Override Taste defaults
   -------------------------------------------------------------------------- */

/* Scheme 1: Default / light */
.color-scheme-1 {
  background: var(--scandi-bg);
  color: var(--scandi-fg);
}

/* Scheme 2: Cream sections (product grid backgrounds, etc.) */
.color-scheme-2 {
  background: var(--candy-cream);
  color: var(--scandi-fg);
}

/* Scheme 3: Raspberry accent */
.color-scheme-3 {
  background: var(--candy-raspberry);
  color: #fff;
}

.color-scheme-3 .button--secondary {
  border-color: #fff !important;
  color: #fff !important;
}

.color-scheme-3 .button--secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Scheme 4: Candy gradient */
.color-scheme-4 {
  background: linear-gradient(
    135deg,
    rgba(var(--candy-raspberry-rgb), 0.05),
    rgba(var(--candy-lemon-rgb), 0.05),
    rgba(var(--candy-sky-rgb), 0.05)
  );
}

/* Scheme 5: Dark / footer-like */
.color-scheme-5 {
  background: var(--scandi-fg);
  color: rgba(255, 255, 255, 0.85);
}

.color-scheme-5 h1,
.color-scheme-5 h2,
.color-scheme-5 h3,
.color-scheme-5 .h1,
.color-scheme-5 .h2,
.color-scheme-5 .h3 {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   22. SECTION SPACING
   -------------------------------------------------------------------------- */
.spaced-section,
[class*="section-"][class*="-padding"] {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}

@media (min-width: 750px) {
  .spaced-section,
  [class*="section-"][class*="-padding"] {
    padding-top: var(--section-py-lg);
    padding-bottom: var(--section-py-lg);
  }
}

/* --------------------------------------------------------------------------
   23. PROGRESS BARS — Color-coded by percentage
   -------------------------------------------------------------------------- */
.progress-bar,
[data-progress-bar] {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--candy-cream);
  overflow: hidden;
}

.progress-bar__fill,
[data-progress-fill] {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--candy-raspberry);
  transition: width var(--duration-slow) var(--ease-smooth);
}

/* 75-99% — lemon */
.progress-bar--warning .progress-bar__fill,
[data-progress-level="warning"] [data-progress-fill] {
  background: var(--candy-lemon);
}

/* 100% — mint */
.progress-bar--complete .progress-bar__fill,
[data-progress-level="complete"] [data-progress-fill] {
  background: var(--candy-mint);
}

/* --------------------------------------------------------------------------
   24. MOBILE MENU / DRAWER NAV
   -------------------------------------------------------------------------- */
.menu-drawer {
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
}

.menu-drawer__menu-item {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-xl);
  transition: background var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth);
}

.menu-drawer__menu-item:hover {
  background: rgba(var(--candy-raspberry-rgb), 0.06);
  color: var(--candy-raspberry) !important;
}

.menu-drawer__close-button {
  border-radius: 50% !important;
}

/* --------------------------------------------------------------------------
   25. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

/* Float — gentle up-down bob */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Shimmer — shine sweep across element */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pulse — gentle scale throb */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Candy pulse glow — raspberry glow effect */
@keyframes candy-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--candy-raspberry-rgb), 0.2),
                0 0 20px rgba(var(--candy-raspberry-rgb), 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(var(--candy-raspberry-rgb), 0.4),
                0 0 40px rgba(var(--candy-raspberry-rgb), 0.15);
  }
}

/* Fade-in up */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from right (cart drawer) */
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Spin for loading states */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Utility animation classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-candy-glow {
  animation: candy-pulse-glow 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   26. SMOOTH TRANSITIONS ON INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
a,
button,
input,
select,
textarea,
.card-wrapper,
.badge,
.thumbnail,
details summary {
  transition-timing-function: var(--ease-smooth);
  transition-duration: var(--duration-normal);
}

img {
  transition: transform var(--duration-slow) var(--ease-smooth),
              opacity var(--duration-normal) var(--ease-smooth);
}

/* --------------------------------------------------------------------------
   27. MOBILE RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  /* Tighter section padding on mobile */
  .spaced-section,
  [class*="section-"][class*="-padding"] {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Smaller headings on mobile */
  .h0 {
    font-size: 1.875rem !important;
  }

  .h1 {
    font-size: 1.5rem !important;
  }

  .h2 {
    font-size: 1.25rem !important;
  }

  /* Full-width buttons on mobile */
  .banner .button {
    width: 100%;
    text-align: center;
  }

  /* Smaller card padding */
  .card__content {
    padding: 0.75rem 1rem 1rem;
  }

  /* Product card hover disabled on touch — keep subtle shadow */
  .card-wrapper:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .card-wrapper:active {
    transform: scale(0.98);
  }

  /* Stack product media/info */
  .product__info-wrapper {
    padding: 1.5rem 0;
  }

  /* Cart drawer full width on small screens */
  .drawer,
  .cart-drawer {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    max-width: 100% !important;
  }

  /* Announcement bar font size */
  .announcement-bar__message {
    font-size: 0.78rem;
  }

  /* Multicolumn stacking */
  .multicolumn-list__item {
    padding: 1rem 0.5rem;
  }

  /* Banner text sizing */
  .banner__heading {
    font-size: 1.75rem !important;
  }

  .banner__text {
    font-size: 0.95rem;
  }

  /* Product page price */
  .product__info-wrapper .price-item--regular,
  .product__info-wrapper .price-item--sale {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra-small screens */
  .h0 {
    font-size: 1.5rem !important;
  }

  .collection .grid {
    gap: 0.75rem;
  }

  .card__content {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  .card__heading {
    font-size: 0.875rem;
  }
}

/* Tablet tweaks */
@media (min-width: 750px) and (max-width: 989px) {
  .banner__heading {
    font-size: 2.5rem !important;
  }

  .collection .grid {
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   28. LOADING / SKELETON STATES
   -------------------------------------------------------------------------- */
.loading-overlay {
  background: rgba(254, 253, 251, 0.8);
}

.loading-overlay__spinner .spinner {
  border-color: rgba(var(--candy-raspberry-rgb), 0.2);
  border-top-color: var(--candy-raspberry);
  animation: spin 0.8s linear infinite;
}

/* Skeleton placeholder shimmer */
.placeholder-svg,
.skeleton {
  background: linear-gradient(
    90deg,
    var(--candy-cream) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    var(--candy-cream) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   29. NOTIFICATION / TOAST STYLES
   -------------------------------------------------------------------------- */
.cart-notification {
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--scandi-border);
}

.cart-notification__heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   30. MISCELLANEOUS & UTILITY OVERRIDES
   -------------------------------------------------------------------------- */

/* Breadcrumbs */
.breadcrumbs a {
  color: var(--scandi-muted);
  font-size: 0.85rem;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.breadcrumbs a:hover {
  color: var(--candy-raspberry);
}

/* Back to top / scroll-up */
.scroll-up {
  border-radius: 50% !important;
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  box-shadow: var(--shadow-candy);
}

/* Gift card page */
.gift-card__image {
  border-radius: var(--radius-2xl);
}

.gift-card__number {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
}

/* Error / form validation */
.form__message--error {
  color: var(--candy-raspberry);
  font-size: 0.85rem;
}

/* Links general */
a:not(.button):not(.card__heading a):hover {
  color: var(--candy-raspberry);
}

/* Horizontal rules */
hr {
  border-color: var(--scandi-border);
}

/* Table styling */
.rte table {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--scandi-border);
}

.rte th {
  background: var(--candy-cream);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* Pop-up / modal */
.popup-modal__content {
  border-radius: var(--radius-2xl) !important;
}

/* Search */
.search__input {
  border-radius: var(--radius-full) !important;
  font-family: 'Inter', sans-serif;
}

.search__button {
  border-radius: var(--radius-full) !important;
}

/* Deferred media play button */
.deferred-media__poster-button {
  border-radius: 50% !important;
  background: var(--candy-raspberry) !important;
  color: #fff !important;
  transition: transform var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.deferred-media__poster-button:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-candy);
}

/* --------------------------------------------------------------------------
   31. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .utility-bar,
  .header,
  .footer,
  .drawer,
  .cart-notification {
    display: none !important;
  }

  body {
    font-family: 'Inter', sans-serif;
    color: #000;
    background: #fff;
  }

  .card-wrapper {
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
}

/* ===== HEADER - Pastel candy gradient background ===== */
.header-wrapper {
  /* HDR-1 (D7): Lovable's 5-stop structure, lightness raised modestly from
     Lovable's verbatim 96-97% to 93-94% so the wash is perceptible against
     Scandi's other section backgrounds. Less aggressive than the first
     iteration (88-93%), which over-corrected. */
  background: linear-gradient(to right,
    hsl(340, 82%, 93%) 0%,
    hsl(48, 96%, 94%) 25%,
    hsl(0, 0%, 99%) 50%,
    hsl(158, 64%, 94%) 75%,
    hsl(197, 71%, 94%) 100%) !important;
  border-bottom: 1px solid rgba(233, 30, 99, 0.1) !important;
}

/* Sprinkle dot overlay on header */
.header-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(233,30,99,0.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(250,204,20,0.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(52,211,153,0.04) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px, 60px 60px;
  background-position: 0 0, 25px 25px, 12px 40px;
  pointer-events: none;
  z-index: 0;
}

.header-wrapper > * {
  position: relative;
  z-index: 1;
}

/* Navigation links - Nunito bold with hover underline */
.header__inline-menu .list-menu__item--link {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem;
  color: rgba(31, 41, 55, 0.8);
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  position: relative;
}

.header__inline-menu .list-menu__item--link:hover {
  color: #E91E63;
  background: linear-gradient(135deg, rgba(233,30,99,0.05), rgba(250,204,20,0.05));
  transform: translateY(-2px);
}

/* Animated underline on nav hover */
.header__inline-menu .list-menu__item--link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(to right, #E91E63, #FACC14, #34D399);
  transition: width 0.25s ease;
}

.header__inline-menu .list-menu__item--link:hover::after {
  width: 85%;
}

/* Nav width distribution (B1+B2) + LAYOUT-1 Safari fix: give the grid slack to
   the NAV column so the 8-item menu spreads between logo and the icon cluster.
   LAYOUT-1: use a flex container with flex:1 on the inner ul instead of
   width:100% — Safari sizes the 1fr grid track from the block's content when a
   %-width child is involved, which clustered the items; flex stretch is reliable
   in both engines. */
@media screen and (min-width: 990px) {
  .header.header--middle-left {
    grid-template-columns: auto 1fr auto !important;
  }
  .header__inline-menu {
    display: flex !important;
  }
  .header__inline-menu .list-menu--inline {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
  }
}

/* NAV-2: country selector moved to the footer (right cluster ~290→~140px), so
   the 8-item nav now fits inline down to the 990px breakpoint once tightened in
   the 990–1199 band. ≥1200px keeps the larger default font (room is ample). */
@media screen and (min-width: 990px) and (max-width: 1199.98px) {
  .header__inline-menu .header__menu-item {
    font-size: 1.05rem !important;
    padding: 0.7rem 0.3rem !important;
  }
  .header__inline-menu .list-menu--inline > li + li::before {
    margin: 0 0.25rem !important;
  }
}

/* Logo styling - ensure image shows with glow */
.header__heading-logo-wrapper {
  position: relative;
  /* Stock Taste sets width:100%, which resolves against the content-sized
     `auto` heading grid track and can collapse the logo to ~0 at wide desktop
     widths (P0 follow-up 2026-05-20). Size to the logo instead. */
  width: auto !important;
  min-width: 56px;
}

.header__heading-logo-wrapper::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(233,30,99,0.15), rgba(250,204,20,0.1), transparent 70%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.6;
  filter: blur(20px);
}

.header__heading-logo {
  max-height: 56px !important;
  width: auto !important;
  min-width: 44px;
}

@media screen and (min-width: 990px) {
  .header__heading-logo {
    max-height: 56px !important;
  }
}

/* Cart icon button - candy gradient bg */
.header__icon--cart {
  background: linear-gradient(135deg, rgba(233,30,99,0.15), rgba(250,204,20,0.15));
  border-radius: 0.75rem;
  padding: 0.5rem;
}

.header__icon--cart:hover {
  background: linear-gradient(135deg, rgba(233,30,99,0.25), rgba(250,204,20,0.25));
}

/* Cart icon bounce on add — Lovable Header.tsx:164-167 parity.
   Keyframe array matches Lovable's framer-motion animate values exactly:
     scale:  [1, 1.3, 0.85, 1.15, 1]
     rotate: [0, -15, 15, -8, 0]
   over 0.6s easeOut. Triggered by assets/cart-bounce.js via .is-bouncing. */
#cart-icon-bubble.is-bouncing {
  animation: pickmix-cart-bounce 0.6s cubic-bezier(0, 0, 0.2, 1);
  transform-origin: center;
  display: inline-block;
}
@keyframes pickmix-cart-bounce {
  0%   { transform: scale(1)    rotate(0deg); }
  25%  { transform: scale(1.3)  rotate(-15deg); }
  50%  { transform: scale(0.85) rotate(15deg); }
  75%  { transform: scale(1.15) rotate(-8deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Cart count bubble first-appear pop — Lovable initial{scale:0,rotate:-180}
   → animate{scale:1,rotate:0}. Fires ONLY on empty→present transition via
   is-popping class applied by cart-bounce.js. Exit animation deferred. */
#cart-icon-bubble .cart-count-bubble.is-popping {
  animation: pickmix-bubble-in 0.3s cubic-bezier(0, 0, 0.2, 1);
  transform-origin: center;
}
@keyframes pickmix-bubble-in {
  from { transform: scale(0) rotate(-180deg); }
  to   { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  #cart-icon-bubble.is-bouncing,
  #cart-icon-bubble .cart-count-bubble.is-popping {
    animation: none;
  }
}

/* Search icon - mint/sky gradient */
.header__search {
  background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(125,211,252,0.12));
  border-radius: 0.75rem;
}

.header__search:hover {
  background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(125,211,252,0.2));
}

/* ===== HERO / BANNER - Light pastel feel ===== */
/* Remove dark overlay from banners */
.banner::after {
  opacity: 0 !important;
}

.banner__box {
  background: rgba(254, 253, 251, 0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(233, 30, 99, 0.1) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.06) !important;
}

/* Make banner background lighter when no image */
.banner .placeholder-svg {
  opacity: 0.15;
}

/* ===== OVERALL LIGHTNESS ===== */
/* Ensure the body feels warm and light */
body {
  background-color: #FEFDFB !important;
}

/* All sections should feel airy */
.spaced-section,
.shopify-section {
  background-color: transparent;
}

/* Softer section borders */
.section-template--*-padding {
  border: none;
}

/* Image with text sections - remove harsh borders */
.image-with-text .content-container {
  border: 1px solid rgba(233, 30, 99, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(254, 253, 251, 0.9) !important;
}

/* Multicolumn - lighter feel */
.multicolumn-list__item {
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.multicolumn-list__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
}

/* ===== ANNOUNCEMENT BAR - ensure raspberry ===== */
.utility-bar,
.utility-bar .color-scheme-4 {
  background-color: #E91E63 !important;
  background: #E91E63 !important;
}

.utility-bar * {
  color: white !important;
}

/* ===== Clean Candy Promise badges styling ===== */
.multicolumn .multicolumn-list__item .multicolumn-card__info h3 {
  font-size: 1.1rem;
}

/* ===== Overall section background alternation ===== */
/* Cream backgrounds for even visual rhythm */
.shopify-section:nth-child(even) {
  background-color: rgba(250, 247, 242, 0.4);
}

/* =================================================================
   PRODUCT CARDS — Uniform sizing to match live scandisweetshop.com
   ================================================================= */

/* 1. Force a square (1:1) aspect ratio on every product card image,
      overriding the per-product --ratio-percent that Taste injects. */
.card-wrapper .card--standard .card__inner.ratio::before,
.card-wrapper .card--media.ratio::before,
.card-wrapper .card.ratio::before {
  padding-bottom: 100% !important; /* 1:1 square */
}

.card-wrapper .card--standard .card__inner.ratio,
.card-wrapper .card--media.ratio,
.card-wrapper .card.ratio {
  --ratio-percent: 100% !important;
}

/* 2. All card images: object-fit contain so full product is visible */
.card__media img,
.card .media img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px;
}

/* 3. Image container: clip overflow and round the top corners */
.card .card__inner .card__media {
  overflow: hidden;
  border-radius: 12px 12px 0 0 !important;
  background: #f9f9f9;
}

/* Stand-alone media container must fill its ratio box */
.card__media,
.card .media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f9f9f9;
}

/* 4. Card wrapper — equal-height via flex stretch */
.product-grid .grid__item,
.collection-product-list .grid__item,
ul.grid .grid__item {
  display: flex;
  flex-direction: column;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: visible !important;
  padding-bottom: 4px !important;
}

.card-wrapper .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: visible !important;
}

.product-card-wrapper {
  overflow: visible !important;
}

.card-wrapper .card .card__inner {
  flex: 0 0 auto;        /* image area: fixed by ratio */
}

.card-wrapper .card .card__content {
  flex: 1 1 auto;        /* text area: stretches to fill */
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem 1rem;
}

/* 5. Align text within the content area */
.card-wrapper .card .card__content .card__information {
  flex: 1 1 auto;        /* pushes price to the bottom */
  display: flex;
  flex-direction: column;
}

.card-wrapper .card .card__content .card__heading {
  font-family: 'Nunito', sans-serif !important;
  /* Lovable parity: ProductCard.tsx product titles are font-bold (700).
     Existing 700 declaration was getting beaten somewhere downstream
     (live computed 600); !important locks it in. */
  font-weight: 700 !important;
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Vendor / subtitle text */
.card-wrapper .card .card__content .card-information__wrapper {
  margin-top: auto;       /* pins price to the bottom */
  padding-top: 0.5rem;
}

.card-wrapper .card .card__content .price {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  color: var(--candy-raspberry, #E91E63);
}

/* 6. Badge positioning — inside the image area */
.card-wrapper .card .card__badge {
  z-index: 2;
}

/* 7. Quick-add button alignment */
.card-wrapper .quick-add {
  margin-top: auto;
}

/* 8. Hover — lift the whole card, zoom just the image */
.card-wrapper:hover .card__media img,
.card-wrapper:hover .media img {
  transform: scale(1.08);
  transition: transform 0.5s ease;
}

.card__media img,
.media img {
  transition: transform 0.5s ease;
}

/* 9. Secondary (hover) image also needs contain */
.card .media > img + img {
  object-fit: contain !important;
  padding: 8px;
}

/* =================================================================
   GLOBAL FIXES — Price formatting, logo, currency
   ================================================================= */

/* Price display: show as "69 kr" style, hide "From" prefix */
.price__container .price-item--regular,
.price__container .price-item--sale,
.card-information .price-item--regular,
.card-information .price-item--sale {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  color: var(--candy-raspberry, #E91E63) !important;
  /* Lovable parity: ProductCard.tsx card price = text-lg (18px) @ 700.
     Was 1.05rem (10.5px) — visibly too small to read as a price.
     !important because the bare 1.05rem was being beaten by nothing
     specific that I could find, but lock it in for safety. */
  font-size: 1.8rem !important;
}

/* Hide "From" text on product cards */
.price .price__container--on-sale .price-item--regular::before,
.price--on-sale .price-item--regular {
  text-decoration: line-through;
  opacity: 0.5;
}

/* Product page price — larger */
.product__info-wrapper .price-item--regular,
.product__info-wrapper .price-item--sale {
  /* Lovable parity: ProductDetail.tsx PDP price = text-3xl (30px) @ 700.
     Was 1.75rem (17.5px) — undersized for a buy-signal element. Bumped
     to 3rem (30px). !important preserved from prior author. */
  font-size: 3rem !important;
  color: var(--candy-raspberry, #E91E63) !important;
}

/* ===== Logo — force image display on all pages =====
   NOTE: rendered element is .header__heading-logo (Taste image_tag class in
   header.liquid). The historical .header__heading-logo-image selector was dead
   code since the initial commit — it constrained nothing, so the logo had no
   max-height and broke out of the header once the nav widened to 9 items
   (P0 2026-05-20). Corrected to the real class with a 56px cap. */
.header__heading-logo {
  display: block !important;
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain;
}

/* Hide text logo when image exists */
.header__heading-link .h2 {
  /* Only shows when no logo image uploaded */
}

/* ===== Remove ALL dark overlays on banners/heroes ===== */
.banner::after {
  display: none !important;
}

.banner__box.content-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Banner text styling when transparent */
.banner--desktop-transparent .banner__heading,
.banner--desktop-transparent .banner__text,
.banner--desktop-transparent .banner__buttons .button {
  text-shadow: none;
}

/* ===== Collection page banners — pastel gradient, no dark ===== */
.collection-hero__inner {
  background: linear-gradient(135deg, #FAF7F2, #FEFDFB) !important;
}

.collection-hero__title {
  color: var(--scandi-fg, #1F2937) !important;
}

.collection-hero__description {
  color: rgba(31, 41, 55, 0.7) !important;
}

/* ===== Uniform product images on collection grids ===== */
.collection-product-list .card-wrapper .card.ratio::before,
.collection-product-list .card-wrapper .card__inner.ratio::before {
  padding-bottom: 100% !important;
}

.collection-product-list .card__media img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px;
}

/* ===== About page styling ===== */
.template-page .rte h1,
.template-page .rte h2,
.template-page .rte h3 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  color: var(--scandi-fg, #1F2937);
}

.template-page .rte p {
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
  color: rgba(31, 41, 55, 0.75);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FAQ page styling ===== */
.collapsible-content .accordion__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.collapsible-content .accordion__content .rte {
  font-family: 'Inter', sans-serif;
  line-height: 1.75;
  color: rgba(31, 41, 55, 0.7);
}

.collapsible-content .accordion {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* ===== Search and predictive search ===== */
.predictive-search__result-group .predictive-search__item-heading {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
}

/* ===== Cart drawer price formatting ===== */
.cart-item__price .price,
.cart-item__discounted-prices .price,
.totals__total-value {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700;
  color: var(--candy-raspberry, #E91E63) !important;
}

/* ===== Mobile improvements ===== */
@media screen and (max-width: 749px) {
  /* Tighter card spacing on mobile */
  .product-grid .grid {
    gap: 0.75rem !important;
  }

  /* Smaller card heading on mobile */
  .card-wrapper .card .card__content .card__heading {
    font-size: 0.85rem;
  }

  /* Mobile price size */
  .card-information .price-item--regular,
  .card-information .price-item--sale {
    font-size: 0.95rem;
  }

  /* Header logo mobile */
  .header__heading-logo {
    max-height: 44px !important;
  }
}

/* Menu drawer override moved to inline <style> in header-drawer.liquid */

/* Hide announcement bar on mobile only */
@media screen and (max-width: 749px) {
  .announcement-bar-section {
    display: none !important;
  }
}

/* "Shop Best Sellers" hero button — restored 2026-04-07 */

/* Mobile product grid — disable peek slider, use wrapping 2-col grid */
@media screen and (max-width: 749px) {
  .product-grid.grid--2-col-tablet-down {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 0 1.5rem !important;
    gap: var(--grid-mobile-horizontal-spacing, 1rem) !important;
  }

  .product-grid.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing, 1rem) / 2) !important;
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing, 1rem) / 2) !important;
    flex: 0 0 calc(50% - var(--grid-mobile-horizontal-spacing, 1rem) / 2) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hide slider peek arrows/scrollbar on product grids */
  .product-grid.slider--tablet .slider-buttons,
  .product-grid.slider--tablet .slider-counter {
    display: none !important;
  }
}

/* ============================================================
   Product-card hover — Lovable shop/ProductCard.tsx parity
   (audit P1 "product-card hover overshoot" turned out to point at
   dead .product-card-hover CSS in Lovable; real ProductCard uses
   standard easeOut, NOT overshoot. See MEMORY-ACTIVE audit
   correction #4. This adds the 4 visible behaviours Taste was
   missing: image scale-1.1, title color shift, shadow growth,
   subtle gradient overlay. Card translateY-lift is already handled
   by Taste's animate--hover-vertical-lift theme setting.)
   ============================================================ */
@media (hover: hover) {
  /* Image zoom on hover (Lovable: group-hover:scale-110 over 700ms ease-out).
     Layers cleanly with Taste's existing media--hover-effect 2-image swap. */
  .card-wrapper:hover .card__media .media img {
    transform: scale(1.1);
  }
  .card__media .media img {
    transition: transform 700ms cubic-bezier(0, 0, 0.2, 1);
  }

  /* Title color → raspberry on hover (Lovable: group-hover:text-primary, 300ms).
     Targets card heading link AND link-wrapping headings.
     Uses --candy-raspberry (defined globally in scandi-custom.css), NOT
     --pm-raspberry (which only loads on the Pick & Mix page — same hex, but
     would resolve to inherit/unset elsewhere). */
  .card-wrapper:hover .card__heading a,
  .card-wrapper:hover a .card__heading,
  .card-wrapper:hover .card__heading {
    color: var(--candy-raspberry);
  }
  .card__heading a,
  a .card__heading,
  .card__heading {
    transition: color 300ms ease;
  }

  /* Card shadow growth on hover (Lovable: hover:shadow-lg hover:shadow-primary/10).
     Applies to the .card element (inner) not the wrapper, so the lift transform
     on .card-wrapper and the shadow on .card compose cleanly. */
  .card-wrapper .card {
    transition: box-shadow 300ms ease;
  }
  .card-wrapper:hover .card {
    box-shadow: 0 12px 32px rgba(233, 30, 99, 0.1);
  }

  /* Subtle gradient overlay — Lovable's `bg-gradient-to-t from-black/10 to-transparent`
     over the image, fades in over 300ms on card hover. Pseudo-element on .media
     (which already has position:relative; overflow:hidden) so no markup change.
     z-index 1 sits above image (z-index auto) — Taste's badges live in
     .card__content (separate stacking context), so no conflict. */
  .card__media .media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 1;
  }
  .card-wrapper:hover .card__media .media::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__media .media img,
  .card__heading a,
  a .card__heading,
  .card__heading,
  .card-wrapper .card,
  .card__media .media::after {
    transition: none;
  }
  .card-wrapper:hover .card__media .media img {
    transform: none;
  }
  .card-wrapper:hover .card__media .media::after {
    opacity: 0;
  }
}

/* ============================================================
   PDP accordion summary typography — Lovable parity
   (ProductDetail.tsx:335 AccordionTrigger = font-heading font-bold text-base)
   Live computed pre-fix was Nunito 600 / 19.5px (inherits from .h4 heading
   styles via the product__accordion markup shipped earlier today). Lovable
   spec is Nunito 700 / 16px. Locks weight to 700 and shrinks size to 16px
   (1.6rem at 62.5% root). Only targets product-page accordions — leaves
   FAQ / other accordions on their existing sizing.
   ============================================================ */
.product__accordion details summary .accordion__title {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
}

/* ==========================================================================
   32. PER-SECTION PASTEL GRADIENT TINTS  (Ship C — Lovable parity 2026-05-20)
   --------------------------------------------------------------------------
   Lovable's CategorySection components apply a soft pastel tint per section
   (bg-gradient-to-b from-candy-X/5 to-background). DealOfTheWeek uses a
   horizontal 3-stop rainbow (bg-gradient-to-r from-raspberry/10 via-lemon/10
   to-mint/10). These rules replicate that cascade on the Shopify side
   without touching templates/index.json or featured-collection.liquid.

   Mechanism: background-image overlay on top of the scheme background-color.
   The 5% / 10% rgba alpha lets the scheme color (scheme-1 warm-white,
   scheme-2 cream) show through; net visual = "scheme color with X tint".
   background-attachment: scroll prevents inheriting `.gradient`'s `fixed`
   from base.css:2934.

   Selector form: utility class (.scandi-bg-tint-X) for future Liquid use,
   PLUS attribute selector [id$="__sectionkey"] > [class*="color-scheme-"]
   to apply via section name without templates/index.json edits.

   best_sellers intentionally has NO tint (anchor section per Lovable spec).
   ========================================================================== */

.scandi-bg-tint-lemon,
[id$="__new_arrivals"] > [class*="color-scheme-"] {
  background-image: linear-gradient(180deg, rgba(var(--candy-lemon-rgb), 0.05), transparent);
  background-attachment: scroll;
}

.scandi-bg-tint-raspberry,
[id$="__snacks"] > [class*="color-scheme-"] {
  background-image: linear-gradient(180deg, rgba(var(--candy-raspberry-rgb), 0.05), transparent);
  background-attachment: scroll;
}

.scandi-bg-tint-sky,
[id$="__swedish_classics"] > [class*="color-scheme-"] {
  background-image: linear-gradient(180deg, rgba(var(--candy-sky-rgb), 0.05), transparent);
  background-attachment: scroll;
}

.scandi-bg-tint-rainbow,
[id$="__deals_of_the_week"] > [class*="color-scheme-"] {
  background-image: linear-gradient(
    90deg,
    rgba(var(--candy-raspberry-rgb), 0.10) 0%,
    rgba(var(--candy-lemon-rgb), 0.10) 50%,
    rgba(var(--candy-mint-rgb), 0.10) 100%
  );
  background-attachment: scroll;
}