/*
 * Whimsical Weirdos — UTP Live Recovery CSS 7.0.0
 * Full replacement for /templates/utpfoundation/css/template.css
 *
 * Purpose:
 * - restore the UTP row/module layer instead of fighting it
 * - restore the dark black/coral/gold header aesthetic
 * - keep logo, menu, search, cart, checkout, and account contained in the header row
 * - restore readable product/catalog cards
 * - restore footer structure and decorative heart layer
 * - remove destructive 6.x .ww-* header-only assumptions from the visual layer
 */

/* =========================================================
   Global theme tokens
   ========================================================= */

:root {
  --ww-black: #050506;
  --ww-ink: #101014;
  --ww-maroon: #1c0b0d;
  --ww-maroon-2: #2a1112;
  --ww-coral: #ff6f61;
  --ww-coral-2: #ff4f44;
  --ww-coral-dark: #5e211d;
  --ww-gold: #ffd166;
  --ww-gold-soft: rgba(255, 209, 102, .78);
  --ww-white: #fffaf6;
  --ww-soft-white: rgba(255, 250, 246, .88);
  --ww-card: #ffffff;
  --ww-card-text: #111827;
  --ww-muted-card: #4b5563;
  --ww-line: rgba(255, 111, 97, .26);
  --ww-line-gold: rgba(255, 209, 102, .25);
  --ww-shadow: 0 18px 44px rgba(0, 0, 0, .38);
  --ww-header-height: 116px;
  --ww-radius: 18px;
  --ww-radius-lg: 24px;
  --ww-font-body: Poppins, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ww-font-heading: "Playfair Display", Georgia, serif;
  --ww-heart-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='6' opacity='.46'%3E%3Cpath stroke='%23ff6f61' d='M58 120 22 84C4 66 20 38 44 54c6 4 11 11 14 19 3-8 8-15 14-19 24-16 40 12 22 30Z'/%3E%3Cpath stroke='%23ffd166' d='M128 118 94 84c-18-18-2-46 22-30 6 4 10 11 12 18 3-7 7-14 13-18 24-16 40 12 22 30Z'/%3E%3Cpath stroke='%23fffaf6' stroke-width='3' opacity='.42' d='M176 36l6 12 13 4-13 4-6 12-6-12-13-4 13-4Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================
   Hard reset of broken later shell assumptions
   ========================================================= */

#ww-header,
#ww-footer,
.ww-site-header,
.ww-site-main,
.ww-site-footer,
.ww-header-only-shell,
.ww-default-footer {
  all: revert;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ww-black) !important;
  color: var(--ww-white);
  font-family: var(--ww-font-body);
  overflow-x: hidden;
}

body.site,
body.utp-template,
body.utp-foundation-template {
  background:
    radial-gradient(circle at 12% 4%, rgba(255,111,97,.13), transparent 28%),
    radial-gradient(circle at 86% 2%, rgba(255,209,102,.08), transparent 24%),
    linear-gradient(180deg, #050506 0%, #0c0708 42%, #16090a 100%) !important;
  color: var(--ww-white) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  color: var(--ww-gold);
}

a:hover {
  color: var(--ww-white);
}

img {
  max-width: 100%;
  height: auto;
}

.utp-skip {
  position: absolute;
  left: -999px;
  top: auto;
}

.utp-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 999999;
  background: #fff;
  color: #111827;
  padding: 10px 14px;
  border-radius: 10px;
}

.utp-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 16%, rgba(255,111,97,.08), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(255,209,102,.06), transparent 24%),
    linear-gradient(180deg, rgba(5,5,6,.94), rgba(21,7,9,.98));
}

/* UTP base row/container/grid behavior */
.utp-row,
.un-row {
  position: relative;
  width: 100%;
  margin: 0;
}

.utp-container,
.un-container {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.utp-container-full {
  width: 100%;
  max-width: none;
  margin: 0;
}

.utp-grid,
.un-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.utp-position,
.un-position {
  min-width: 0;
}

/* =========================================================
   Header: restore image-3 style and stop module bleed
   ========================================================= */

.utp-row-header,
.un-row-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  min-height: var(--ww-header-height) !important;
  background:
    radial-gradient(circle at 8% 22%, rgba(255,111,97,.18), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(255,209,102,.10), transparent 24%),
    linear-gradient(90deg, rgba(4,4,5,.98) 0%, rgba(14,8,9,.98) 38%, rgba(86,34,31,.92) 72%, rgba(255,89,78,.78) 100%) !important;
  border-bottom: 1px solid rgba(255,111,97,.34);
  box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 24px rgba(255,111,97,.14);
  overflow: hidden !important;
}

.utp-row-header::before,
.un-row-header::before,
.utp-row-header::after,
.un-row-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.utp-row-header::before,
.un-row-header::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.78) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,209,102,.36) 1px, transparent 2px);
  background-size: 120px 92px, 220px 144px, 340px 220px;
  background-position: 18px 18px, 110px 42px, 220px 8px;
  opacity: .58;
}

.utp-row-header::after,
.un-row-header::after {
  background: linear-gradient(90deg, rgba(0,0,0,.34), transparent 52%, rgba(255,111,97,.10));
  opacity: .9;
}

