/* Samino — Custom Homepage Styles
   Companion to front-page.php. Tailwind handles utilities;
   this file holds animations, marquee, sliders, and hover effects. */

/* Set background on the root html element too so any page-load flash
   (before Tailwind CDN finishes generating utilities) shows our cream
   instead of Vamtam's default grey html bg leaking through. */
html { background-color: #FFF7E8 !important; }
/* Defensive: clip any stray horizontal overflow so the page never shows a
   blank gutter or empty bottom scroll bar. Some plugin or absolutely-positioned
   element can push past 100vw — this prevents the sidebar of white we'd
   otherwise see on the right edge. */
html, body { overflow-x: clip; }
/* Hide the scrollbar entirely — page still scrolls via wheel / touch / keys.
   Firefox uses `scrollbar-width: none`; Chrome/Edge/Safari hide via the
   webkit pseudo. */
html { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ====== Critical nav styles (FOUC guard) ======
   Tailwind CDN is async — until it injects its generated utility CSS,
   classes like w-full / fixed / bg-black/40 / backdrop-blur don't apply
   and the nav renders as a normal inline element with no bg. That's the
   "shadow" / weird state visible on first paint. Below we pre-apply the
   critical rules synchronously so the nav locks into place from frame 1. */
nav#navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  box-sizing: border-box;
}
nav#navbar.fixed,
nav#navbar[class*="fixed"] {
  position: fixed;
}
/* Dark translucent — used on the homepage hero scroll state only. */
nav#navbar[class*="bg-black/40"],
nav#navbar.bg-black\/40 {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Dark slate gray (brand-footer) — used on every non-hero page. */
nav#navbar[class*="bg-brand-footer"] {
  background-color: #38434A;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ====== Nav cart count badge ======
   Sits over the shopping-bag icon. Updates live via the
   woocommerce_add_to_cart_fragments filter (functions.php). */
.samino-nav-cart { position: relative; }
.samino-nav-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #FF8A5B;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 0 0 2px #38434A;
}
.samino-nav-cart-count.is-empty { display: none; }

/* Wishlist count badge — same shape as cart, sits over the heart icon. */
.samino-nav-wish { position: relative; }
.samino-nav-wish-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #FF8A5B;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 0 0 2px #38434A;
}
.samino-nav-wish-count.is-empty,
.samino-nav-wish-count:empty { display: none; }
/* WooSW writes the count straight into .woosw-count on add/remove. When it
   becomes 0, hide the badge — both via class toggle and content check. */
.woosw-count[data-count="0"],
.samino-nav-wish-count[data-count="0"] { display: none; }

/* WPC Smart Wishlist heart button — shared by every product card surface
   (homepage carousel, shop archive, related products, wishlist page). Lives
   in home.css (loaded on every design page) instead of shop.css so the
   heart fills correctly on the homepage too, where shop.css isn't enqueued.

   Defensive visibility rules so the plugin's JS can't blank out the heart
   even when it tacks on unexpected classes. */
.samino-wishlist-btn,
.samino-wishlist-btn .woosw-btn-icon,
.samino-wishlist-btn .woosw-btn-icon svg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1;
}
/* Subtle border so the white-on-white heart stays visible on light product
   shots (yellow/white outfits photographed on a clean studio backdrop). */
