ref_ecommerce.html

<!--
  BuildAI Reference: E-COMMERCE
  Upload to HuggingFace as: ref_ecommerce.html
-->

<!-- == PATTERN 1: NIKE/LUXURY DARK == -->
<style id="e1">
/* LUXURY DARK ECOMMERCE */
/* bg:#111 text:#fff font:Inter */
/* hero: grid 1fr 1fr align:center gap:40px */
/* h1: clamp(52px,8vw,110px) weight:900 tracking:-5px leading:0.95 uppercase */
/* product card: bg:#1a1a1a border-radius:16px overflow:hidden */
/* product card hover: scale(1.03) */
/* product img: height:280px object-fit:cover transition:transform 0.4s */
/* product card hover img: scale(1.08) */
/* sale badge: position:absolute top:12px left:12px bg:#ff3b3b color:#fff 11px weight:800 border-radius:999px */
/* wishlist btn: position:absolute top:12px right:12px w:32px h:32px bg:rgba(255,255,255,0.9) border-radius:50% */
/* btn add to cart: width:100% bg:#fff color:#111 border-radius:8px weight:700 hover:bg:#f5f5f5 */
/* price: 17px weight:800 / old price: 14px color:#555 text-decoration:line-through */
/* product grid: repeat(4,1fr) gap:20px */
.dark-product-card {
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s;
}
.dark-product-card:hover { transform: scale(1.03); }
.dark-product-img {
  width: 100%; height: 280px;
  object-fit: cover;
  transition: transform 0.4s;
}
.dark-product-card:hover .dark-product-img { transform: scale(1.08); }
</style>

<!-- == PATTERN 2: SHOPIFY CLEAN LIGHT == -->
<style id="e2">
/* SHOPIFY CLEAN CONVERSION */
/* bg:linear-gradient(135deg,#fef9f0,#fff8f5) */
/* hero: grid 1fr 1fr gap:60px align:center min-height:90vh */
/* h1: clamp(38px,5vw,64px) weight:900 tracking:-2.5px leading:1.05 color:#1a1a1a */
/* accent underline: text-decoration-color:#ff6b35 text-underline-offset:6px */
/* hero image: border-radius:24px box-shadow:0 40px 80px rgba(0,0,0,0.15) */
/* category grid: 4 cols */
/* cat card: border-radius:16px overflow:hidden aspect-ratio:3/4 position:relative */
/* cat overlay: linear-gradient(to top, rgba(0,0,0,0.7) transparent 50%) */
/* floating badge: bg:#fff border-radius:12px padding:10px 14px box-shadow:0 8px 30px rgba(0,0,0,0.12) */
.shopify-hero {
  background: linear-gradient(135deg,#fef9f0,#fff8f5);
}
.cat-card {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
  cursor: pointer;
}
.cat-card img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s; }
.cat-card:hover img { transform: scale(1.06); }
.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);
  display: flex; align-items: flex-end; padding: 20px;
}
</style>

<!-- == PATTERN 3: APPLE STORE MINIMAL == -->
<style id="e3">
/* APPLE STORE MINIMAL WHITE */
/* bg:#fbfbfd font: SF Pro / Inter */
/* hero: text-center padding:100px 24px 60px */
/* eyebrow: 13px weight:600 color:#6e6e73 letter-spacing:0.02em */
/* h1: clamp(40px,7vw,80px) weight:900 tracking:-3px leading:1.0 color:#1d1d1f */
/* product grid: 4 cols */
/* product card: bg:#fff border-radius:18px padding:24px text-align:center */
/* card hover: box-shadow 0 12px 40px rgba(0,0,0,0.1) */
/* product img: aspect-ratio:1 object-fit:contain */
/* add btn: bg:#0071e3 color:#fff border-radius:999px 13px weight:500 hover:#0077ed */
</style>

<!-- == PATTERN 4: FASHION/GLOSSIER == -->
<style id="e4">
/* LIFESTYLE FASHION BRAND */
/* bg:#fdf8f4 font:Playfair Display for headings Inter for body */
/* hero: grid 1fr 1fr min-height:100vh overflow:hidden */
/* hero text: bg:#fdf8f4 flex flex-col justify:center padding:80px 60px */
/* h1: clamp(36px,5vw,68px) weight:400 leading:1.15 color:#2d1f1a tracking:-1px */
/* h1 italic: font-style:italic color:#c9956c */
/* hero img: 100% height 100% object-fit:cover */
/* btn: bg:#2d1f1a color:#fdf8f4 border-radius:999px 14px weight:600 letter-spacing:0.03em */
/* product card: bg:#fff border-radius:20px overflow:hidden */
</style>

<!-- == PATTERN 5: FLASH SALE / HIGH ENERGY == -->
<style id="e5">
/* FLASH SALE HIGH ENERGY */
/* hero bg: radial-gradient rgba(148,0,255,0.25) + rgba(255,0,80,0.25) + #0a0a0a */
/* h1: clamp(52px,9vw,120px) weight:900 tracking:-5px leading:0.9 uppercase */
/* neon accent: color:#ff0050 text-shadow: 0 0 30px rgba(255,0,80,0.6) */
/* flash sale bar: bg:linear-gradient(90deg,#ff0000,#ff6b00,#ff0000) bg-size:200% animation:3s linear infinite */
/* countdown unit: bg:#232f3e color:#fff border-radius:6px padding:8px 12px */
/* countdown num: 22px weight:800 font:JetBrains Mono */
/* deal card: bg:rgba(255,255,255,0.05) border:1px solid rgba(255,255,255,0.1) border-radius:16px overflow:hidden */
/* sale badge: position:absolute top:10px right:10px bg:#ff0050 border-radius:999px 11px weight:900 */
.countdown-unit {
  background: #232f3e;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  min-width: 50px;
}
.countdown-num { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; }
</style>

<!-- == SHARED ECOMMERCE PATTERNS == -->
<style id="eshared">
/* PRODUCT GRID */
/* 4 cols: repeat(4,1fr) gap:20px */
/* 3 cols: repeat(3,1fr) gap:24px */
/* @media max-width:900px -> 2 cols */
/* @media max-width:500px -> 2 cols gap:12px */

/* RATING STARS */
/* color:#f59e0b font-size:13px */
/* count: 12px color:#888 */

/* WISHLIST HEART */
/* position:absolute top:12px right:12px */
/* w:32px h:32px bg:rgba(255,255,255,0.9) border-radius:50% */
/* backdrop-filter:blur(4px) hover:scale(1.15) */

/* CART TOAST */
/* position:fixed bottom:20px right:20px bg:#1a1a1a color:#fff */
/* border-radius:12px padding:14px 20px */
/* animation: translateY(20px) opacity:0 -> translateY(0) opacity:1 0.3s */

/* ADD TO CART BTN */
/* width:100% padding:12px bg:#0f0f0f color:#fff border:none border-radius:10px weight:600 */
/* hover: bg:#6366f1 transition:0.2s */
</style>