.utp-row-header > .utp-container-full,
.utp-row-header > .un-container,
.un-row-header > .utp-container-full,
.un-row-header > .un-container {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.utp-row-header .utp-grid,
.un-row-header .utp-grid,
.utp-row-header .un-grid,
.un-row-header .un-grid {
  min-height: var(--ww-header-height);
  display: grid !important;
  grid-template-columns: minmax(148px, 190px) minmax(380px, 1fr) minmax(92px, 112px) minmax(52px, 60px) minmax(210px, 272px) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  align-items: center !important;
  padding: 10px clamp(22px, 3vw, 48px) !important;
}

/* Override inline UTP span values only inside the header row. */
.utp-row-header .un-position-logo,
.utp-row-header .utp-position[data-position="logo"] {
  grid-column: 1 !important;
}

.utp-row-header .un-position-menu,
.utp-row-header .utp-position[data-position="menu"] {
  grid-column: 2 !important;
}

.utp-row-header .un-position-cart,
.utp-row-header .utp-position[data-position="cart"] {
  grid-column: 3 !important;
}

.utp-row-header .un-position-logged-in-usermenu,
.utp-row-header .utp-position[data-position="logged-in-usermenu"] {
  grid-column: 4 !important;
}

.utp-row-header .un-position-search,
.utp-row-header .utp-position[data-position="search"] {
  grid-column: 5 !important;
}

/* Logo */
.utp-row-header .utp-position[data-position="logo"],
.utp-row-header .un-position-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.utp-row-header .utp-module-role-logo,
.utp-row-header .utp-brand,
.utp-row-header .utp-brand-fallback,
.utp-row-header .moduletable,
.utp-row-header .custom {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.utp-row-header .utp-brand {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 162px !important;
  text-decoration: none !important;
}

.utp-row-header .utp-brand-img,
.utp-row-header .utp-module-role-logo img,
.utp-row-header .un-position-logo img {
  display: block !important;
  max-height: 86px !important;
  max-width: 162px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.utp-row-header .utp-brand-text,
.utp-row-header .site-title,
.utp-row-header .site-description,
.utp-row-header .tagline,
.utp-row-header img + span,
.utp-row-header img ~ span {
  display: none !important;
}

/* Main menu */
.utp-row-header .utp-module-role-menu,
.utp-row-header .utp-module-role-menu .moduletable,
.utp-row-header .utp-module-role-menu ul,
.utp-row-header .mod-menu {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.utp-row-header .utp-module-role-menu ul,
.utp-row-header .mod-menu,
.utp-row-header .utp-default-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(28px, 4.2vw, 70px) !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}

.utp-row-header .utp-module-role-menu li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.utp-row-header .utp-module-role-menu a,
.utp-row-header .utp-default-nav a,
.utp-row-header .mod-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ww-gold) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 9px 10px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  text-decoration: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.58) !important;
  white-space: nowrap !important;
}

.utp-row-header .utp-module-role-menu li.active > a,
.utp-row-header .utp-module-role-menu li.current > a,
.utp-row-header .utp-module-role-menu a:hover,
.utp-row-header .utp-default-nav a:hover {
  color: var(--ww-white) !important;
  background: rgba(255,209,102,.12) !important;
}

/* Search */
.utp-row-header .utp-module-role-search,
.utp-row-header .utp-module-role-search nav,
.utp-row-header .utp-module-role-search search,
.utp-row-header .utp-module-role-search form,
.utp-row-header .utp-header-search {
  display: block !important;
  width: 100% !important;
  max-width: 272px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.utp-row-header .utp-module-role-search label,
.utp-row-header .utp-module-role-search .module-title,
.utp-row-header .utp-module-role-search h3,
.utp-row-header .finder,
.utp-row-header .visually-hidden.finder {
  display: none !important;
}

.utp-row-header .utp-module-role-search input[type="text"],
.utp-row-header .utp-module-role-search input[type="search"],
.utp-row-header .utp-header-search-input,
.utp-row-header .js-finder-search-query {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,111,97,.76) !important;
  background: rgba(5,5,7,.72) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) !important;
  font: 600 13px/38px var(--ww-font-body) !important;
}

.utp-row-header .utp-module-role-search input::placeholder,
.utp-row-header .utp-header-search-input::placeholder {
  color: rgba(255,250,246,.72) !important;
}

/* Cart / checkout icons */
.utp-row-header .utp-position[data-position="cart"],
.utp-row-header .un-position-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.utp-row-header .utp-position[data-position="cart"] .utp-native-module.utp-module-type-mod_custom {
  display: none !important;
}

.utp-row-header .uc-cart-module,
.utp-row-header .utp-header-icon-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.utp-row-header .uc-cart-module a,
.utp-row-header .utp-header-icon-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: rgba(255,209,102,.12) !important;
  border: 1px solid rgba(255,209,102,.24) !important;
  color: var(--ww-gold) !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
}

.utp-row-header .uc-cart-module a:hover,
.utp-row-header .utp-header-icon-pill:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ww-coral-2), var(--ww-coral)) !important;
}

.utp-row-header .uc-cart-module a::before,
.utp-row-header .utp-header-icon-pill::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.utp-row-header .uc-module-link::before,
.utp-row-header a[href*="view=cart"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l2.1 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.5L21 7H6M10 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M3 4h2l2.1 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 2-1.5L21 7H6M10 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
}

.utp-row-header .uc-module-button::before,
.utp-row-header a[href*="view=checkout"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M6 7h12l-1 14H7L6 7ZM9 7a3 3 0 0 1 6 0m-5.5 7 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M6 7h12l-1 14H7L6 7ZM9 7a3 3 0 0 1 6 0m-5.5 7 2 2 4-5'/%3E%3C/svg%3E");
}

/* Account: collapse the large user menu to one icon. */
.utp-row-header .utp-position[data-position="logged-in-usermenu"],
.utp-row-header .un-position-logged-in-usermenu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.utp-row-header .utp-module-role-account ul,
.utp-row-header .utp-module-role-account .mod-menu {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: hidden !important;
}

.utp-row-header .utp-module-role-account li {
  display: none !important;
}

.utp-row-header .utp-module-role-account li:first-child {
  display: block !important;
}

