@pradip1995/theme-sahsha 3.1.1 → 3.1.2

package/package.json

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

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

@@ -5215,22 +5215,28 @@ 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;
+    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;
+    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 {
@@ -5912,6 +5918,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);