.samino-wishlist-btn {
  border: 1px solid #E5E7EB;
}
.samino-wishlist-btn:hover { border-color: #D1D5DB; }
.samino-wishlist-btn .woosw-btn-icon {
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}
.samino-wishlist-btn .woosw-btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Active state — heart fills with currentColor once .woosw-added is on the
   button (WooSW toggles this class via woosw_refresh_buttons). */
.woosw-btn.woosw-added,
.woosw-btn.woosw-adding,
.woosw-btn:hover {
  color: #FF8A5B;
}
.woosw-btn.woosw-added .woosw-btn-icon svg {
  fill: currentColor;
}
.woosw-btn.woosw-adding {
  opacity: 0.7;
  cursor: wait;
}

/* Inside the mobile drawer the count is just a small inline pill at the row's end. */
.samino-mobile-menu__wish-count {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #FF8A5B;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.samino-mobile-menu__wish-count:empty { display: none; }

/* ====== WC notices — branded banner ======
   Site-wide styling so notices look the same on cart, shop, account, etc.
   Outline is suppressed by default (WC auto-focuses for screen readers,
   which would paint a black ring); :focus-visible restores it for real
   keyboard navigation only. */
.woocommerce-notices-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 24px 0;
}
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  background: #FFF1EA;
  border: none;
  border-left: 4px solid #FF8A5B;
  border-radius: 10px;
  padding: 14px 18px 14px 20px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #1C1C1C;
  display: flex;
  align-items: center;
  gap: 12px;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", sans-serif;
}
.woocommerce-error {
  background: #FCEDE4;
  border-left-color: #B14B22;
  color: #B14B22;
}
.woocommerce-info {
  background: #EEF3F7;
  border-left-color: #5A7A8C;
}
/* Hide the legacy ::before icon WC tries to paint with its own font. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; }
/* Inline list items inside the notice. */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* "Undo?" / "View cart" links — pill-styled, pushed to the right. */
.woocommerce-message a,
.woocommerce-info a {
  margin-left: auto;
  padding: 6px 14px;
  background: #FF8A5B;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover {
  background: #1C1C1C;
}
/* No focus ring — WC `.focus()`'s the notice on render which Chrome treats
   as :focus-visible, painting an outline. The banner itself is the visual
   indicator; SR users still get the role="alert" announcement. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* Inner row layout — match the Tailwind classes on the nav inner div. */
nav#navbar > div {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  padding: 0.5rem 1rem 1rem;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  nav#navbar > div { padding: 0.5rem 2rem 1rem; }
}
/* Spacer that pushes content down on solid-nav pages. */
body > div[aria-hidden="true"].h-24 {
  height: 6rem;
  display: block;
}
body.samino-home {
  background-color: #FFF7E8 !important;
  color: #1C1C1C;
  -webkit-font-smoothing: antialiased;
}
/* Per-page bodies are also enforced so any custom child page bg wins
   over inherited theme colours. */
body.samino-shop,
body.samino-product,
body.samino-policy,
body.samino-contact-page,
body.samino-account-page,
body.samino-about-page,
body.samino-wishlist-page,
body.samino-cart-page,
body.samino-size-page,
body.samino-track-page,
body.samino-blog-page,
body.samino-checkout-page {
  background-color: #FFF7E8;
}

.font-marquee {
  font-family: "Lora", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.marquee-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
  background: #FFF7E8;
}

.marquee-content {
  display: flex;
  animation: scroll 20s linear infinite;
}

.marquee-content span {
  padding: 0 1rem;
}

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

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.bento-plus {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.slider-container { position: relative; width: 100%; overflow: hidden; }
.slider-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}

.testimonial-slide {
  flex-shrink: 0;
  padding: 0 12px;
  box-sizing: border-box;
  width: 100%;
  transition: opacity 0.45s ease;
}

@media (min-width: 768px) {
  .testimonial-slide { width: 85%; opacity: 0.35; }
  .testimonial-slide.is-active { opacity: 1; }
}
@media (min-width: 1024px) { .testimonial-slide { width: 72%; } }
@media (min-width: 1440px) { .testimonial-slide { width: 60%; } }

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D1D5DB;
  transition: all 0.2s;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #FF8A5B;
  width: 24px;
  border-radius: 4px;
}

.slider-arrow {
  background: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  border: 1px solid #E8E8E8;
}

.slider-arrow:hover {
  background: #FF8A5B;
  color: white;
  border-color: #FF8A5B;
}

.collection-row { width: 100%; overflow: hidden; }

.collection-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.collection-row--left  .collection-track { animation: collection-scroll-left  50s linear infinite; }
.collection-row--right .collection-track { animation: collection-scroll-right 50s linear infinite; }