.utp-row-header .utp-module-role-account a,
.utp-row-header .utp-account-pill {
  position: relative !important;
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: rgba(255,209,102,.12) !important;
  border: 1px solid rgba(255,209,102,.24) !important;
  color: var(--ww-gold) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.utp-row-header .utp-module-role-account a::before,
.utp-row-header .utp-account-pill::before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

.utp-row-header .utp-status-dot {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(5,5,7,.82);
}

body.is-authenticated .utp-row-header .utp-status-dot {
  background: #31d158;
}

/* =========================================================
   Hero/showcase/feature rows
   ========================================================= */

.utp-row-showcase,
.utp-row-hero,
.utp-row-feature,
.utp-row-main {
  background:
    linear-gradient(180deg, rgba(9,5,7,.96), rgba(18,8,10,.98)),
    var(--ww-heart-pattern) !important;
  background-size: auto, 220px 160px !important;
  background-position: center, 0 0 !important;
  color: var(--ww-white) !important;
}

.utp-row-showcase,
.utp-row-hero {
  padding: clamp(26px, 3vw, 44px) 0;
}

.utp-row-showcase + .utp-row-hero {
  padding-top: 0;
}

.hero-container,
.hero-banner {
  width: min(100% - 32px, 980px) !important;
  margin-inline: auto !important;
}

.hero-container {
  display: block;
}

.hero-banner {
  position: relative !important;
  min-height: clamp(240px, 28vw, 360px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.32) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.hero-banner:not([style*="background-image"]) {
  background-image:
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.25)),
    url("/images/banners/valentines-banner.jpg") !important;
}

.hero-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.10) 48%, rgba(0,0,0,.42)),
    radial-gradient(circle at center, rgba(255,255,255,.10), transparent 58%) !important;
  z-index: 1 !important;
}

.hero-banner-content {
  position: relative !important;
  z-index: 2 !important;
  min-height: clamp(240px, 28vw, 360px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(24px, 4vw, 56px) !important;
  color: #fff !important;
}

.hero-banner-content h1 {
  margin: 0 0 12px !important;
  max-width: 760px !important;
  color: #fff !important;
  font-family: var(--ww-font-heading) !important;
  font-size: clamp(2rem, 4vw, 4.5rem) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 16px rgba(0,0,0,.68) !important;
}

.hero-banner-content p {
  margin: 0 0 18px !important;
  color: rgba(255,250,246,.92) !important;
  font-weight: 600 !important;
}

.hero-banner-content a,
.btn-cta,
.cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ww-coral-2), var(--ww-coral)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(255,111,97,.25) !important;
}

/* Featured module cards */
.utp-row-feature {
  padding: clamp(34px, 4vw, 60px) 0;
}

.uc-featured-items {
  width: min(100% - 32px, 1180px) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 3vw, 36px) !important;
  border-radius: var(--ww-radius-lg) !important;
  background: linear-gradient(135deg, rgba(13,10,12,.88), rgba(30,12,14,.78)) !important;
  border: 1px solid var(--ww-line) !important;
  box-shadow: var(--ww-shadow) !important;
}

.uc-featured-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

.uc-item-card,
.uc914-catalog-card {
  overflow: hidden !important;
}

/* =========================================================
   Unified Commerce catalog/detail surfaces
   ========================================================= */

.utp-row-main {
  padding: clamp(34px, 4vw, 62px) 0;
}

.utp-row-main > .utp-container,
.utp-row-main > .un-container {
  width: min(100% - 32px, 1180px) !important;
  max-width: 1180px !important;
}

.utp-component,
.un-component {
  width: 100%;
}

.uc914-wrap,
.uc914-wrap.uc-front,
.uc914-catalog-surface {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  color: var(--ww-card-text) !important;
}

.uc914-header,
.uc914-nav,
.uc914-catalog-card,
.uc914-card,
.uc914-table-wrap,
.uc914-empty {
  background: rgba(255,255,255,.96) !important;
  color: var(--ww-card-text) !important;
  border-radius: var(--ww-radius) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
}

.uc914-header {
  padding: clamp(18px, 2.2vw, 28px) !important;
  margin: 0 0 18px !important;
}

.uc914-header h1,
.uc914-header h2,
.uc914-header h3 {
  margin: 0 0 8px !important;
  color: var(--ww-card-text) !important;
  font-family: var(--ww-font-heading) !important;
  font-weight: 900 !important;
}

.uc914-header p {
  margin: 0 !important;
  color: var(--ww-muted-card) !important;
}

.uc914-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  margin: 0 0 18px !important;
}

.uc914-nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #1d4ed8 !important;
  background: #f8fafc !important;
  font-weight: 800 !important;
}

.uc914-nav a.active,
.uc914-nav a:hover {
  color: #fff !important;
  background: #1f2937 !important;
}

.uc914-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(250px, 1fr)) !important;
  gap: 22px !important;
}

.uc914-catalog-card,
.uc914-card {
  padding: 18px !important;
}

.uc914-catalog-image-frame,
.uc-item-image {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #f7f7f7 !important;
  border-radius: 12px !important;
  margin: 0 0 14px !important;
}

.uc914-catalog-image,
.uc914-catalog-image-frame img,
.uc-item-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 10px !important;
}

.uc914-catalog-card-title,
.uc914-catalog-card-title a,
.uc-item-title,
.uc-item-title a {
  color: var(--ww-card-text) !important;
  font-family: var(--ww-font-body) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.uc914-price,
.uc-item-price {
  color: #92400e !important;
  font-weight: 900 !important;
}

.uc914-card-actions,
.uc-item-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.uc914-btn,
.uc914-catalog-surface a.uc914-btn,
.uc914-catalog-surface button.uc914-btn,
.uc-view-item,
.uc-add-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid #111827 !important;
  background: #1f2937 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.uc914-btn.secondary,
.uc914-catalog-surface a.uc914-btn.secondary,
.uc-view-item {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
}

.uc914-btn:hover,
.uc-add-to-cart:hover {
  background: #374151 !important;
  color: #ffffff !important;
}

.uc914-btn.secondary:hover,
.uc-view-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* Product detail guard */
body.option-com_unifiedcommerce.view-product .uc914-wrap.uc-front,
body.option-com_unifiedcommerce.view-item .uc914-wrap.uc-front {
  display: grid !important;
  grid-template-columns: minmax(300px, 520px) minmax(320px, 1fr) !important;
  gap: clamp(22px, 3vw, 42px) !important;
  align-items: start !important;
}

body.option-com_unifiedcommerce.view-product .uc914-wrap.uc-front > .uc914-header,
body.option-com_unifiedcommerce.view-item .uc914-wrap.uc-front > .uc914-header {
  grid-column: 1 / -1 !important;
}

body.option-com_unifiedcommerce.view-product .uc914-card img,
body.option-com_unifiedcommerce.view-item .uc914-card img {
  max-height: min(64vh, 560px) !important;
  width: 100% !important;
  object-fit: contain !important;
}

/* Keep readable cards readable. */
.uc914-header :where(h1,h2,h3,h4,p,li,span,div,strong,em,small,label),
.uc914-card :where(h1,h2,h3,h4,p,li,span,div,strong,em,small,label),
.uc914-table-wrap :where(h1,h2,h3,h4,p,li,span,div,strong,em,small,label),
.uc914-empty :where(h1,h2,h3,h4,p,li,span,div,strong,em,small,label),
.uc914-catalog-card :where(h1,h2,h3,h4,p,li,span,div,strong,em,small,label) {
  color: inherit;
}

/* =========================================================
   Footer: restore actual UTP footer row and original module
   ========================================================= */

.utp-row-footer,
.un-row-footer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 92% 80%, rgba(255,111,97,.18), transparent 24%),
    radial-gradient(circle at 8% 24%, rgba(255,209,102,.08), transparent 22%),
    linear-gradient(135deg, rgba(16,10,12,.98) 0%, rgba(36,18,18,.97) 54%, rgba(64,27,22,.96) 100%) !important;
  color: var(--ww-white) !important;
  border-top: 1px solid rgba(255,111,97,.24) !important;
  overflow: hidden !important;
}

