@pradip1995/theme-sahsha 3.1.1 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/theme-sahsha",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Sahsha storefront theme — Impulse-based editorial layout, luxury nav, and brand tokens",
   "license": "MIT",
   "publishConfig": {

package/src/blocks/home/ShopByAge/collections-showcase-client.tsx

@@ -32,9 +32,16 @@ const CollectionsShowcaseClient = ({
 }: CollectionsShowcaseClientProps) => {
   const viewportRef = useRef<HTMLDivElement>(null)
   const [activeId, setActiveId] = useState(() => getDefaultActiveTabId(tabs))
+  const [contentAnimating, setContentAnimating] = useState(false)
 
   const activeProducts = productsByCollection[activeId] ?? []
 
+  const handleTabClick = (tabId: string) => {
+    if (tabId === activeId) return
+    setActiveId(tabId)
+    setContentAnimating(true)
+  }
+
   useEffect(() => {
     const viewport = viewportRef.current
     if (viewport) {
@@ -42,6 +49,13 @@ const CollectionsShowcaseClient = ({
     }
   }, [activeId])
 
+  useEffect(() => {
+    if (!contentAnimating) return
+
+    const timer = window.setTimeout(() => setContentAnimating(false), 360)
+    return () => window.clearTimeout(timer)
+  }, [contentAnimating, activeId])
+
   const scrollByPage = (direction: "prev" | "next") => {
     const viewport = viewportRef.current
     if (!viewport) return
@@ -69,9 +83,9 @@ const CollectionsShowcaseClient = ({
               type="button"
               className={`collections-showcase__tab${isActive ? " is-active" : ""}`}
               aria-current={isActive ? "true" : undefined}
-              onClick={() => setActiveId(tab.id)}
+              onClick={() => handleTabClick(tab.id)}
             >
-              {tab.title}
+              <span className="collections-showcase__tab-label">{tab.title}</span>
             </button>
           )
         })}
@@ -88,7 +102,12 @@ const CollectionsShowcaseClient = ({
         </button>
 
         <div ref={viewportRef} className="collections-showcase__viewport">
-          <div className="collections-showcase__track">
+          <div
+            key={activeId}
+            className={`collections-showcase__track${
+              contentAnimating ? " collections-showcase__track--enter" : ""
+            }`}
+          >
             {activeProducts.length > 0 ? (
               activeProducts.map((product) => (
                 <div key={product.id} className="collections-showcase__slide">

package/src/components/product-carousel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { HttpTypes } from "@medusajs/types"
 import type { ProductCardRating } from "@core/types/product-card"
@@ -12,36 +12,160 @@ type ProductCarouselProps = {
   ratings?: ProductCardRating[]
 }
 
+const AUTO_SCROLL_MS = 4200
+const AUTO_SCROLL_RESUME_MS = 5000
+
 const ProductCarousel = ({ products, region, ratings }: ProductCarouselProps) => {
   const viewportRef = useRef<HTMLDivElement>(null)
   const trackRef = useRef<HTMLDivElement>(null)
+  const pauseAutoScrollRef = useRef(false)
+  const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(true)
+  const [reduceMotion, setReduceMotion] = useState(false)
 
-  const scrollBySlide = (direction: "prev" | "next") => {
+  const getSlideStep = useCallback(() => {
     const viewport = viewportRef.current
     const track = trackRef.current
-    if (!viewport || !track) return
+    if (!viewport || !track) return 0
 
     const firstSlide = track.querySelector<HTMLElement>(".bestsellers-carousel__slide")
-    if (!firstSlide) return
+    if (!firstSlide) return viewport.clientWidth * 0.85
 
     const trackStyles = getComputedStyle(track)
     const gap =
       Number.parseFloat(trackStyles.columnGap || trackStyles.gap || "0") || 0
-    const slideStep = firstSlide.offsetWidth + gap
 
-    viewport.scrollBy({
-      left: direction === "next" ? slideStep : -slideStep,
-      behavior: "smooth",
-    })
-  }
+    return firstSlide.offsetWidth + gap
+  }, [])
+
+  const updateScrollState = useCallback(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const { scrollLeft, scrollWidth, clientWidth } = viewport
+    const maxScroll = scrollWidth - clientWidth
+
+    setCanScrollLeft(scrollLeft > 4)
+    setCanScrollRight(scrollLeft < maxScroll - 4)
+  }, [])
+
+  const pauseAutoScroll = useCallback(() => {
+    pauseAutoScrollRef.current = true
+
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current)
+    }
+
+    resumeTimerRef.current = setTimeout(() => {
+      pauseAutoScrollRef.current = false
+    }, AUTO_SCROLL_RESUME_MS)
+  }, [])
+
+  const scrollBySlide = useCallback(
+    (direction: "prev" | "next") => {
+      const viewport = viewportRef.current
+      if (!viewport) return
+
+      pauseAutoScroll()
+
+      const slideStep = getSlideStep()
+      viewport.scrollBy({
+        left: direction === "next" ? slideStep : -slideStep,
+        behavior: "smooth",
+      })
+    },
+    [getSlideStep, pauseAutoScroll]
+  )
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const update = () => setReduceMotion(media.matches)
+    update()
+    media.addEventListener("change", update)
+    return () => media.removeEventListener("change", update)
+  }, [])
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    updateScrollState()
+
+    const onScroll = () => updateScrollState()
+    viewport.addEventListener("scroll", onScroll, { passive: true })
+    window.addEventListener("resize", updateScrollState)
+
+    return () => {
+      viewport.removeEventListener("scroll", onScroll)
+      window.removeEventListener("resize", updateScrollState)
+    }
+  }, [products, updateScrollState])
+
+  useEffect(() => {
+    if (reduceMotion || products.length < 3) return
+
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const tick = () => {
+      if (pauseAutoScrollRef.current) return
+
+      const { scrollLeft, scrollWidth, clientWidth } = viewport
+      const maxScroll = scrollWidth - clientWidth
+      const step = getSlideStep()
+
+      if (maxScroll <= 0) return
+
+      if (scrollLeft >= maxScroll - 4) {
+        viewport.scrollTo({ left: 0, behavior: "smooth" })
+        return
+      }
+
+      viewport.scrollBy({ left: step, behavior: "smooth" })
+    }
+
+    const intervalId = window.setInterval(tick, AUTO_SCROLL_MS)
+
+    return () => window.clearInterval(intervalId)
+  }, [reduceMotion, products, getSlideStep])
+
+  useEffect(() => {
+    return () => {
+      if (resumeTimerRef.current) {
+        clearTimeout(resumeTimerRef.current)
+      }
+    }
+  }, [])
 
   return (
-    <div className="bestsellers-carousel">
+    <div
+      className="bestsellers-carousel"
+      onMouseEnter={pauseAutoScroll}
+      onTouchStart={pauseAutoScroll}
+      onPointerDown={pauseAutoScroll}
+    >
+      <div
+        className={`bestsellers-carousel__fade bestsellers-carousel__fade--left${
+          canScrollLeft ? " is-visible" : ""
+        }`}
+        aria-hidden
+      />
+      <div
+        className={`bestsellers-carousel__fade bestsellers-carousel__fade--right${
+          canScrollRight ? " is-visible" : ""
+        }`}
+        aria-hidden
+      />
+
       <button
         type="button"
-        className="bestsellers-carousel__nav bestsellers-carousel__nav--prev"
+        className={`bestsellers-carousel__nav bestsellers-carousel__nav--prev${
+          canScrollLeft ? "" : " is-hidden"
+        }`}
         onClick={() => scrollBySlide("prev")}
         aria-label="Previous products"
+        tabIndex={canScrollLeft ? 0 : -1}
       >
         <ChevronLeft size={20} strokeWidth={1.75} />
       </button>
@@ -66,9 +190,12 @@ const ProductCarousel = ({ products, region, ratings }: ProductCarouselProps) =>
 
       <button
         type="button"
-        className="bestsellers-carousel__nav bestsellers-carousel__nav--next"
+        className={`bestsellers-carousel__nav bestsellers-carousel__nav--next${
+          canScrollRight ? "" : " is-hidden"
+        }`}
         onClick={() => scrollBySlide("next")}
         aria-label="Next products"
+        tabIndex={canScrollRight ? 0 : -1}
       >
         <ChevronRight size={20} strokeWidth={1.75} />
       </button>

package/src/slots/product/ProductActions/ProductCTASection.tsx

@@ -99,13 +99,13 @@ export function ProductCTASection(props: ProductCTASectionProps) {
         </p>
       )}
 
-      <div className="flex items-stretch gap-3 w-full">
+      <div className="product-cta-row flex items-stretch gap-2 sm:gap-3 w-full flex-nowrap">
         {variantInCart ? (
           <div className="flex h-12 shrink-0 w-[120px] border border-brand-accent rounded-full overflow-hidden">
             <button
               onClick={handleDecreaseQuantity}
               disabled={isAdding}
-              className="w-10 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              className="w-10 flex items-center justify-center hover:bg-surface-muted disabled:opacity-50"
               aria-label="Decrease quantity"
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -118,7 +118,7 @@ export function ProductCTASection(props: ProductCTASectionProps) {
             <button
               onClick={handleIncreaseQuantity}
               disabled={isAdding || !inStock}
-              className="w-10 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              className="w-10 flex items-center justify-center hover:bg-surface-muted disabled:opacity-50"
               aria-label="Increase quantity"
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -170,63 +170,50 @@ export function ProductCTASection(props: ProductCTASectionProps) {
             data-ga-event="add_to_bag_click"
             data-ga-label={product.title || "Product"}
           >
-            {isAdding ? (
-              <span className="product-cta-btn__label">
-                <Spinner />
-              </span>
-            ) : (
-              <span className="product-cta-btn__label">
-                {!selectedVariant || !isValidVariant
-                  ? product.options?.every((opt) => options[opt.id])
-                    ? "Unavailable"
-                    : "Select options"
-                  : !inStock
-                    ? inventoryLimit !== null &&
-                      inventoryLimit + quantityInCart > 0 &&
-                      quantity > inventoryLimit
-                      ? inventoryLimit <= 0
-                        ? "Sold out"
-                        : "Max quantity reached"
-                      : "Sold out"
-                    : `Add to Cart${quantity > 1 ? ` (${quantity})` : ""}`}
-              </span>
-            )}
+            <span className="product-cta-btn__label whitespace-nowrap">
+              {isAdding ? (
+                "Adding..."
+              ) : !selectedVariant || !isValidVariant ? (
+                product.options?.every((opt) => options[opt.id]) ? (
+                  "Unavailable"
+                ) : (
+                  "Select options"
+                )
+              ) : !inStock ? (
+                inventoryLimit !== null &&
+                inventoryLimit + quantityInCart > 0 &&
+                quantity > inventoryLimit ? (
+                  inventoryLimit <= 0 ? (
+                    "Sold out"
+                  ) : (
+                    "Max quantity"
+                  )
+                ) : (
+                  "Sold out"
+                )
+              ) : (
+                `Add to Cart${quantity > 1 ? ` (${quantity})` : ""}`
+              )}
+            </span>
           </button>
         )}
-      </div>
 
-      <button
-        onClick={handleBuyNow}
-        disabled={
-          !inStock ||
-          !!disabled ||
-          isAdding ||
-          isBuyingNow ||
-          (!isValidVariant && product.options?.every((opt) => options[opt.id]))
-        }
-        className={`${btnBase} w-full product-cta-btn--primary`}
-      >
-        {isBuyingNow ? (
-          <span className="product-cta-btn__label">
-            <Spinner />
+        <button
+          onClick={handleBuyNow}
+          disabled={
+            !inStock ||
+            !!disabled ||
+            isAdding ||
+            isBuyingNow ||
+            (!isValidVariant && product.options?.every((opt) => options[opt.id]))
+          }
+          className={`${btnBase} flex-1 min-w-0 product-cta-btn--primary`}
+        >
+          <span className="product-cta-btn__label whitespace-nowrap">
+            {isBuyingNow ? "Processing..." : "Buy It Now"}
           </span>
-        ) : (
-          <span className="product-cta-btn__label">Buy It Now</span>
-        )}
-      </button>
+        </button>
+      </div>
     </div>
   )
 }
-
-function Spinner() {
-  return (
-    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  )
-}

package/src/slots/product/ProductActions/ProductDetailsSection.tsx

@@ -78,8 +78,8 @@ export function ProductDetailsSection({ product }: { product: HttpTypes.StorePro
     careGuide !== undefined &&
     String(careGuide).trim() !== ""
   const showProductDetails = hasProductDetailsContent(product)
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
-  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(true)
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(true)
   const [isCareGuideOpen, setIsCareGuideOpen] = useState(false)
 
   return (

package/src/slots/product/ProductCard/index.tsx

@@ -6,6 +6,7 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
 import { getProductPrice } from "@core/util/get-product-price"
 import { convertToLocale } from "@core/util/money"
 import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import { productCardImageProps } from "@lib/product-image"
 import ProductCardRatingDisplay from "@modules/common/components/product/product-card-rating"
 import WishlistIcon from "@modules/common/components/product/wishlist-icon"
 import {
@@ -128,10 +129,10 @@ export default function ProductCard({
           {thumbnail ? (
             <>
               <Image
+                {...productCardImageProps}
                 src={thumbnail}
                 alt={product.title || "Product"}
                 fill
-                sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
                 className={clx(
                   "object-cover transition-opacity duration-500",
                   imageHover && secondImage ? "opacity-0" : "opacity-100"
@@ -139,10 +140,10 @@ export default function ProductCard({
               />
               {secondImage && (
                 <Image
+                  {...productCardImageProps}
                   src={secondImage}
                   alt=""
                   fill
-                  sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
                   className={clx(
                     "object-cover transition-opacity duration-500",
                     imageHover ? "opacity-100" : "opacity-0"

package/src/tokens/theme.css

@@ -2583,9 +2583,21 @@ body.mobile-menu-open .promo-bar {
   }
 }
 
+@keyframes collections-showcase-tab-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .collections-showcase__tab {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0.4rem;
   border: none;
   background: none;
   cursor: pointer;
@@ -2597,22 +2609,83 @@ body.mobile-menu-open .promo-bar {
   line-height: 1.1;
   letter-spacing: 0.01em;
   color: #c8c8c8;
-  transition: color 0.25s ease, font-weight 0.25s ease;
+  position: relative;
+  transition:
+    color 0.28s ease,
+    transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
   -webkit-tap-highlight-color: transparent;
   outline: none;
   box-shadow: none;
 }
 
+.collections-showcase__tab-label {
+  display: inline-block;
+  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.collections-showcase__tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+
 .collections-showcase__tab.is-active {
   color: #1a1a1a;
   font-weight: 500;
 }
 
+.collections-showcase__tab.is-active::after {
+  transform: scaleX(1);
+}
+
 .collections-showcase__tab:hover:not(.is-active),
 .collections-showcase__tab:focus-visible:not(.is-active) {
   color: #9a9a9a;
 }
 
+.collections-showcase__tab:hover .collections-showcase__tab-label,
+.collections-showcase__tab:focus-visible .collections-showcase__tab-label {
+  transform: translateY(-1px);
+}
+
+.collections-showcase__tab:active .collections-showcase__tab-label {
+  transform: scale(0.96);
+}
+
+.collections-showcase__tab.is-active:active .collections-showcase__tab-label {
+  transform: scale(0.98);
+}
+
+.collections-showcase__track--enter {
+  animation: collections-showcase-tab-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collections-showcase__tab,
+  .collections-showcase__tab-label,
+  .collections-showcase__tab::after {
+    transition: none;
+  }
+
+  .collections-showcase__tab:hover .collections-showcase__tab-label,
+  .collections-showcase__tab:focus-visible .collections-showcase__tab-label,
+  .collections-showcase__tab:active .collections-showcase__tab-label {
+    transform: none;
+  }
+
+  .collections-showcase__track--enter {
+    animation: none;
+  }
+}
+
 .collections-showcase__tab:focus,
 .collections-showcase__tab:focus-visible {
   outline: none;
@@ -3038,7 +3111,10 @@ body.mobile-menu-open .promo-bar {
   overflow: hidden;
   background: var(--color-brand-cream);
   box-shadow: 0 4px 20px rgba(90, 42, 67, 0.07);
-  transition: box-shadow 0.4s ease, transform 0.4s ease;
+  transform-origin: center;
+  transition:
+    box-shadow 0.35s ease,
+    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
 }
 
 .shop-by-category__card--top .shop-by-category__frame,
@@ -3048,7 +3124,13 @@ body.mobile-menu-open .promo-bar {
 
 .shop-by-category__card:hover .shop-by-category__frame {
   box-shadow: 0 12px 36px rgba(90, 42, 67, 0.15);
-  transform: translateY(-3px);
+  transform: translateY(-3px) scale(1.02);
+}
+
+.shop-by-category__card:active .shop-by-category__frame {
+  box-shadow: 0 6px 24px rgba(90, 42, 67, 0.12);
+  transform: translateY(-1px) scale(0.98);
+  transition-duration: 0.15s;
 }
 
 .shop-by-category__image {
@@ -3219,6 +3301,25 @@ body.mobile-menu-open .promo-bar {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .shop-by-category__frame,
+  .shop-by-category__image,
+  .shop-by-category__overlay,
+  .shop-by-category__count,
+  .shop-by-category__cta {
+    transition: none;
+  }
+
+  .shop-by-category__card:hover .shop-by-category__frame,
+  .shop-by-category__card:active .shop-by-category__frame {
+    transform: none;
+  }
+
+  .shop-by-category__card:hover .shop-by-category__image {
+    transform: none;
+  }
+}
+
 /* ── Account login / register (Sahsha split layout) ──────── */
 .account-login {
   display: flex;
@@ -5215,22 +5316,31 @@ body.mobile-menu-open .promo-bar {
     align-items: flex-start;
   }
 
-  #product-gallery-container {
+  #product-gallery-container,
+  .product-images-sticky {
     position: sticky !important;
-    top: calc(var(--header-height) + var(--promo-bar-height, 0px) + 1rem) !important;
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 2rem);
-    overflow: hidden;
-    z-index: 1;
+    top: calc(var(--header-height) + var(--promo-bar-height, 0px) + 20px) !important;
+    align-self: flex-start !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    height: fit-content !important;
+    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 40px) !important;
+    overflow: visible !important;
+    z-index: 2;
   }
 
-  .product-details-column {
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 2rem);
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    padding-bottom: 1.5rem;
+  .product-details-column,
+  .product-details-scroll {
+    flex: 1;
+    min-width: 0;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+    overscroll-behavior: auto !important;
+    padding-bottom: 0 !important;
   }
 
   .product-details-column::-webkit-scrollbar {
@@ -5238,12 +5348,21 @@ body.mobile-menu-open .promo-bar {
   }
 
   .product-gallery__stage-img {
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 
   .product-gallery__thumbs--scrollable {
-    height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
+    height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 }
 
@@ -5275,15 +5394,18 @@ body.mobile-menu-open .promo-bar {
 @media (min-width: 1024px) {
   .product-gallery {
     display: grid;
-    grid-template-columns: 5.25rem minmax(0, 1fr);
+    grid-template-columns: 5.25rem auto;
     gap: 0.375rem;
     align-items: start;
+    width: fit-content;
+    max-width: 100%;
     background: #ffffff;
   }
 
   .product-gallery--single {
     display: block;
-    grid-template-columns: 1fr;
+    width: fit-content;
+    max-width: 100%;
   }
 
   .product-gallery__stage {
@@ -5308,8 +5430,14 @@ body.mobile-menu-open .promo-bar {
   }
 
   .product-gallery__thumbs--scrollable {
-    height: min(33.125rem, 95vh, 1200px);
-    max-height: min(33.125rem, 95vh, 1200px);
+    height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 
   .product-gallery__thumbs--static {
@@ -5359,16 +5487,18 @@ body.mobile-menu-open .promo-bar {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
   min-height: 0;
   overflow: visible;
 }
 
 .product-gallery__stage-img {
   display: block;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   height: auto !important;
-  max-height: min(95vh, 1200px);
+  max-height: min(70vh, 640px);
   object-fit: contain !important;
   object-position: center top;
 }
@@ -5912,6 +6042,45 @@ body.mobile-menu-open .promo-bar {
   color: #1a1a1a;
 }
 
+/* Single-line CTA row: qty + Add to Cart + Buy It Now (no slide animation) */
+.product-cta-row,
+.product-cta-row > .product-cta-btn {
+  flex-wrap: nowrap;
+}
+
+.product-cta-btn::before {
+  content: none !important;
+  display: none !important;
+}
+
+.product-cta-btn {
+  overflow: visible;
+}
+
+.product-cta-btn__label {
+  transition: none;
+}
+
+.product-cta-btn--primary:hover:not(:disabled) {
+  background: #4a2236 !important;
+  color: #ffffff !important;
+  border-color: #4a2236 !important;
+}
+
+.product-cta-btn--primary:hover:not(:disabled) .product-cta-btn__label {
+  color: #ffffff !important;
+}
+
+.product-cta-btn--secondary:hover:not(:disabled) {
+  background: #5a2a43 !important;
+  color: #ffffff !important;
+  border-color: #5a2a43 !important;
+}
+
+.product-cta-btn--secondary:hover:not(:disabled) .product-cta-btn__label {
+  color: #ffffff !important;
+}
+
 .product-details__spec-heading {
   margin: 1.25rem 0 0.85rem;
   font-family: var(--font-sans);
@@ -10977,17 +11146,77 @@ body.checkout-modal-open nav {
 .bestsellers-carousel {
   position: relative;
   container-type: inline-size;
-  overflow: hidden;
+}
+
+.new-arrivals .bestsellers-carousel,
+.bestsellers .bestsellers-carousel {
+  margin-inline: -0.5rem;
+  padding-inline: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .new-arrivals .bestsellers-carousel,
+  .bestsellers .bestsellers-carousel {
+    margin-inline: -0.75rem;
+    padding-inline: 0.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .new-arrivals .bestsellers-carousel,
+  .bestsellers .bestsellers-carousel {
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+  }
+}
+
+.bestsellers-carousel__fade {
+  position: absolute;
+  top: 0;
+  bottom: 0.25rem;
+  z-index: 1;
+  width: 2.5rem;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.bestsellers-carousel__fade.is-visible {
+  opacity: 1;
+}
+
+.bestsellers-carousel__fade--left {
+  left: 0;
+  background: linear-gradient(
+    to right,
+    var(--color-page-bg, #faf9f7) 0%,
+    transparent 100%
+  );
+}
+
+.bestsellers-carousel__fade--right {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--color-page-bg, #faf9f7) 0%,
+    transparent 100%
+  );
 }
 
 .bestsellers-carousel__viewport {
   overflow-x: auto;
   overflow-y: hidden;
-  scroll-snap-type: x mandatory;
+  scroll-snap-type: x proximity;
   scroll-behavior: smooth;
+  scroll-padding-inline: 0.5rem;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
+  cursor: grab;
+}
+
+.bestsellers-carousel__viewport:active {
+  cursor: grabbing;
 }
 
 .bestsellers-carousel__viewport::-webkit-scrollbar {
@@ -10999,11 +11228,13 @@ body.checkout-modal-open nav {
   gap: 0.75rem;
   width: max-content;
   padding-bottom: 0.25rem;
+  padding-inline-end: 0.5rem;
 }
 
 @media (min-width: 768px) {
   .bestsellers-carousel__track {
     gap: 1rem;
+    padding-inline-end: 1rem;
   }
 }
 
@@ -11014,7 +11245,6 @@ body.checkout-modal-open nav {
   min-width: 0;
   overflow: hidden;
   scroll-snap-align: start;
-  scroll-snap-stop: always;
 }
 
 .bestsellers-carousel__slide .product-card {
@@ -11083,6 +11313,12 @@ body.checkout-modal-open nav {
   transform: translateY(-1px);
 }
 
+.bestsellers-carousel__nav.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 /* ── Promotional Banners ─────────────────────────────────── */
 .promo-banners {
   width: 100%;