(home ads) and the catalog card */ article.shop-card:hover .product-media img, article.shop-card.home-ad:hover img, .product-card-link:hover .product-media img, .product-card-link:focus-visible .product-media img { transform: scale(1.05); } /* "Ver producto" reveal CTA — slides up on hover/keyboard focus, no JS */ .product-card-cta { align-items: center; background: var(--brand); border-radius: var(--radius-pill); bottom: var(--space-3); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 28%, transparent); color: #fff; display: inline-flex; font-size: var(--fs-sm); font-weight: var(--weight-black); gap: 6px; left: 50%; opacity: 0; padding: 8px 16px; pointer-events: none; position: absolute; transform: translate(-50%, 14px); transition: opacity var(--t-base), transform var(--t-base); white-space: nowrap; } .product-card-link:hover .product-card-cta, .product-card-link:focus-visible .product-card-cta { opacity: 1; transform: translate(-50%, 0); } .product-placeholder { color: var(--brand); font-size: 14px; font-weight: var(--weight-black); padding: 18px; text-align: center; } .product-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 14px 16px 16px; } .product-card-title { color: var(--ink); font-size: var(--fs-body); font-weight: var(--weight-bold); line-height: 1.32; margin: 0 0 var(--space-2); } .product-card-copy { color: var(--muted); flex-grow: 1; font-size: 14px; line-height: var(--leading-body); margin-bottom: 18px; } .product-card .price { background: transparent; color: var(--brand-dark); display: inline; font-size: 24px; font-weight: var(--weight-bold); line-height: 1.15; padding: 0; } .product-card-category { background: var(--brand-tint); border: 0; border-radius: var(--radius-xs); color: var(--brand-dark); font-size: 11px; letter-spacing: 0.02em; min-height: 0; padding: var(--space-1) 7px; text-transform: uppercase; width: fit-content; } .product-card-purchase { align-items: flex-start; display: grid; gap: var(--space-2); } .product-card-discount-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: var(--space-6); } .product-card-discount-row.is-empty { visibility: hidden; } .product-card-price-line { align-items: baseline; display: flex; flex-wrap: wrap; gap: 7px; } .product-card-link .product-card-body::after { content: none; } /* ========================================================================== HERO / STOREFRONT BANNER ========================================================================== */ .storefront-banner { background: var(--brand-dark); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); color: #fff; min-height: clamp(430px, 58vh, 620px); overflow: hidden; position: relative; } .storefront-banner::after { background: linear-gradient(90deg, rgba(15, 28, 24, 0.96), rgba(15, 28, 24, 0.72) 42%, rgba(15, 28, 24, 0.18)), linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 48%); content: ""; inset: 0; position: absolute; z-index: 0; } .storefront-banner img { height: 100%; inset: 0; object-fit: cover; opacity: 0.82; position: absolute; width: 100%; } .storefront-banner.storefront-banner-no-overlay::after { background: none !important; content: none !important; display: none !important; } .storefront-banner.storefront-banner-no-overlay img { opacity: 1 !important; } .storefront-banner-content, .fast-shop-hero-content { color: var(--hero-text-color, #ffffff); } .storefront-banner-content { display: flex; flex-direction: column; justify-content: flex-start; max-width: 880px; min-height: inherit; padding: clamp(48px, 7vw, 96px) clamp(34px, 6vw, 78px) clamp(34px, 6vw, 78px); position: relative; z-index: 1; } .storefront-banner .hero-kicker { color: color-mix(in srgb, var(--hero-text-color, #ffffff) 92%, transparent); } .storefront-banner h1, .fast-shop-hero h1 { color: var(--hero-text-color, #ffffff); } .storefront-banner h1 { font-size: clamp(44px, 8vw, var(--hero-title-size, 92px)); font-weight: var(--weight-black); line-height: 0.98; margin-bottom: var(--space-4); max-width: 900px; text-wrap: balance; } .storefront-banner p, .fast-shop-hero p { color: var(--hero-text-color, #ffffff); } .storefront-banner p { font-size: clamp(18px, 2vw, 23px); line-height: var(--leading-body); margin-bottom: var(--space-6); max-width: 700px; } .hero-kicker { background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--radius-pill); color: rgba(255, 255, 255, 0.92); display: inline-flex; font-size: var(--fs-sm); font-weight: var(--weight-black); margin-bottom: 18px; padding: var(--space-2) 13px; text-transform: uppercase; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero-trust-strip { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); max-width: 700px; padding: var(--space-3); } .hero-trust-strip span { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-sm); color: var(--brand-dark); font-size: var(--fs-sm); font-weight: var(--weight-black); padding: 9px var(--space-3); } /* Hero font variants (Django-controlled — do not rename) */ .hero-font-serif h1, .hero-font-serif p, .hero-font-serif .hero-kicker, .fast-shop-hero.hero-font-serif h1, .fast-shop-hero.hero-font-serif p { font-family: Georgia, 'Times New Roman', serif; } .hero-font-display h1, .fast-shop-hero.hero-font-display h1 { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: 0; text-transform: uppercase; } /* ========================================================================== HOME — CAROUSEL, BANDS, ADS, BENEFITS ========================================================================== */ .carousel-inner.shop-card { border: 0; box-shadow: var(--shadow-lift); } .home-slide { aspect-ratio: 16 / 5; background: #111b18; border-radius: var(--radius-lg); min-height: clamp(270px, 34vh, 390px); overflow: hidden; position: relative; } .home-slide::after { background: linear-gradient(90deg, rgba(14, 24, 21, 0.84), rgba(14, 24, 21, 0.38), rgba(14, 24, 21, 0.12)); content: ""; inset: 0; position: absolute; } .home-slide img { height: 100%; object-fit: cover; opacity: 0.9; width: 100%; } .home-slide-copy { bottom: 50%; color: #fff; left: 0; max-width: 720px; padding: 46px; position: absolute; right: 0; transform: translateY(50%); z-index: 1; } .home-slide-copy h1 { font-size: clamp(34px, 4vw, 54px); font-weight: var(--weight-black); line-height: 1; margin-bottom: var(--space-3); text-wrap: balance; } .home-slide-copy p { color: rgba(255, 255, 255, 0.88); font-size: 18px; margin-bottom: 18px; } .home-band { padding: 52px 0; } .home-promo-section, .featured-product-band, .about-band, .home-location-section, .contact-band, .home-ad-band { background: rgba(255, 255, 255, 0.64); border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: var(--space-6); padding: clamp(22px, 4vw, 40px); } .featured-product-band, .about-band, .contact-band { padding-top: clamp(30px, 5vw, 58px); padding-bottom: clamp(30px, 5vw, 58px); } .home-ad { background: var(--surface); border: 1px solid var(--line); height: 100%; } .home-ad img { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; } .home-ad .p-3 { padding: 18px !important; } .home-ad h2 { color: var(--ink); } .home-ad .meta { color: var(--muted); } .home-ad .shop-link { color: var(--brand); } /* --- About section ---------------------------------------------------- */ .about-band { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--soft) 70%, white), var(--surface)); border-color: color-mix(in srgb, var(--line) 80%, transparent); } .about-grid { align-items: start; display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; } .about-intro { max-width: 46ch; } .about-kicker { align-items: center; color: var(--accent-ink); display: inline-flex; gap: var(--space-2); letter-spacing: 0.08em; } .about-kicker::before { background: var(--accent); border-radius: var(--radius-pill); content: ""; display: inline-block; height: 8px; width: 22px; } .about-lead { color: var(--ink-soft); font-size: var(--fs-lg); line-height: var(--leading-body); } .about-benefits-title { color: var(--ink); font-size: clamp(20px, 2.4vw, 26px); font-weight: var(--weight-black); margin: 0 0 var(--space-5); } .benefit-list { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .benefit-item { align-items: center; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; gap: var(--space-4); min-height: 76px; padding: var(--space-4) var(--space-5); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .benefit-item:hover { border-color: var(--brand-ring); box-shadow: var(--shadow-soft); transform: translateY(-2px); } .benefit-icon { align-items: center; background: linear-gradient(135deg, var(--brand-tint), var(--accent-tint)); border-radius: var(--radius-sm); color: var(--brand); display: inline-flex; flex: 0 0 auto; height: 46px; justify-content: center; width: 46px; } .benefit-item:nth-child(2) .benefit-icon { color: var(--accent-ink); } .benefit-text { color: var(--ink); font-size: var(--fs-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); } @media (min-width: 992px) { .about-grid { grid-template-columns: 0.9fr 1.1fr; } } /* --- Contact section -------------------------------------------------- */ .contact-band { background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), linear-gradient(140deg, color-mix(in srgb, var(--brand) 6%, white), color-mix(in srgb, var(--accent) 5%, white)); border-color: color-mix(in srgb, var(--brand) 14%, var(--line)); overflow: hidden; position: relative; } .contact-band::before { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); border-radius: 50%; content: ""; height: 320px; pointer-events: none; position: absolute; right: -90px; top: -120px; width: 320px; } .contact-grid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1fr; position: relative; z-index: 1; } .contact-intro { max-width: 48ch; } .contact-kicker { color: var(--brand); letter-spacing: 0.08em; } .contact-lead { color: var(--ink-soft); font-size: var(--fs-lg); line-height: var(--leading-body); margin-bottom: var(--space-6); } .contact-wa { gap: var(--space-2); } .contact-panel { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: grid; gap: var(--space-6); padding: clamp(20px, 3vw, 30px); } .contact-block-label { color: var(--muted); display: block; font-size: var(--fs-xs); font-weight: var(--weight-black); letter-spacing: 0.1em; margin-bottom: var(--space-3); text-transform: uppercase; } .contact-social { display: flex; flex-wrap: wrap; gap: var(--space-2); } .contact-social-btn { align-items: center; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius: var(--radius-pill); color: var(--ink); display: inline-flex; font-size: var(--fs-sm); font-weight: var(--weight-bold); gap: var(--space-2); padding: var(--space-2) var(--space-4); text-decoration: none; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .contact-social-btn svg { color: var(--brand); transition: color var(--t-fast); } .contact-social-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); } .contact-social-btn:hover svg { color: #fff; } .contact-chips { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } .contact-chip { align-items: center; background: var(--soft); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-sm); color: var(--ink-soft); display: flex; font-size: var(--fs-sm); gap: var(--space-3); line-height: var(--leading-snug); padding: var(--space-3) var(--space-4); } .contact-chip-icon { align-items: center; background: var(--surface); border-radius: var(--radius-xs); color: var(--brand); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; } @media (min-width: 992px) { .contact-grid { align-items: center; grid-template-columns: 1.05fr 0.95fr; } } .location-frame { border: 0; box-shadow: var(--shadow-soft); height: 390px; } .location-frame iframe { border: 0; height: 100%; width: 100%; } /* ========================================================================== TABLES ========================================================================== */ .table-shop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; } .table-shop thead { background: var(--soft); color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; } /* ========================================================================== CATALOG HEADER ========================================================================== */ .catalog-compact-header { background: rgba(255, 255, 255, 0.58); border: 1px solid color-mix(in srgb, var(--line) 74%, transparent); border-radius: var(--radius); padding: 18px; } .catalog-title-row { align-items: end; display: flex; justify-content: space-between; margin-bottom: 14px; } .catalog-title-row .section-title { font-size: clamp(28px, 3vw, 38px); } .catalog-category-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================================== PUBLICATION DETAIL (marketplace layout) ========================================================================== */ .publication-detail { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; padding: 0; } .market-breadcrumb { align-items: center; color: var(--brand); display: flex; flex-wrap: wrap; font-size: 14px; gap: var(--space-2); margin-bottom: var(--space-3); } .market-breadcrumb a { color: var(--brand); text-decoration: none; } .market-breadcrumb a:hover { text-decoration: underline; } .publication-gallery { align-items: center; aspect-ratio: auto; background: var(--surface); border: 0; display: flex; justify-content: center; min-height: 640px; } .publication-gallery-layout { align-items: start; display: grid; gap: var(--space-4); grid-template-columns: auto minmax(0, 1fr); height: 100%; padding: 24px 28px 28px 24px; width: 100%; } .publication-gallery-stage { align-items: center; background: var(--surface); border-radius: 0; display: flex; justify-content: center; min-height: 590px; overflow: hidden; } .publication-gallery-stage img { height: 100%; object-fit: contain; padding: 18px; width: 100%; } .publication-thumbnails { align-content: start; display: grid; gap: var(--space-2); grid-auto-rows: max-content; justify-content: start; max-height: 430px; overflow: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: thin; } .publication-thumbnail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); box-shadow: none; height: 58px; overflow: hidden; padding: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); width: 58px; } .publication-thumbnail:hover, .publication-thumbnail.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .publication-thumbnail img { display: block; height: 100%; object-fit: cover; width: 100%; } .publication-buybox { background: var(--surface); border: 0; border-left: 1px solid var(--line-2); box-shadow: none; height: auto; min-height: 640px; padding: var(--space-8); position: sticky; top: 96px; } .publication-heading h1 { color: var(--ink-soft); font-size: var(--space-6); font-weight: var(--weight-medium); line-height: 1.24; margin: var(--space-3) 0 var(--space-4); } .market-brand-link { color: var(--brand); display: inline-flex; font-size: 14px; margin-bottom: var(--space-2); text-decoration: none; } .market-brand-link:hover { text-decoration: underline; } .market-condition { color: var(--muted); font-size: 14px; } .selected-variation-summary { align-items: center; background: color-mix(in srgb, var(--brand) 5%, var(--surface)); border: 1px solid var(--line-2); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; gap: 6px var(--space-2); padding: 10px 12px; } .selected-variation-summary span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; } .selected-variation-summary strong { color: var(--ink-soft); font-weight: var(--weight-black); } .publication-price-block { background: transparent; border: 0; border-radius: 0; color: var(--ink-soft); margin: var(--space-5) 0 var(--space-6); padding: 0; } .publication-price-block .meta, .publication-price-block .price { color: var(--ink-soft); } .publication-price-line { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--space-2); } .publication-price-line .price { font-size: 36px; font-weight: var(--weight-regular); line-height: 1.08; } .publication-price-block .discount-badge { background: var(--success); border: 0; border-radius: var(--radius-xs); color: #fff; font-size: var(--fs-sm); padding: 3px var(--space-1); } .publication-price-block .price-before { color: var(--muted-2); } .publication-discount-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-1); } .publication-buybox .stock-badge { background: var(--brand-tint); border: 1px solid var(--brand-ring); border-radius: var(--radius-pill); font-size: var(--fs-sm); justify-content: center; min-height: 32px; padding: 7px var(--space-3); } .publication-description { border-top: 1px solid var(--line-2); color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--leading-body); margin: var(--space-6) 0; padding-top: 22px; } .publication-gallery-description { margin: 0; padding: 28px 32px 34px 88px; } .publication-description h2 { font-size: var(--fs-md); font-weight: var(--weight-medium); margin-bottom: var(--space-3); } .publication-description p { margin-bottom: 0; } .publication-option-group { margin-bottom: 18px; } .publication-option-heading { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; margin-bottom: var(--space-3); } .publication-option-heading span { color: var(--ink-soft); font-size: var(--fs-md); font-weight: var(--weight-black); } .publication-option-heading small { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--weight-bold); } .publication-option-group .form-label, .publication-option-label, .market-quantity-row .form-label { color: var(--ink-soft); font-weight: var(--weight-medium); } .market-quantity-row { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: flex-start; margin-bottom: var(--space-2); } .publication-stock-text { color: var(--ink-soft); font-size: 14px; font-weight: var(--weight-bold); } .publication-stock-text.stock-badge-empty { color: var(--muted); } .quantity-stepper { align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: inline-grid; grid-template-columns: 40px minmax(54px, 72px) 40px; margin-bottom: 18px; min-height: 44px; overflow: hidden; } .quantity-stepper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); } .quantity-stepper-button { align-items: center; align-self: stretch; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 3%, white), var(--surface)); border: 0; color: var(--brand); display: inline-flex; font-size: 18px; font-weight: var(--weight-black); justify-content: center; min-height: 44px; transition: background var(--t-fast), color var(--t-fast); } .quantity-stepper-button:hover:not(:disabled) { background: var(--brand); color: #fff; } .quantity-stepper-button:disabled { color: var(--muted-2); cursor: not-allowed; opacity: 0.56; } .quantity-stepper-button:first-child { border-right: 1px solid var(--line-2); } .quantity-stepper-button:last-child { border-left: 1px solid var(--line-2); } .market-quantity-input { appearance: textfield; border: 0; border-radius: 0; box-shadow: none; color: var(--ink-soft); font-size: var(--fs-md); font-weight: var(--weight-black); height: 100%; margin: 0; max-width: none; min-height: 44px; padding: 0 6px; text-align: center; } .market-quantity-input::-webkit-outer-spin-button, .market-quantity-input::-webkit-inner-spin-button { appearance: none; margin: 0; } .market-quantity-input:focus { border-color: transparent; box-shadow: none; } .market-quantity-input:disabled { background: var(--soft); color: var(--muted-2); } .publication-native-select { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* ========================================================================== PRODUCT ATTRIBUTE OPTIONS ========================================================================== */ .attribute-options { display: flex; flex-wrap: wrap; gap: var(--space-2); } .attribute-option { background: linear-gradient(180deg, color-mix(in srgb, white 80%, var(--surface)), var(--surface)); border: 1px solid var(--line-2); border-radius: var(--radius-pill); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--weight-bold); min-height: 42px; padding: 9px 16px; position: relative; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast); } .attribute-option:hover, .attribute-option.active { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 74%, var(--accent))); border-color: var(--brand); box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 20%, transparent); color: #fff; transform: translateY(-1px); } .attribute-option:disabled { background: var(--soft); border-color: var(--line); box-shadow: none; color: var(--muted-2); cursor: not-allowed; opacity: 0.78; text-decoration: line-through; } .variation-card-grid { display: grid; gap: var(--space-2); } .variation-card { align-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 3%, white), var(--surface)); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink-soft); display: grid; gap: var(--space-3); grid-template-columns: 58px minmax(0, 1fr) auto; min-height: 82px; padding: 11px 13px 11px 11px; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast); width: 100%; } .variation-card:hover, .variation-card.active { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, white), color-mix(in srgb, var(--accent) 7%, white)); border-color: var(--brand); box-shadow: 0 16px 32px color-mix(in srgb, var(--brand) 15%, transparent); transform: translateY(-1px); } .variation-card.active { box-shadow: 0 16px 32px color-mix(in srgb, var(--brand) 15%, transparent), inset 0 0 0 1px var(--brand); } .variation-card:disabled { background: var(--soft); border-color: var(--line); box-shadow: none; color: var(--muted-2); cursor: not-allowed; opacity: 0.72; transform: none; } .variation-card-media { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 62%), var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--brand); display: flex; font-weight: var(--weight-black); justify-content: center; overflow: hidden; } .variation-card-media img { height: 100%; object-fit: cover; width: 100%; } .variation-card-copy { display: grid; gap: 3px; min-width: 0; } .variation-card-copy strong { color: var(--ink-soft); font-size: var(--fs-body); font-weight: var(--weight-black); line-height: 1.2; overflow-wrap: anywhere; } .variation-card-meta, .variation-card-stock { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--weight-bold); } .variation-card-stock { color: var(--brand); } .variation-card:disabled .variation-card-copy strong, .variation-card:disabled .variation-card-stock { color: var(--muted-2); } .variation-card-price { align-items: flex-end; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; } .variation-card-price small { color: var(--muted-2); font-size: var(--fs-xs); text-decoration: line-through; } .variation-card-price b { color: var(--ink-soft); font-size: var(--fs-md); font-weight: var(--weight-black); } @media (max-width: 520px) { .variation-card { grid-template-columns: 50px minmax(0, 1fr); } .variation-card-price { align-items: flex-start; grid-column: 2; } } /* ========================================================================== CART / ORDER / SUMMARY ITEMS ========================================================================== */ .cart-product, .order-item-product, .summary-product { align-items: center; display: flex; gap: var(--space-3); min-width: 0; } .product-thumb, .order-item-thumb, .summary-thumb { align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)), var(--soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--brand); display: flex; flex: 0 0 auto; font-weight: var(--weight-black); height: 58px; justify-content: center; overflow: hidden; width: 58px; } .summary-thumb, .order-item-thumb { height: 48px; width: 48px; } .product-thumb img, .order-item-thumb img, .summary-thumb img { height: 100%; object-fit: cover; width: 100%; } .cart-quantity-form { max-width: 188px; } .cart-quantity-column { width: 210px; } .cart-quantity-controls { align-items: center; display: flex; gap: var(--space-2); } .cart-quantity-stepper { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); display: inline-grid; grid-template-columns: 34px 48px 34px; min-height: 38px; overflow: hidden; } .cart-quantity-stepper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); } .cart-quantity-button, .cart-remove-button { align-items: center; border: 0; display: inline-flex; flex: 0 0 auto; font-weight: var(--weight-black); height: 38px; justify-content: center; padding: 0; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .cart-quantity-button { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 3%, white), var(--surface)); color: var(--brand); width: 34px; } .cart-quantity-button:hover:not(:disabled) { background: var(--brand); color: #fff; } .cart-quantity-button:disabled { cursor: not-allowed; opacity: 0.42; } .cart-remove-button { background: var(--danger-tint); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); color: var(--danger); width: 38px; } .cart-remove-button:hover { background: color-mix(in srgb, var(--danger) 14%, white); border-color: var(--danger-line); } .cart-quantity-input { appearance: textfield; border: 0; border-left: 1px solid var(--line); border-radius: 0; border-right: 1px solid var(--line); box-shadow: none; color: var(--ink-soft); flex: 0 0 48px; font-weight: var(--weight-black); min-height: 38px; padding: 0 6px; text-align: center; width: 48px; } .cart-quantity-input::-webkit-outer-spin-button, .cart-quantity-input::-webkit-inner-spin-button { appearance: none; margin: 0; } .cart-quantity-input:focus { border-color: var(--line); box-shadow: none; } .cart-mobile-list { display: none; } .cart-total-card { max-width: 420px; } .cart-quantity-form.is-submitting { opacity: 0.62; pointer-events: none; } /* ========================================================================== FLOATING CHAT BUTTONS ========================================================================== */ .storefront-chatbot { bottom: 92px; position: fixed; right: 22px; z-index: 31; } .storefront-chatbot-toggle { align-items: center; background: var(--brand); border: 1px solid rgba(255, 255, 255, 0.36); border-radius: var(--radius-pill); box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 30%, transparent); color: #fff; display: flex; height: 58px; justify-content: center; transition: box-shadow var(--t-base), transform var(--t-base), background var(--t-base); width: 58px; } .storefront-chatbot-toggle:hover, .storefront-chatbot.is-open .storefront-chatbot-toggle { background: var(--brand-dark); box-shadow: 0 20px 42px color-mix(in srgb, var(--brand) 36%, transparent); transform: translateY(-2px); } .storefront-chatbot-toggle svg, .storefront-chatbot-close svg, .storefront-chatbot-form button svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .storefront-chatbot-toggle svg { height: 29px; width: 29px; } .storefront-chatbot-panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; bottom: 72px; box-shadow: var(--shadow-strong); display: flex; flex-direction: column; height: min(520px, calc(100vh - 132px)); overflow: hidden; position: absolute; right: 0; width: min(360px, calc(100vw - 32px)); } .storefront-chatbot-panel[hidden] { display: none; } .storefront-chatbot-header { align-items: center; background: var(--brand-dark); color: #fff; display: flex; gap: 14px; justify-content: space-between; padding: 15px 16px; } .storefront-chatbot-header strong, .storefront-chatbot-header span { display: block; } .storefront-chatbot-header strong { font-size: 15px; line-height: 1.2; } .storefront-chatbot-header span { color: rgba(255, 255, 255, 0.76); font-size: 12px; font-weight: 700; margin-top: 2px; } .storefront-chatbot-close { align-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: #fff; display: flex; height: 34px; justify-content: center; width: 34px; } .storefront-chatbot-close svg { height: 18px; width: 18px; } .storefront-chatbot-messages { background: #f8fafc; display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; } .storefront-chatbot-message { border-radius: 16px; font-size: 14px; line-height: 1.45; max-width: 86%; padding: 10px 12px; white-space: pre-wrap; } .storefront-chatbot-message.is-bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); } .storefront-chatbot-message.is-bot a { color: var(--brand); text-decoration: underline; word-break: break-all; } .storefront-chatbot-message.is-user { align-self: flex-end; background: var(--brand); color: #fff; } .storefront-chatbot-form { align-items: center; background: #fff; border-top: 1px solid var(--line); display: flex; gap: 9px; padding: 12px; } .storefront-chatbot-form input { background: #f8fafc; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); flex: 1 1 auto; font-size: 14px; min-width: 0; outline: none; padding: 10px 13px; } .storefront-chatbot-form input:focus { border-color: color-mix(in srgb, var(--brand) 58%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); } .storefront-chatbot-form button { align-items: center; background: var(--accent); border: 0; border-radius: 999px; color: var(--brand-dark); display: flex; flex: 0 0 auto; height: 42px; justify-content: center; transition: opacity var(--t-base), transform var(--t-base); width: 42px; } .storefront-chatbot-form button:hover { transform: translateY(-1px); } .storefront-chatbot-form.is-sending { opacity: 0.72; pointer-events: none; } .storefront-chatbot-form button svg { height: 19px; transform: translateX(1px); width: 19px; } .whatsapp-button { align-items: center; background: var(--whatsapp); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: var(--radius-pill); bottom: 22px; box-shadow: 0 16px 34px color-mix(in srgb, var(--whatsapp) 32%, transparent); color: #fff; display: flex; height: 58px; justify-content: center; position: fixed; right: 22px; text-decoration: none; transition: box-shadow var(--t-base), transform var(--t-base), background var(--t-base); width: 58px; z-index: 30; } .whatsapp-button:hover { background: var(--whatsapp-dark); box-shadow: 0 20px 42px color-mix(in srgb, var(--whatsapp) 40%, transparent); color: #fff; transform: translateY(-2px); } .whatsapp-button svg { display: block; height: 34px; transform: translate(1px, -1px); width: 34px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 991px) { .publication-buybox { position: static; } .publication-gallery, .publication-buybox { min-height: 0; } .publication-buybox { border-left: 0; border-top: 1px solid var(--line-2); padding: 22px; } .publication-gallery { aspect-ratio: auto; } .publication-gallery-layout { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .publication-gallery-stage { aspect-ratio: 1 / 1; min-height: auto; } .publication-gallery-description { padding: 22px; } .publication-thumbnails { display: flex; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 2px; } .publication-thumbnail { flex: 0 0 auto; height: 66px; width: 66px; } .cart-desktop-table { display: none; } .cart-mobile-list { display: grid; gap: 14px; } .cart-mobile-card { padding: var(--space-4); } .cart-total-card { bottom: 12px; max-width: none; position: sticky; z-index: 12; } .shop-nav { margin-top: var(--space-2); top: var(--space-2); width: calc(100% - 16px); } .storefront-banner { min-height: 430px; } .hero-trust-strip { display: grid; } .fast-shop-hero-content { align-items: flex-start; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 22px; } .fast-shop-logo { height: 72px; width: 72px; } .fast-product-row { grid-template-columns: 64px minmax(0, 1fr); } .fast-product-thumb { height: 62px; width: 62px; } .fast-product-price { grid-column: 2; justify-items: start; padding-left: 0; } } @media (max-width: 768px) { .shop-main { padding-top: 18px; } .shop-menu { display: none; } .shop-menu-toggle { display: inline-flex; } .shop-mobile-actions { display: flex; } .shop-nav .container { flex-direction: row !important; justify-content: space-between; } .shop-brand { max-width: calc(100vw - 110px); } .home-slide { aspect-ratio: auto; min-height: 300px; } .storefront-banner { min-height: 420px; } .storefront-banner-content { padding: 30px; } .storefront-banner h1 { font-size: 32px; } .home-slide-copy { padding: var(--space-6); } .home-slide-copy h1 { font-size: 30px; } .benefit-list { grid-template-columns: 1fr; } .location-frame { height: 310px; } .whatsapp-button { bottom: var(--space-4); right: var(--space-4); } .storefront-chatbot { bottom: calc(var(--space-4) + 70px); right: var(--space-4); } .storefront-chatbot-panel { bottom: 70px; height: min(500px, calc(100vh - 118px)); } } /* ========================================================================== Checkout · Cupón de descuento Campo de código + feedback + línea de descuento en el panel de resumen. ========================================================================== */ .checkout-coupon-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); } .checkout-coupon-input-group { display: flex; gap: 8px; } .checkout-coupon-input-group input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--surface); } .checkout-coupon-input-group input::placeholder { color: var(--muted-2); text-transform: none; letter-spacing: normal; font-weight: 500; } .checkout-coupon-input-group input:focus { outline: none; border-color: var(--shop-primary, var(--brand)); box-shadow: 0 0 0 3px var(--brand-ring, color-mix(in srgb, var(--brand) 18%, white)); } .checkout-coupon-input-group button { flex: 0 0 auto; border: none; border-radius: var(--radius-sm); padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; color: #fff; background: var(--shop-primary, var(--brand)); transition: opacity .15s ease; } .checkout-coupon-input-group button:hover { opacity: 0.9; } .checkout-coupon-input-group button:disabled { opacity: 0.6; cursor: progress; } .checkout-coupon-feedback { margin-top: 8px; font-size: 13px; font-weight: 600; min-height: 0; } .checkout-coupon-feedback:empty { margin-top: 0; } .checkout-coupon-feedback.is-success { color: var(--success); } .checkout-coupon-feedback.is-error { color: var(--danger); } .checkout-coupon-discount-line { margin-top: 4px; }