.utp-row-footer > .utp-container-full,
.utp-row-footer > .un-container,
.utp-row-footer .utp-grid,
.utp-row-footer .un-grid,
.utp-row-footer .utp-position,
.utp-row-footer .un-position {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.utp-row-footer .utp-native-module,
.utp-row-footer .moduletable,
.utp-row-footer .custom {
  margin: 0 !important;
}

/* Allergy strip footer module */
.utp-row-footer .moduletable.header-bar,
.utp-row-footer .header-bar {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px clamp(20px, 5vw, 84px) !important;
  background: rgba(8,6,7,.42) !important;
  color: var(--ww-soft-white) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.utp-row-footer .header-bar p {
  width: min(100%, 1120px) !important;
  margin: 0 auto !important;
  color: var(--ww-soft-white) !important;
  text-align: center !important;
  line-height: 1.55 !important;
}

.utp-row-footer .header-bar a {
  color: var(--ww-gold) !important;
  font-weight: 900 !important;
}

/* Original footer module */
.site-footer {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(42px, 4.5vw, 68px) clamp(24px, 6vw, 88px) 28px !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,111,97,.10), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(255,209,102,.08), transparent 24%),
    linear-gradient(135deg, rgba(14,9,11,.98) 0%, rgba(32,17,18,.98) 52%, rgba(67,28,24,.96) 100%) !important;
  color: var(--ww-white) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,209,102,.28) 1px, transparent 2px),
    var(--ww-heart-pattern) !important;
  background-size: 160px 120px, 260px 190px, 220px 160px !important;
  background-position: 18px 20px, 120px 72px, 0 0 !important;
  opacity: .32 !important;
}

.site-footer::after {
  content: "" !important;
  position: absolute !important;
  right: clamp(24px, 5vw, 82px) !important;
  bottom: clamp(14px, 3vw, 38px) !important;
  width: clamp(96px, 12vw, 180px) !important;
  height: clamp(90px, 11vw, 170px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .23 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='170' viewBox='0 0 180 170'%3E%3Cpath d='M90 150 28 88C-3 56 26 8 65 36c12 8 20 21 25 34 5-13 13-26 25-34 39-28 68 20 37 52Z' fill='none' stroke='%23ff6f61' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

.footer-heart-svg {
  position: absolute !important;
  z-index: -1 !important;
  width: clamp(90px, 12vw, 190px) !important;
  height: auto !important;
  fill: none !important;
  stroke: var(--ww-coral) !important;
  stroke-width: 8 !important;
  stroke-linejoin: round !important;
  opacity: .20 !important;
  pointer-events: none !important;
}

.footer-heart-svg-left {
  left: clamp(20px, 4vw, 70px) !important;
  top: clamp(18px, 3vw, 44px) !important;
  transform: rotate(-8deg) !important;
}

.footer-heart-svg-right {
  right: clamp(20px, 4vw, 70px) !important;
  bottom: clamp(18px, 3vw, 44px) !important;
  transform: rotate(7deg) scale(1.08) !important;
}

.site-footer .footer-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) minmax(240px, 1fr) !important;
  gap: clamp(32px, 5vw, 76px) !important;
  align-items: start !important;
  width: min(100%, 1160px) !important;
  margin: 0 auto clamp(22px, 3vw, 36px) !important;
  padding: 0 !important;
}

.site-footer .footer-col {
  min-width: 0 !important;
  color: var(--ww-white) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.site-footer .footer-col h4 {
  margin: 0 0 14px !important;
  color: var(--ww-white) !important;
  font-family: var(--ww-font-heading) !important;
  font-size: clamp(1.1rem, 1.45vw, 1.45rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
}

.site-footer .footer-col p {
  margin: 0 !important;
  color: var(--ww-soft-white) !important;
  line-height: 1.68 !important;
  max-width: 36rem !important;
}

.site-footer .footer-links ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.site-footer .footer-links li {
  margin: 0 0 9px !important;
  padding: 0 !important;
}

.site-footer .footer-links a,
.site-footer .footer-bottom a {
  color: var(--ww-gold) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.45) !important;
}

.site-footer .footer-links a:hover {
  color: var(--ww-white) !important;
}

.site-footer .subscribe-form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

.site-footer .subscribe-form input[type="email"] {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,111,97,.72) !important;
  background: rgba(5,5,7,.72) !important;
  color: #fff !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.42) !important;
}

.site-footer .subscribe-form input[type="email"]::placeholder {
  color: rgba(255,250,246,.68) !important;
}

.site-footer .subscribe-form button {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--ww-coral-2), var(--ww-coral)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  box-shadow: 0 12px 26px rgba(255,111,97,.22) !important;
}