.collection-row:hover .collection-track { animation-play-state: paused; }

.collection-item {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 290px);
  aspect-ratio: 1 / 1;
  margin-right: 8px;
  background-color: #e5e7eb;
  overflow: hidden;
}

.collection-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

@keyframes collection-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@keyframes collection-scroll-right {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .collection-row--left  .collection-track,
  .collection-row--right .collection-track { animation-duration: 200s; }
}

/* ====== Page animations ====== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-animate {
  opacity: 0;
  animation: fadeSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-animate-1 { animation-delay: 0.15s; }
.hero-animate-2 { animation-delay: 0.40s; }
.hero-animate-3 { animation-delay: 0.65s; }

/* Hero image slider — two slides crossfade, dot pagination. The gradient +
   text overlay sit fixed above the slides. */
.samino-hero__track {
  position: absolute;
  inset: 0;
}
.samino-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.samino-hero__slide.is-active { opacity: 1; }
.samino-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.samino-hero__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 10px;
}
.samino-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}
.samino-hero__dot.is-active {
  background: #fff;
  width: 26px;
}
@media (prefers-reduced-motion: reduce) {
  .samino-hero__slide { transition: none; }
}

/* Scroll-reveal — scoped to .home-page so shop/product pages (which also
   load this file for shared utilities) don't inherit the opacity:0 trap.
   home.js runs the IntersectionObserver only on the homepage anyway. */
body.home [data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
body.home [data-animate].is-visible { opacity: 1; transform: translateY(0); }

body.home [data-animate-delay="1"] { transition-delay: 0.08s; }
body.home [data-animate-delay="2"] { transition-delay: 0.16s; }
body.home [data-animate-delay="3"] { transition-delay: 0.24s; }
body.home [data-animate-delay="4"] { transition-delay: 0.32s; }
body.home [data-animate-delay="5"] { transition-delay: 0.40s; }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1); }
.hover-zoom:hover img { transform: scale(1.06); }

/* Product-card hover slideshow: gallery images are stacked absolute and
   crossfade between each other on hover, looping back to the first on
   mouse-out. Powered by the .samino-card-images block in home.js. */
.samino-card-images { position: relative; }
.samino-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.samino-card-img.is-active { opacity: 1; }
.samino-card-images:hover .samino-card-img.is-active { transform: scale(1.04); }

/* Product badge (top-left of card image). Set per product via the
   "Badges" taxonomy in the WP admin (Products → Badges). The brand
   gradient defaults to coral→orange; swap to a flat pink if the
   client confirms that style direction. */
.samino-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #FF8A5B 0%, #FFA500 100%);
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
/* Badge colour variants. Samino Print keeps the default orange gradient
   above; Heritage Print → purple; Limited run → logo pink. Applies to both
   the card badge and the product-detail eyebrow badge. */
