/* ============================================================ GOKOREAN STORE — CAROUSEL VERSION (MATCHES LIVE HTML) Applies ONLY when is present ============================================================ */ /* RESET OVERRIDES FROM home.css & sns.css */ body.storefront-page .gk-amazon-section, body.storefront-page .gk-category-block, body.storefront-page .gk-carousel, body.storefront-page .gk-product-card { all: unset; display: revert; } /* ============================================================ GLOBAL STORE LAYOUT ============================================================ */ body.storefront-page .gk-amazon-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 15px; box-sizing: border-box; } body.storefront-page .gk-category-block { margin-bottom: 50px; } /* ============================================================ CATEGORY HEADER ============================================================ */ body.storefront-page .gk-category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; } body.storefront-page .gk-category-icon { width: 42px; height: 42px; object-fit: contain; margin-right: 10px; } body.storefront-page .gk-category-title { font-size: 1.4rem; font-weight: 700; margin: 0; flex-grow: 1; } body.storefront-page .gk-view-all-btn { background: #007aff; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; text-decoration: none; white-space: nowrap; } body.storefront-page .gk-view-all-btn:hover { background: #005fcc; } /* ============================================================ CAROUSEL ============================================================ */ body.storefront-page .gk-carousel { position: relative; width: 100%; overflow: hidden; } body.storefront-page .gk-carousel-track { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 10px; } body.storefront-page .gk-carousel-track::-webkit-scrollbar { height: 6px; } body.storefront-page .gk-carousel-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } body.storefront-page .gk-carousel-btn { position: absolute; top: 40%; transform: translateY(-50%); background: #ffffffd9; border: 1px solid #ddd; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 10; } body.storefront-page .gk-left { left: -5px; } body.storefront-page .gk-right { right: -5px; } /* ============================================================ PRODUCT CARD — CAROUSEL VERSION ============================================================ */ body.storefront-page .gk-product-card { min-width: 220px; /* FIXED WIDTH — prevents squeezing */ max-width: 220px; background: #fff; border-radius: 10px; border: 1px solid #eee; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.06); transition: transform 0.2s ease; } body.storefront-page .gk-product-card:hover { transform: translateY(-4px); } body.storefront-page .gk-product-image-wrap { width: 100%; height: 180px; background: #fafafa; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; /* NEW — adds space below image */ } body.storefront-page .gk-product-image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; } body.storefront-page .gk-product-info { padding: 12px; } body.storefront-page .gk-product-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 14px 0; line-height: 1.25rem; min-height: 2.8rem; /* keeps 2 lines stable */ overflow: hidden; } body.storefront-page .gk-product-meta { display: flex; justify-content: space-between; margin-bottom: 14px; } body.storefront-page .gk-product-price { font-size: 1rem; font-weight: 700; color: #111; } body.storefront-page .gk-product-rating { font-size: 0.85rem; color: #ff9900; } /* Better-spaced, lighter Amazon button */ body.storefront-page .gk-product-cta { background: #007aff; color: #fff; text-align: center; padding: 6px 0; border-radius: 6px; font-size: 0.80rem; width: 70%; margin: 20px auto 0 auto; /* ← adds 10px space above */ display: block; } body.storefront-page .gk-product-cta:hover { background: #005fcc; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 600px) { body.storefront-page .gk-category-title { font-size: 1.2rem; } /* Slightly smaller cards on mobile */ body.storefront-page .gk-product-card { min-width: 180px; max-width: 180px; } body.storefront-page .gk-product-image-wrap { height: 150px; } }