.site-footer .footer-social {
  min-height: 18px !important;
  margin-top: 12px !important;
}

.site-footer .footer-bottom {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 1160px) !important;
  margin: 0 auto !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255,111,97,.20) !important;
  color: rgba(255,250,246,.84) !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* =========================================================
   Responsive rules
   ========================================================= */

@media (max-width: 1160px) {
  .utp-row-header .utp-grid,
  .un-row-header .utp-grid,
  .utp-row-header .un-grid,
  .un-row-header .un-grid {
    grid-template-columns: minmax(120px, 160px) 1fr minmax(160px, 260px) !important;
    grid-template-areas:
      "logo menu menu"
      "cart account search" !important;
    row-gap: 8px !important;
    min-height: 138px !important;
  }

  .utp-row-header .utp-position[data-position="logo"] { grid-area: logo !important; }
  .utp-row-header .utp-position[data-position="menu"] { grid-area: menu !important; }
  .utp-row-header .utp-position[data-position="cart"] { grid-area: cart !important; justify-content: flex-start !important; }
  .utp-row-header .utp-position[data-position="logged-in-usermenu"] { grid-area: account !important; justify-content: center !important; }
  .utp-row-header .utp-position[data-position="search"] { grid-area: search !important; }
}

@media (max-width: 900px) {
  .uc-featured-grid,
  .uc914-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.option-com_unifiedcommerce.view-product .uc914-wrap.uc-front,
  body.option-com_unifiedcommerce.view-item .uc914-wrap.uc-front {
    grid-template-columns: 1fr !important;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --ww-header-height: 92px;
  }

  .utp-row-header .utp-grid,
  .un-row-header .utp-grid,
  .utp-row-header .un-grid,
  .un-row-header .un-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "menu"
      "cart"
      "account"
      "search" !important;
    justify-items: center !important;
    min-height: auto !important;
    padding: 12px 18px !important;
  }

  .utp-row-header .utp-brand-img,
  .utp-row-header .utp-module-role-logo img {
    max-height: 64px !important;
  }

  .utp-row-header .utp-module-role-menu ul,
  .utp-row-header .mod-menu,
  .utp-row-header .utp-default-nav {
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
  }

  .utp-row-header .utp-module-role-search,
  .utp-row-header .utp-module-role-search form,
  .utp-row-header .utp-header-search {
    max-width: min(86vw, 320px) !important;
  }

  .uc-featured-grid,
  .uc914-catalog-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Whimsical Weirdos 7.0.2 — Header Flow Lock + Former Header Restore
   This block must stay at the very bottom of template.css.
   It corrects:
   - content sliding/flowing underneath the header
   - translucent header allowing content text to show through
   - incomplete former-header geometry restoration
   ========================================================= */

/* Stop inherited/fixed/absolute header behavior from earlier broken patches. */
html body .utp-row-header,
html body .un-row-header,
html body header.utp-row-header,
html body header.un-row-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 10000 !important;
  display: block !important;
  width: 100% !important;
  min-height: 104px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 9% 22%, rgba(255,111,97,.16), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255,209,102,.10), transparent 22%),
    linear-gradient(90deg, #050506 0%, #0b0607 34%, #281112 58%, #86382f 82%, #ff6f61 100%) !important;
  border-bottom: 1px solid rgba(255,111,97,.45) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 24px rgba(255,111,97,.16) !important;
}

/* Give the header a solid readability shield so page titles/cards cannot ghost through it. */
html body .utp-row-header::after,
html body .un-row-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.60) 42%, rgba(255,111,97,.26) 100%) !important;
}

/* Keep star/sparkle layer above background but below controls. */
html body .utp-row-header::before,
html body .un-row-header::before {
  z-index: 1 !important;
}