.samino-card-badge.samino-badge--heritage,
.samino-product__eyebrow-badge.samino-badge--heritage {
  background: linear-gradient(135deg, #8E6BC8 0%, #6A4A9C 100%);
}
.samino-card-badge.samino-badge--limited,
.samino-product__eyebrow-badge.samino-badge--limited {
  background: linear-gradient(135deg, #F78DA0 0%, #EC6184 100%);
}

/* Inside a stacked group (shop card with Sale/Sold-out below), the wrapper
   already places it — strip the absolute positioning so it sits in flow. */
.samino-card-badge:not(:only-child),
.flex .samino-card-badge,
[class*="flex-col"] .samino-card-badge {
  position: static;
  top: auto;
  left: auto;
}

/* Post-add confirmation pill on shop / category cards. Sits in
   `.samino-cart-row` next to the morphed "View cart →" button. Same
   green palette as the product-detail pill. Hidden by default until
   shop.js flips its `hidden` attribute on add-to-cart success. */
.samino-card-added-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;        /* share row 50/50 with the View cart button */
  min-width: 0;
  padding: 0 10px;
  background: #E5F6EC;
  color: #2E7D4F;
  border: 1px solid #B4E0C2;
  border-radius: 0.25rem; /* matches Tailwind `rounded` on the button */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.samino-card-added-pill svg { stroke-width: 3; flex-shrink: 0; }
.samino-card-added-pill[hidden] { display: none; }

/* Suggestion-card image containers across pages need position: relative so
   the .samino-card-badge anchors to them like it does on shop / homepage cards. */
.samino-404__suggest-img,
.samino-wish__suggest-img,
.samino-cart__suggest-img { position: relative; }

/* Sale price formatting from samino_format_price() — used on product cards
   (homepage carousel, shop, related, suggestions) and the product detail page.
   `<del class="samino-price-was">` shows the regular price muted + struck.
   `<span class="samino-price-now">` keeps the brand-orange current price. */
.samino-price-was {
  color: #B5A682;
  font-weight: 400;
  text-decoration: line-through;
  margin-right: 6px;
}
.samino-price-now { color: inherit; }

/* Nav category link with hover dropdown for 3rd-level leaves.
   The wrapper is `position: relative` so the absolute panel anchors to it.
   Panel fades + shifts up subtly on hover; uses small typography + soft
   shadow + cream tint so it reads as part of the nav, not a popup. */
.samino-nav-cat {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.samino-nav-cat__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 200px;
  background: #fff;
  border: 1px solid #ECE6D7;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(28, 28, 28, 0.06);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
  z-index: 60;
}
.samino-nav-cat:hover > .samino-nav-cat__panel,
.samino-nav-cat:focus-within > .samino-nav-cat__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .18s ease, transform .22s ease, visibility 0s linear 0s;
}
/* Invisible hover-bridge so the cursor can travel from link to panel
   without crossing dead space. Only active when the panel is hovered (parent
   has `:hover`), so the bridge can't pre-trigger an open state. */
.samino-nav-cat:hover > .samino-nav-cat__panel::before {
  content: "";
  position: absolute;
  inset: -6px 0 100% 0;
}
.samino-nav-cat__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.samino-nav-cat__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #1C1C1C;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.samino-nav-cat__list a:hover { background: #F4F2EE; color: #1C1C1C; }
.samino-nav-cat__list em { display: none; }

/* Story video — YouTube minimal player (home.js). Autoplays muted; a full-size
   transparent .samino-video__toggle button toggles play/pause. The centered
   .samino-video__play circle is shown ONLY while paused (no button during play). */
.samino-video { position: relative; }
.samino-video__player,
.samino-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  z-index: 1;
}
/* Full-size click / keyboard target layered over the player. */
.samino-video__toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}
.samino-video__toggle:focus-visible {
  outline: 2px solid #FFB180;
  outline-offset: -4px;
}
.samino-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1C1C1C;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
  z-index: 2;
}
.samino-video__play::before {
  /* Pulsing ring — soft cue that the button's interactive without being noisy. */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: samino-video-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.samino-video__play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}
.samino-video__play svg {
  margin-left: 4px; /* visual-balance the right-pointing triangle */
}
.samino-video__play.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}
@keyframes samino-video-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.6); }
}
@media (max-width: 640px) {
  .samino-video__play { width: 64px; height: 64px; }
  .samino-video__play svg { width: 22px; height: 22px; }
}

.card-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.18);
}

/* Buy Now button on the homepage product cards ("What Moms Come Back For") */
.samino-card-buynow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 40px;
  margin-top: 2px;
  background: transparent;
  color: #1C1C1C;
  border: 1.5px solid #1C1C1C;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s, gap .2s;
}
.samino-card-buynow:hover {
  background: #1C1C1C;
  color: #fff;
  gap: 11px;
}
.samino-card-buynow svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-animate,
  body.home [data-animate] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hide Vamtam's scroll-to-top button (its CSS is dequeued so the bare
   markup leaks through as the literal text "top"). */
#scroll-to-top { display: none !important; }

/* ====================================================================
   Global search overlay (triggered from samino-nav search icon)
==================================================================== */

