/* =========================
   LOGO (kept as-is)
========================= */
#logo {
  width: 300px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  image-rendering: auto;
  object-fit: contain;
  display: inline-block !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

/* =========================
   HERO / FLEXSLIDER
   (CHANGE: remove flicker animation + lock to single logo)
========================= */
.flexslider {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: 100%;
  height: 600px;
}

.flexslider::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);

  /* ✅ SINGLE LOGO (no flicker) */
  background-image: url('https://cdn.freewebstore.com/origin/1021818/hflogotemp2.svg?v=1766712222785');
  animation: none !important;

  opacity: 0.8; /* Desktop opacity control */
}

/* Mobile-only changes */
@media screen and (max-width: 768px) {
  .flexslider::after {
    width: 100px;  /* Shrink for mobile */
    height: 120px;
    opacity: 0.6;  /* Mobile opacity control */
  }
}

/* (Kept: keyframes still here, but no longer used by flexslider::after) */
@keyframes flickerLogos {
  0%, 90% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset9.svg?v=1750484835887');
    transform: translate(-50%, -50%) scale(1);
  }
  91%, 92% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset8.svg?v=1750484880152');
    transform: translate(-50%, -50%) scale(1.1);
  }
  93%, 100% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset9.svg?v=1750484835887');
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Floating animation separated (kept) */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =========================
   COPYRIGHT (kept)
========================= */
#copyright a[href*="freewebstore.com"] {
  display: none !important;
}

#copyright {
  color: transparent !important;
  position: relative;
}

/* =========================
   NAVIGATION LINKS (kept, but make text BLACK)
   (CHANGE: ensure nav text is black + header background transparent)
========================= */

/* ✅ Make the header/nav BACKGROUND transparent (only the background) */
#header3,
#header3_inner,
#header3_main_nav,
#header3_main_nav_outer,
#header3_main_nav_container,
#header3_main_nav_inner,
#header3_main_nav_inner ul,
#header3_main_nav_inner li {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ✅ Keep nav visible + clickable: DO NOT hide anything, just color the links */
#header3_main_nav_inner a {
  color: #000 !important;           /* ✅ BLACK text */
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

#header3_main_nav_inner a:hover {
  animation: pulse 0.3s ease forwards;
  color: #e60073 !important;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

#header3_main_nav_inner a.active {
  color: #00ccff !important;
  border-bottom: 2px solid #00ccff;
  font-weight: 700;
}

/* =========================
   HEADER LOGO AREA (CHANGE: single logo, no flashing)
========================= */
.header2_item_logo a {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;

  /* ✅ Single logo */
  background-image: url("https://cdn.freewebstore.com/origin/1021818/hflogotemp2.svg?v=1766712222785") !important;

  /* ✅ No flicker */
  animation: none !important;
}

.header2_item_logo a picture,
.header2_item_logo a img {
  display: none !important;
}