/* Header grid lock: logo | menu | controls. */
html body .utp-row-header > .utp-container-full,
html body .utp-row-header > .un-container,
html body .un-row-header > .utp-container-full,
html body .un-row-header > .un-container {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-grid,
html body .utp-row-header .un-grid,
html body .un-row-header .utp-grid,
html body .un-row-header .un-grid {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(142px, 178px) minmax(520px, 1fr) minmax(92px, 112px) minmax(52px, 60px) minmax(220px, 284px) !important;
  grid-template-areas: "logo menu cart account search" !important;
  align-items: center !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
  min-height: 104px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px clamp(26px, 3.2vw, 56px) !important;
  overflow: visible !important;
}

/* Assign actual UTP positions to the restored header grid. */
html body .utp-row-header .utp-position[data-position="logo"],
html body .utp-row-header .un-position-logo,
html body .un-row-header .utp-position[data-position="logo"],
html body .un-row-header .un-position-logo {
  grid-column: auto !important;
  grid-area: logo !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="menu"],
html body .utp-row-header .un-position-menu,
html body .un-row-header .utp-position[data-position="menu"],
html body .un-row-header .un-position-menu {
  grid-column: auto !important;
  grid-area: menu !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="cart"],
html body .utp-row-header .un-position-cart,
html body .un-row-header .utp-position[data-position="cart"],
html body .un-row-header .un-position-cart {
  grid-column: auto !important;
  grid-area: cart !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="logged-in-usermenu"],
html body .utp-row-header .un-position-logged-in-usermenu,
html body .un-row-header .utp-position[data-position="logged-in-usermenu"],
html body .un-row-header .un-position-logged-in-usermenu {
  grid-column: auto !important;
  grid-area: account !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="search"],
html body .utp-row-header .un-position-search,
html body .un-row-header .utp-position[data-position="search"],
html body .un-row-header .un-position-search {
  grid-column: auto !important;
  grid-area: search !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Restore logo scale and suppress unwanted text next to it. */
html body .utp-row-header .utp-module-role-logo,
html body .utp-row-header .utp-brand,
html body .utp-row-header .utp-brand-fallback,
html body .utp-row-header .custom,
html body .un-row-header .utp-module-role-logo,
html body .un-row-header .utp-brand,
html body .un-row-header .utp-brand-fallback,
html body .un-row-header .custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: 168px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .utp-row-header .utp-brand-img,
html body .utp-row-header .utp-module-role-logo img,
html body .utp-row-header .un-position-logo img,
html body .un-row-header .utp-brand-img,
html body .un-row-header .utp-module-role-logo img,
html body .un-row-header .un-position-logo img {
  display: block !important;
  max-height: 88px !important;
  max-width: 168px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .utp-row-header .utp-brand-text,
html body .utp-row-header .site-title,
html body .utp-row-header .site-description,
html body .utp-row-header .tagline,
html body .utp-row-header img + span,
html body .utp-row-header img ~ span,
html body .un-row-header .utp-brand-text,
html body .un-row-header .site-title,
html body .un-row-header .site-description,
html body .un-row-header .tagline,
html body .un-row-header img + span,
html body .un-row-header img ~ span {
  display: none !important;
}

/* Menu geometry: centered, no wrapping, gold. */
html body .utp-row-header .utp-module-role-menu ul,
html body .utp-row-header .mod-menu,
html body .utp-row-header .utp-default-nav,
html body .un-row-header .utp-module-role-menu ul,
html body .un-row-header .mod-menu,
html body .un-row-header .utp-default-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(36px, 4.8vw, 88px) !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .utp-row-header .utp-module-role-menu li,
html body .un-row-header .utp-module-role-menu li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-module-role-menu a,
html body .utp-row-header .utp-default-nav a,
html body .utp-row-header .mod-menu > li > a,
html body .un-row-header .utp-module-role-menu a,
html body .un-row-header .utp-default-nav a,
html body .un-row-header .mod-menu > li > a {
  color: var(--ww-gold, #ffd166) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 9px 10px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.62) !important;
  white-space: nowrap !important;
}

/* Restore header icons and prevent blank/white square controls. */
html body .utp-row-header .uc-cart-module a,
html body .utp-row-header .utp-header-icon-pill,
html body .utp-row-header .utp-module-role-account a,
html body .utp-row-header .utp-account-pill,
html body .un-row-header .uc-cart-module a,
html body .un-row-header .utp-header-icon-pill,
html body .un-row-header .utp-module-role-account a,
html body .un-row-header .utp-account-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,209,102,.26) !important;
  background: rgba(255,209,102,.12) !important;
  color: var(--ww-gold, #ffd166) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
}

/* Search box: stable right-side pill. */
html body .utp-row-header .utp-module-role-search,
html body .utp-row-header .utp-module-role-search form,
html body .utp-row-header .utp-header-search,
html body .un-row-header .utp-module-role-search,
html body .un-row-header .utp-module-role-search form,
html body .un-row-header .utp-header-search {
  display: block !important;
  width: 100% !important;
  max-width: 284px !important;
  min-width: 210px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .utp-row-header .utp-module-role-search input[type="text"],
html body .utp-row-header .utp-module-role-search input[type="search"],
html body .utp-row-header .utp-header-search-input,
html body .un-row-header .utp-module-role-search input[type="text"],
html body .un-row-header .utp-module-role-search input[type="search"],
html body .un-row-header .utp-header-search-input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,111,97,.76) !important;
  background: rgba(5,5,7,.78) !important;
  color: #fff !important;
  padding: 0 16px !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) !important;
}

/* Header must reserve real physical space before any visible row below it. */
html body .utp-row-header + .utp-row,
html body .utp-row-header + .un-row,
html body .un-row-header + .utp-row,
html body .un-row-header + .un-row,
html body .utp-row-header + main,
html body .un-row-header + main {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* Add separation to whichever UTP row follows the header without using index.php. */
html body .utp-row-header + .utp-row-showcase,
html body .utp-row-header + .utp-row-hero,
html body .utp-row-header + .utp-row-feature,
html body .utp-row-header + .utp-row-main,
html body .un-row-header + .utp-row-showcase,
html body .un-row-header + .utp-row-hero,
html body .un-row-header + .utp-row-feature,
html body .un-row-header + .utp-row-main {
  padding-top: clamp(28px, 3.2vw, 48px) !important;
}

/* If rows are absent and the component follows header directly, protect the component outlet. */
html body .utp-row-header ~ .utp-row-main,
html body .un-row-header ~ .utp-row-main,
html body .utp-row-main {
  clear: both !important;
}

/* Restore main section spacing and keep catalog/card title below the header. */
html body .utp-row-main,
html body .un-row-main,
html body main,
html body #content {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
}

/* Product/catalog views need extra top clearance because UC header cards sit near the top. */
html body.option-com_unifiedcommerce .utp-row-main,
html body.option-com_unifiedcommerce .un-row-main,
html body.option-com_unifiedcommerce main,
html body.option-com_unifiedcommerce #content {
  padding-top: clamp(34px, 4vw, 56px) !important;
}

/* Guard against any product title/header card hiding underneath sticky header. */
html body.option-com_unifiedcommerce .uc914-wrap,
html body.option-com_unifiedcommerce .uc914-wrap.uc-front,
html body.option-com_unifiedcommerce .uc914-catalog-surface {
  scroll-margin-top: 128px !important;
}

/* Product detail image should not overfill the screen. */
html body.option-com_unifiedcommerce.view-product .uc914-card img,
html body.option-com_unifiedcommerce.view-item .uc914-card img,
html body.option-com_unifiedcommerce.view-product .uc-item-page img,
html body.option-com_unifiedcommerce.view-item .uc-item-page img {
  width: auto !important;
  max-width: 100% !important;
  max-height: min(62vh, 520px) !important;
  object-fit: contain !important;
  margin-inline: auto !important;
}