.samino-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 24px;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.samino-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.samino-search-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: pointer;
}
.samino-search-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  background: #FFF7E8;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 36px 80px -32px rgba(28, 28, 28, 0.5);
  transform: translateY(-12px);
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.samino-search-overlay.is-open .samino-search-overlay__panel {
  transform: translateY(0);
}
.samino-search-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 28, 28, 0.06);
  border: 0;
  border-radius: 50%;
  color: #1C1C1C;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.samino-search-overlay__close:hover {
  background: #1C1C1C;
  color: #fff;
}
.samino-search-overlay__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FF8A5B;
  font-weight: 700;
  margin-bottom: 10px;
}
.samino-search-overlay__title {
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 3.5vw, 34px);
  line-height: 1.15;
  color: #1C1C1C;
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}
.samino-search-overlay__form {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #ECE6D7;
  border-radius: 14px;
  padding: 6px 6px 6px 16px;
  transition: border-color .15s;
  margin-bottom: 22px;
}
.samino-search-overlay__form:focus-within {
  border-color: #FF8A5B;
}
.samino-search-overlay__icon {
  flex-shrink: 0;
  color: #7A7A7A;
}
.samino-search-overlay__form input[type="search"] {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 12px;
  font-size: 16px;
  color: #1C1C1C;
  font-family: inherit;
  min-width: 0;
}
.samino-search-overlay__form input[type="search"]::-webkit-search-cancel-button { display: none; }
.samino-search-overlay__submit {
  flex-shrink: 0;
  padding: 12px 22px;
  background: #1C1C1C;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.samino-search-overlay__submit:hover { background: #FF8A5B; }

/* Autocomplete results dropdown */
.samino-search-overlay__results {
  margin-top: -8px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid #ECE6D7;
  border-radius: 14px;
  padding: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.samino-search-overlay__results-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #7A7A7A;
  font-weight: 700;
  padding: 8px 10px;
  margin: 0;
}
.samino-search-overlay__result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, transform .15s;
}
.samino-search-overlay__result:hover {
  background: #FFF7E8;
}
.samino-search-overlay__result img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  object-position: top;
  background: #f3f0e7;
}
.samino-search-overlay__result > div { flex: 1; min-width: 0; }
.samino-search-overlay__result-cat {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF8A5B;
  font-weight: 700;
  margin: 0 0 2px;
}
.samino-search-overlay__result-title {
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1C;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.samino-search-overlay__result-price {
  font-size: 13px;
  font-weight: 700;
  color: #FFA500;
  margin: 0;
}
.samino-search-overlay__result svg {
  flex-shrink: 0;
  color: #C4C4C4;
  transition: color .15s, transform .15s;
}
.samino-search-overlay__result:hover svg {
  color: #FF8A5B;
  transform: translateX(2px);
}

.samino-search-overlay__see-all {
  display: block;
  text-align: center;
  padding: 14px 10px 8px;
  margin-top: 4px;
  border-top: 1px solid #ECE6D7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF8A5B;
  text-decoration: none;
}
.samino-search-overlay__see-all:hover { color: #1C1C1C; }

.samino-search-overlay__loading,
.samino-search-overlay__empty {
  padding: 20px;
  font-size: 13px;
  color: #7A7A7A;
  text-align: center;
  margin: 0;
}
.samino-search-overlay__empty a {
  color: #FF8A5B;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 138, 91, 0.4);
}

.samino-search-overlay__suggest-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #7A7A7A;
  font-weight: 700;
  margin-bottom: 12px;
}
.samino-search-overlay__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.samino-search-overlay__pills a {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ECE6D7;
  border-radius: 999px;
  font-size: 12px;
  color: #1C1C1C;
  text-decoration: none;
  transition: all .2s;
}
.samino-search-overlay__pills a:hover {
  background: #1C1C1C;
  color: #fff;
  border-color: #1C1C1C;
  transform: translateY(-1px);
}

/* ====== Mobile-only refinements ======
   Desktop layout stays exactly as above; this block only fires < 640px to
   prevent the search panel from being clipped or cramped on small phones. */
@media (max-width: 640px) {
  .samino-search-overlay {
    padding: 60px 12px 12px;
    align-items: flex-start;
  }
  .samino-search-overlay__panel {
    padding: 24px 18px 22px;
    border-radius: 18px;
  }
  .samino-search-overlay__close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
  .samino-search-overlay__eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    margin-bottom: 6px;
  }
  .samino-search-overlay__title {
    font-size: 22px;
    margin-bottom: 16px;
  }
  /* Stack the form vertically so the SEARCH button sits on its own row
     below the input. Icon overlays the input via absolute positioning so
     the input keeps its full row width. */
  .samino-search-overlay__form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    margin-bottom: 18px;
  }
  .samino-search-overlay__icon {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 1;
    pointer-events: none;
  }
  .samino-search-overlay__form input[type="search"] {
    width: 100%;
    background: #fff;
    border: 1.5px solid #ECE6D7;
    border-radius: 12px;
    padding: 12px 14px 12px 42px;     /* room for the icon on the left */
    font-size: 15px;
    transition: border-color .15s;
  }
  .samino-search-overlay__form input[type="search"]:focus {
    border-color: #FF8A5B;
    outline: 0;
  }
  .samino-search-overlay__submit {
    width: 100%;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  /* Pills label + pills row */
  .samino-search-overlay__suggest-label {
    margin-bottom: 8px;
  }
  .samino-search-overlay__pills a {
    padding: 7px 12px;
    font-size: 11px;
  }
  /* Results dropdown */
  .samino-search-overlay__results {
    max-height: 50vh;
    margin-bottom: 16px;
  }
  .samino-search-overlay__result { gap: 10px; padding: 8px; }
  .samino-search-overlay__result img { width: 48px; height: 48px; }
  .samino-search-overlay__result-title { font-size: 13px; }
  .samino-search-overlay__result-price { font-size: 12px; }
}