/* (Kept: keyframes still here, but no longer used by header logo) */
@keyframes logoFlash {
  0%   { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe1.svg?v=1750647257375"); }
  25%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe2.svg?v=1750647273643"); }
  50%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe4.svg?v=1750647292647"); }
  75%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe3.svg?v=1750647305582"); }
  100% { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe1.svg?v=1750647257375"); }
}

/* =========================
   FOOTER + FLOATING SVGs
   (CHANGE: footer background OFF-WHITE + smaller height)
========================= */

/* ✅ Easy footer color control */
:root {
  --footer-bg: #f8f7f2; /* off-white (change this anytime) */
}

/* STEP 1: Keep inner sections transparent so your floats can show */
footer,
#footer_links_container,
#newsletter_main_container,
#copyright,
#social_media_container,
.footer_links_section,
#newsletter,
.container {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ✅ Footer background (off-white) */
footer {
  background: var(--footer-bg) !important;
  position: relative;
  z-index: 0;
}

/* ✅ Make footer shorter */
footer {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

#footer_links_container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.footer_links_section {
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Remove “unneeded” blocks (most common: Newsletter + Account links) */
#newsletter_main_container,
#newsletter {
  display: none !important;
}

/* Optional: hide “MY ACCOUNT” / legal links column if it’s a footer section */
#footer_links_container .footer_links_section:last-child {
  display: none !important;
}

/* STEP 2: Floating SVG overlay (kept EXACT animation setup) */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  background-image:
    url("https://cdn.freewebstore.com/origin/1021818/hellokitty.svg?v=1750648678526"),
    url("https://cdn.freewebstore.com/origin/1021818/cat.svg?v=1750648717107"),
    url("https://cdn.freewebstore.com/origin/1021818/converse.svg?v=1750648732424"),
    url("https://cdn.freewebstore.com/origin/1021818/kitty.svg?v=1750648742007"),
    url("https://cdn.freewebstore.com/origin/1021818/misssixty.svg?v=1750648752191"),
    url("https://cdn.freewebstore.com/origin/1021818/stars.svg?v=1750648761658"),
    url("https://cdn.freewebstore.com/origin/1021818/stars_1.svg?v=1750648771625"),
    url("https://cdn.freewebstore.com/origin/1021818/copcopine.svg?v=1750648781574"),
    url("https://cdn.freewebstore.com/origin/1021818/diesel.svg?v=1750648792392"),
    url("https://cdn.freewebstore.com/origin/1021818/hg.svg?v=1750648801725"),
    url("https://cdn.freewebstore.com/origin/1021818/vans.svg?v=1750648811259");
  background-repeat: no-repeat;
  background-size: 75px;
  background-position:
    -200px 5vh,
    110vw 12vh,
    -150px 19vh,
    120vw 26vh,
    -100px 33vh,
    115vw 40vh,
    -130px 47vh,
    125vw 54vh,
    -170px 61vh,
    130vw 68vh,
    -150px 75vh,
    135vw 82vh,
    -100px 98vh;
  animation: float-1 60s linear 1,
             float-2 80s linear 2,
             float-3 90s linear 1,
             float-4 70s linear 1,
             float-5 100s linear 1,
             float-6 120s linear 2,
             float-7 85s linear 1,
             float-8 110s linear 1,
             float-9 95s linear 1,
             float-10 60s linear 2,
             float-11 105s linear 1,
             float-12 115s linear 2,
             float-13 55s linear 2;
}

/* STEP 3: Keyframe Animations (kept exactly) */
@keyframes float-1 { to { background-position: -120vw 5vh, -110vw 12vh, -100px 19vh, -90vw 26vh, -80px 33vh, -70vw 40vh, -130px 47vh, -125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-2 { to { background-position: 110vw 5vh, -10vw 12vh, -150px 19vh, 120vw 26vh, -100px 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-3 { to { background-position: -120vw 5vh, -110vw 12vh, -120vw 19vh, -120vw 26vh, -100px 33vh, -115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-4 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -100px 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-5 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-6 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-7 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-8 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-9 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-10 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -70vw 61vh, -80vw 68vh, -150px 75vh, 135vw 79vh, -20vw 89vh; } }
@keyframes float-11 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, 120vw 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-12 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -70vw 61vh, -80vw 68vh, -90vw 75vh, -100vw 82vh, -110vw 89vh; } }
@keyframes float-13 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, 120vw 75vh, 135vw 82vh, 120vw 89vh; } }

@media (max-width: 769px) {
  body::before {
    background-image:
      url("https://cdn.freewebstore.com/origin/1021818/hellokitty.svg?v=1750648678526"),
      url("https://cdn.freewebstore.com/origin/1021818/cat.svg?v=1750648717107"),
      url("https://cdn.freewebstore.com/origin/1021818/converse.svg?v=1750648732424");

    background-position:
      -200px 10vh,
      110vw 25vh,
      -150px 40vh;

    animation: float-1 60s linear 1,
               float-2 80s linear 2,
               float-3 90s linear 1;
  }
}

/* =========================
   FEATURED PRODUCTS: 3 across + 9:16 (or original) without cropping
   Paste at VERY BOTTOM of CSS
========================= */

/* 1) 3 across grid */
#featured_products_inner{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Tablet */
@media (max-width: 900px){
  #featured_products_inner{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 540px){
  #featured_products_inner{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Make each product card behave nicely */
#featured_products_inner .featured_product_item{
  width: 100% !important;
  margin: 10 !important;
}

/* 3) Choose ONE mode below:
   MODE A = 9:16 frame (portrait)
   MODE B = original ratio (no fixed frame)
*/

/* ✅ MODE B — ORIGINAL IMAGE RATIO (NO FRAME, NO CROP) */

#featured_products_inner .featured_product_item_image_container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

#featured_products_inner .featured_product_item_image_container img,
#featured_products_inner img.featured_product_item_image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}
/* =========================
   FEATURED PRODUCT IMAGES
   CONTAIN ONLY (INTERIOR ONLY)
   Layout ratio remains unchanged
========================= */

#featured_products_inner .featured_product_item_image_container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important; /* keeps card clean while growing */
}

#featured_products_inner .featured_product_item_image_container img,
#featured_products_inner img.featured_product_item_image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important; /* ✅ KEY LINE */
  display: block !important;
}
/* =========================
   NAVIGATION FONT SIZE
========================= */

#header3_main_nav_inner a {
  font-size: 15px !important;   /* ← change this number */
}
/* =========================
   NAVIGATION KERNING (LETTER-SPACING)
========================= */

#header3_main_nav_inner a {
  letter-spacing: 0.08em !important;  /* ← adjust this */
}