/* Responsive correction for the locked header. */
@media (max-width: 1180px) {
  html body .utp-row-header .utp-grid,
  html body .utp-row-header .un-grid,
  html body .un-row-header .utp-grid,
  html body .un-row-header .un-grid {
    grid-template-columns: minmax(120px, 168px) 1fr minmax(220px, 284px) !important;
    grid-template-areas:
      "logo menu search"
      "logo cart account" !important;
    row-gap: 10px !important;
    min-height: 128px !important;
  }

  html body .utp-row-header .utp-position[data-position="cart"],
  html body .utp-row-header .un-position-cart,
  html body .un-row-header .utp-position[data-position="cart"],
  html body .un-row-header .un-position-cart {
    justify-content: flex-start !important;
  }

  html body .utp-row-header .utp-position[data-position="logged-in-usermenu"],
  html body .utp-row-header .un-position-logged-in-usermenu,
  html body .un-row-header .utp-position[data-position="logged-in-usermenu"],
  html body .un-row-header .un-position-logged-in-usermenu {
    justify-content: flex-end !important;
  }
}

@media (max-width: 760px) {
  html body .utp-row-header,
  html body .un-row-header {
    position: relative !important;
  }

  html body .utp-row-header .utp-grid,
  html body .utp-row-header .un-grid,
  html body .un-row-header .utp-grid,
  html body .un-row-header .un-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "menu"
      "cart"
      "account"
      "search" !important;
    justify-items: center !important;
    min-height: auto !important;
  }

  html body .utp-row-header .utp-module-role-menu ul,
  html body .utp-row-header .mod-menu,
  html body .utp-row-header .utp-default-nav,
  html body .un-row-header .utp-module-role-menu ul,
  html body .un-row-header .mod-menu,
  html body .un-row-header .utp-default-nav {
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
  }
}


/* =========================================================
   Whimsical Weirdos 7.0.3 — Header Links + No-Overlap + Single Footer Heart Layer
   Keep this block at the very bottom of template.css.
   ========================================================= */

/* Header must participate in normal page flow. This stops main/content rows from sliding under it. */
html body .utp-row-header,
html body .un-row-header,
html body header.utp-row-header,
html body header.un-row-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1000 !important;
  display: block !important;
  width: 100% !important;
  min-height: 104px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 9% 22%, rgba(255,111,97,.16), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255,209,102,.10), transparent 22%),
    linear-gradient(90deg, #050506 0%, #0b0607 34%, #281112 58%, #86382f 82%, #ff6f61 100%) !important;
  border-bottom: 1px solid rgba(255,111,97,.45) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.55), 0 0 24px rgba(255,111,97,.16) !important;
}

/* Opaque header shield. Content should never ghost through the header. */
html body .utp-row-header::after,
html body .un-row-header::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 42%, rgba(255,111,97,.30) 100%) !important;
}

html body .utp-row-header::before,
html body .un-row-header::before {
  z-index: 1 !important;
}