/* Tab toggle for "What Mums Come Back For" */
.samino-tab {
  width: 100px;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  background: transparent;
  border-right: 1px solid rgba(229, 231, 235, 0.8);
  transition: color .2s;
  cursor: pointer;
}
.samino-tab:last-child { border-right: 0; }
.samino-tab:hover { color: #0B1D35; }
.samino-tab.is-active {
  color: #0B1D35;
  background: rgba(255, 255, 255, 0.4);
}

.samino-track { display: none; }
.samino-track.is-active { display: flex; }

/* ====== Carousel prev / next arrow disabled state ======
   Arrows live in front-page.php (#productPrev / #productNext). home.js
   toggles the .is-disabled class based on each track's scroll position. */
#productPrev.is-disabled,
#productNext.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

/* ====== Mobile menu drawer ======
   Triggered from the hamburger icon in samino-nav.php (.lg:hidden only).
   Slide-in from the right with a dark backdrop. */
.samino-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.samino-mobile-menu[hidden] { display: none; }
.samino-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease;
}
.samino-mobile-menu.is-open .samino-mobile-menu__backdrop {
  opacity: 1;
}
.samino-mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 86%;
  max-width: 360px;
  background: #FFF7E8;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.samino-mobile-menu.is-open .samino-mobile-menu__panel {
  transform: translateX(0);
}
.samino-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  position: sticky;
  top: 0;
  background: #38434A;  /* match solid nav so the white-text logo reads */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
}
.samino-mobile-menu__logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}
.samino-mobile-menu__close {
  background: transparent;
  border: 0;
  padding: 4px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
  transition: color .15s;
}
.samino-mobile-menu__close:hover { color: #FF8A5B; }
.samino-mobile-menu__links {
  display: flex;
  flex-direction: column;
  padding: 18px 0 8px;
}
.samino-mobile-menu__links a {
  display: block;
  padding: 14px 24px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1C1C1C;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.samino-mobile-menu__links a:hover,
.samino-mobile-menu__links a:focus {
  background: rgba(255, 138, 91, 0.08);
  color: #FF8A5B;
}
.samino-mobile-menu__divider {
  height: 1px;
  background: #E8E8E8;
  margin: 8px 24px;
}

/* Tap-to-expand category groups in the mobile drawer.
   Tapping the row toggles the leaves below; tapping a leaf navigates. */
.samino-mobile-menu__group { display: block; }
.samino-mobile-menu__group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1C1C1C;
  user-select: none;
  transition: background .15s, color .15s;
}
.samino-mobile-menu__group summary::-webkit-details-marker { display: none; }
.samino-mobile-menu__group summary::marker { content: ""; }
.samino-mobile-menu__group summary:hover,
.samino-mobile-menu__group summary:focus {
  background: rgba(255, 138, 91, 0.08);
  color: #FF8A5B;
}
.samino-mobile-menu__chevron {
  display: inline-flex;
  color: #7A7A7A;
  transition: transform .2s ease;
}
.samino-mobile-menu__group[open] > summary .samino-mobile-menu__chevron {
  transform: rotate(180deg);
}
.samino-mobile-menu__sub {
  display: flex;
  flex-direction: column;
  background: rgba(255, 247, 232, 0.5);
  border-top: 1px solid #ECE6D7;
  border-bottom: 1px solid #ECE6D7;
}
.samino-mobile-menu__sub a {
  padding: 12px 24px 12px 40px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;
}
.samino-mobile-menu__sub-all {
  font-weight: 500 !important;
  color: #1C1C1C !important;
}
.samino-mobile-menu__wishlist {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 28px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1C1C1C;
  text-decoration: none;
  transition: color .15s;
}
.samino-mobile-menu__wishlist:hover { color: #FF8A5B; }

body.samino-mobile-menu-open { overflow: hidden; }

/* ============================================================
   404 page
   ============================================================ */

body.samino-404-page { background-color: #FFF7E8; }

.samino-404 {
  padding: 80px 24px 100px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 91, 0.08), transparent 60%),
    #FFF7E8;
}
.samino-404__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.samino-404__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #FF8A5B;
  font-weight: 600;
  margin: 0 0 14px;
}
.samino-404__title {
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  color: #1C1C1C;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.samino-404__sub {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  max-width: 560px;
  margin: 0 auto 32px;
}
.samino-404__cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 64px;
}
.samino-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.samino-404__btn--primary {
  background: #1C1C1C;
  color: #fff;
  border: 1.5px solid #1C1C1C;
}
.samino-404__btn--primary:hover { background: #FF8A5B; border-color: #FF8A5B; }
.samino-404__btn--ghost {
  background: transparent;
  color: #1C1C1C;
  border: 1.5px solid #1C1C1C;
}
.samino-404__btn--ghost:hover { background: #1C1C1C; color: #fff; }

/* Suggestion grid */
.samino-404__suggest {
  border-top: 1px solid #ECE6D7;
  padding-top: 36px;
  text-align: left;
}
.samino-404__suggest-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7A7A7A;
  font-weight: 500;
  margin: 0 0 18px;
  text-align: center;
}
.samino-404__suggest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.samino-404__suggest-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #ECE6D7;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.samino-404__suggest-card:hover {
  border-color: #FF8A5B;
  transform: translateY(-2px);
}
.samino-404__suggest-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #FFF7E8;
}
.samino-404__suggest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.samino-404__suggest-meta {
  padding: 12px 14px 14px;
}
.samino-404__suggest-title {
  font-size: 13px;
  font-weight: 500;
  color: #1C1C1C;
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.samino-404__suggest-price {
  font-size: 13px;
  font-weight: 600;
  color: #FF8A5B;
  margin: 0;
}

@media (max-width: 768px) {
  .samino-404 { padding: 56px 16px 72px; }
  .samino-404__cta { flex-direction: column; align-items: stretch; }
  .samino-404__btn { width: 100%; }
  .samino-404__suggest-grid { grid-template-columns: repeat(2, 1fr); }
}