/* Header physical layout: logo | menu | cart | account | search. */
html body .utp-row-header > .utp-container-full,
html body .utp-row-header > .un-container,
html body .un-row-header > .utp-container-full,
html body .un-row-header > .un-container {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-grid,
html body .utp-row-header .un-grid,
html body .un-row-header .utp-grid,
html body .un-row-header .un-grid {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(140px, 178px) minmax(520px, 1fr) minmax(98px, 120px) minmax(52px, 60px) minmax(220px, 284px) !important;
  grid-template-areas: "logo menu cart account search" !important;
  align-items: center !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
  min-height: 104px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px clamp(26px, 3.2vw, 56px) !important;
}

/* Assign UTP positions exactly. */
html body .utp-row-header .utp-position[data-position="logo"],
html body .utp-row-header .un-position-logo,
html body .un-row-header .utp-position[data-position="logo"],
html body .un-row-header .un-position-logo {
  grid-area: logo !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="menu"],
html body .utp-row-header .un-position-menu,
html body .un-row-header .utp-position[data-position="menu"],
html body .un-row-header .un-position-menu {
  grid-area: menu !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="cart"],
html body .utp-row-header .un-position-cart,
html body .un-row-header .utp-position[data-position="cart"],
html body .un-row-header .un-position-cart {
  grid-area: cart !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="logged-in-usermenu"],
html body .utp-row-header .un-position-logged-in-usermenu,
html body .un-row-header .utp-position[data-position="logged-in-usermenu"],
html body .un-row-header .un-position-logged-in-usermenu {
  grid-area: account !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .utp-row-header .utp-position[data-position="search"],
html body .utp-row-header .un-position-search,
html body .un-row-header .utp-position[data-position="search"],
html body .un-row-header .un-position-search {
  grid-area: search !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo: visible, constrained, no text beside it. */
html body .utp-row-header .utp-module-role-logo,
html body .utp-row-header .utp-brand,
html body .utp-row-header .utp-brand-fallback,
html body .utp-row-header .custom,
html body .un-row-header .utp-module-role-logo,
html body .un-row-header .utp-brand,
html body .un-row-header .utp-brand-fallback,
html body .un-row-header .custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: 168px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .utp-row-header .utp-brand-img,
html body .utp-row-header .utp-module-role-logo img,
html body .utp-row-header .un-position-logo img,
html body .un-row-header .utp-brand-img,
html body .un-row-header .utp-module-role-logo img,
html body .un-row-header .un-position-logo img {
  display: block !important;
  max-height: 88px !important;
  max-width: 168px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .utp-row-header .utp-brand-text,
html body .utp-row-header .site-title,
html body .utp-row-header .site-description,
html body .utp-row-header .tagline,
html body .utp-row-header img + span,
html body .utp-row-header img ~ span,
html body .un-row-header .utp-brand-text,
html body .un-row-header .site-title,
html body .un-row-header .site-description,
html body .un-row-header .tagline,
html body .un-row-header img + span,
html body .un-row-header img ~ span {
  display: none !important;
}

/* Canonical header links: all four must be visible. */
html body .utp-row-header .utp-default-nav,
html body .un-row-header .utp-default-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(36px, 4.8vw, 88px) !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .utp-row-header .utp-default-nav a,
html body .un-row-header .utp-default-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ww-gold, #ffd166) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 9px 10px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.62) !important;
  white-space: nowrap !important;
}

/* Header icons: cart, checkout, login/account. */
html body .utp-row-header .utp-header-icon-nav,
html body .un-row-header .utp-header-icon-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body .utp-row-header .utp-header-icon-pill,
html body .utp-row-header .utp-account-pill,
html body .un-row-header .utp-header-icon-pill,
html body .un-row-header .utp-account-pill {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,209,102,.26) !important;
  background: rgba(255,209,102,.12) !important;
  color: var(--ww-gold, #ffd166) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
}

html body .utp-row-header .utp-header-svg,
html body .un-row-header .utp-header-svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .utp-row-header .utp-status-dot,
html body .un-row-header .utp-status-dot {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #ff3b30 !important;
  box-shadow: 0 0 0 2px rgba(5,5,7,.82) !important;
}

html body.is-authenticated .utp-row-header .utp-status-dot,
html body.is-authenticated .un-row-header .utp-status-dot {
  background: #31d158 !important;
}

/* Search: no loose label and no missing box. */
html body .utp-row-header .utp-header-search,
html body .un-row-header .utp-header-search {
  display: block !important;
  width: 100% !important;
  max-width: 284px !important;
  min-width: 210px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .utp-row-header .utp-header-search-input,
html body .un-row-header .utp-header-search-input {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,111,97,.76) !important;
  background: rgba(5,5,7,.78) !important;
  color: #fff !important;
  padding: 0 16px !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) !important;
}

html body .utp-row-header .utp-header-search-input::placeholder,
html body .un-row-header .utp-header-search-input::placeholder {
  color: rgba(255,250,246,.72) !important;
}

/* Real separation after header, without index.php placing modules. */
html body .utp-row-header + .utp-row,
html body .un-row-header + .utp-row,
html body .utp-row-header + .un-row,
html body .un-row-header + .un-row {
  margin-top: 0 !important;
}

html body .utp-row-header + .utp-row-showcase,
html body .utp-row-header + .utp-row-hero,
html body .utp-row-header + .utp-row-feature,
html body .utp-row-header + .utp-row-main,
html body .un-row-header + .utp-row-showcase,
html body .un-row-header + .utp-row-hero,
html body .un-row-header + .utp-row-feature,
html body .un-row-header + .utp-row-main {
  padding-top: clamp(28px, 3.2vw, 48px) !important;
}

/* Main/sidebar assignment guard: do not let sidebars overlay component content. */
html body .utp-row-main .utp-grid,
html body .utp-row-main .un-grid,
html body .un-row-main .utp-grid,
html body .un-row-main .un-grid {
  align-items: start !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

html body .utp-row-main .utp-position,
html body .utp-row-main .un-position,
html body .un-row-main .utp-position,
html body .un-row-main .un-position {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body .utp-row-main .un-position-left-sidebar,
html body .utp-row-main .un-position-right-sidebar,
html body .un-row-main .un-position-left-sidebar,
html body .un-row-main .un-position-right-sidebar {
  position: relative !important;
  z-index: 1 !important;
}

/* Footer: kill the double-heart stack. Use one clean decorative layer only. */
html body .utp-row-footer,
html body .un-row-footer {
  background:
    linear-gradient(135deg, rgba(16,10,12,.98) 0%, rgba(36,18,18,.97) 54%, rgba(64,27,22,.96) 100%) !important;
}

html body .site-footer {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,111,97,.10), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(255,209,102,.08), transparent 24%),
    linear-gradient(135deg, rgba(14,9,11,.98) 0%, rgba(32,17,18,.98) 52%, rgba(67,28,24,.96) 100%) !important;
}

/* Remove explicit SVG heart modules from prior packages so the footer does not double-render hearts. */
html body .site-footer .footer-heart-svg,
html body .site-footer svg.footer-heart-svg,
html body .utp-row-footer .footer-heart-svg,
html body .un-row-footer .footer-heart-svg {
  display: none !important;
}

/* No repeated heart pattern in the footer base. */
html body .site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,209,102,.28) 1px, transparent 2px) !important;
  background-size: 160px 120px, 260px 190px !important;
  background-position: 18px 20px, 120px 72px !important;
  opacity: .25 !important;
}

/* Single footer heart, lower right only. */
html body .site-footer::after {
  content: "" !important;
  position: absolute !important;
  right: clamp(24px, 5vw, 82px) !important;
  bottom: clamp(14px, 3vw, 38px) !important;
  width: clamp(104px, 12vw, 188px) !important;
  height: clamp(98px, 11vw, 176px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='176' viewBox='0 0 188 176'%3E%3Cpath d='M94 154 29 89C-3 56 27 7 68 36c12 8 20 22 26 36 6-14 14-28 26-36 41-29 71 20 39 53Z' fill='none' stroke='%23ff6f61' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

/* Footer structure should remain three clean columns. */
html body .site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) minmax(240px, 1fr) !important;
  gap: clamp(32px, 5vw, 76px) !important;
  align-items: start !important;
  width: min(100%, 1160px) !important;
  margin: 0 auto clamp(22px, 3vw, 36px) !important;
}

html body .site-footer .footer-bottom {
  width: min(100%, 1160px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Responsive header. */
@media (max-width: 1180px) {
  html body .utp-row-header .utp-grid,
  html body .utp-row-header .un-grid,
  html body .un-row-header .utp-grid,
  html body .un-row-header .un-grid {
    grid-template-columns: minmax(120px, 168px) 1fr minmax(220px, 284px) !important;
    grid-template-areas:
      "logo menu search"
      "logo cart account" !important;
    row-gap: 10px !important;
    min-height: 128px !important;
  }

  html body .utp-row-header .utp-position[data-position="cart"],
  html body .un-row-header .utp-position[data-position="cart"] {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  html body .utp-row-header .utp-grid,
  html body .utp-row-header .un-grid,
  html body .un-row-header .utp-grid,
  html body .un-row-header .un-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "menu"
      "cart"
      "account"
      "search" !important;
    justify-items: center !important;
    min-height: auto !important;
  }

  html body .utp-row-header .utp-default-nav,
  html body .un-row-header .utp-default-nav {
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
  }

  html body .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}