/* =========================================================
   KEYAK STORE - PREMIUM FRONTEND CSS
   Crystalino-inspired / Clean luxury layout
   ========================================================= */

:root {
    --black: #101010;
    --dark: #171717;
    --white: #ffffff;
    --cream: #fbf7f8;
    --soft: #f8f4f6;
    --soft-2: #f1ecef;
    --border: #e8dde3;
    --text: #111111;
    --muted: #76727a;
    --pink: #d92f83;
    --gold: #d7a53b;
    --gold-dark: #9a681d;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.075);
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.045);
    --gold-gradient: linear-gradient(
        135deg,
        #fff3b0 0%,
        #f4d779 20%,
        #d7a53b 45%,
        #a96d18 70%,
        #f8e6a0 100%
    );
}

/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    background: #ffffff;
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 300;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}

main {
    min-height: 60vh;
}

.container {
    width: min(1200px, calc(100% - 44px));
    margin: 0 auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
.btn-outline,
.checkout-button,
.place-order-button,
.hero-actions a,
.home-hero-actions a,
.success-actions a,
.back-link-button {
    min-height: 50px;
    border-radius: 999px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.btn-primary,
.checkout-button,
.place-order-button,
.hero-actions a:first-child,
.home-hero-actions a:first-child {
    border: 1px solid var(--black);
    background: var(--black);
    color: #ffffff;
}

.btn-outline,
.hero-actions a:nth-child(2),
.home-hero-actions a:nth-child(2) {
    border: 1px solid var(--black);
    background: transparent;
    color: var(--black);
}

.btn-primary:hover,
.btn-outline:hover,
.checkout-button:hover,
.place-order-button:hover,
.hero-actions a:hover,
.home-hero-actions a:hover,
.success-actions a:hover {
    background: var(--gold-gradient);
    color: #111111;
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    background: #ffffff;
}

.top-social-bar {
    min-height: 38px;
    background: #ffffff;
    border-bottom: 1px solid #f0edf0;
}

.top-social-inner {
    min-height: 38px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.top-social-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-social-icons a {
    display: inline-flex;
    color: #111111;
    text-decoration: none;
}

.top-social-icons svg {
    width: 15px;
    height: 15px;
}

.top-shipping-message {
    margin: 0;
    font-size: 13px;
    color: #111111;
    font-weight: 500;
}

.main-header-area {
    background: #ffffff;
    border-bottom: 1px solid #f0edf0;
    padding: 18px 0;
}

.main-header-grid {
    display: grid;
    grid-template-columns: 190px minmax(360px, 1fr) auto;
    gap: 24px;
    align-items: center;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-logo-image {
    max-height: 58px;
    width: auto;
    object-fit: contain;
}

.brand-logo-text {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 700;
}

.header-search-form {
    position: relative;
    z-index: 9999;
    min-height: 52px;
    border: 1px solid #dcd7da;
    border-radius: 999px;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    background: #ffffff;
    overflow: visible;
}

.header-search-form button {
    width: 58px;
    height: 52px;
    border: 0;
    background: transparent;
    color: #111111;
    display: grid;
    place-items: center;
}

.header-search-form button svg {
    width: 22px;
    height: 22px;
}

.header-search-form input {
    width: 100%;
    height: 52px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 18px;
    font-weight: 300;
    padding-right: 24px;
    color: #111111;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.account-button {
    min-height: 52px;
    border: 1px solid #111111;
    border-radius: 999px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    background: #ffffff;
}

.account-icon,
.account-icon svg {
    width: 22px;
    height: 22px;
}

.cart-link.crystal-cart-link {
    min-height: 52px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
}

.cart-icon,
.cart-icon svg {
    width: 23px;
    height: 23px;
}

.account-button:hover,
.cart-link.crystal-cart-link:hover {
    background: var(--gold-gradient);
    color: #111111;
    border-color: var(--gold);
}

/* =========================================================
   CATEGORY BAR / CRYSTALINO SCROLL EFFECT
   ========================================================= */

.category-header-bar {
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #dddddd;
    position: relative;
    z-index: 1001;
    transition: transform 0.32s ease, opacity 0.32s ease, box-shadow 0.32s ease;
}

.category-header-inner {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-header-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.category-header-nav::-webkit-scrollbar {
    display: none;
}

.category-header-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111111;
    font-size: 15px;
    font-weight: 500;
    padding: 17px 0;
    border-bottom: 2px solid transparent;
}

.category-header-nav a:hover,
.category-header-nav a.active {
    border-bottom-color: #111111;
}

.category-arrow svg {
    width: 14px;
    height: 14px;
}

.store-status-box {
    display: none !important;
}

.site-header.keyak-category-floating {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    pointer-events: none;
    background: transparent;
}

.site-header.keyak-category-floating .top-social-bar,
.site-header.keyak-category-floating .main-header-area {
    display: none;
}

.site-header.keyak-category-floating .category-header-bar {
    pointer-events: auto;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.site-header.keyak-category-floating.keyak-category-visible .category-header-bar {
    transform: translateY(0);
    opacity: 1;
}

.site-header.keyak-category-floating.keyak-category-hidden .category-header-bar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   AJAX SEARCH
   ========================================================= */

.has-search-autocomplete {
    position: relative !important;
    z-index: 99999;
}

.search-suggestions-box {
    position: absolute !important;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    z-index: 999999;
    display: none;
}

.search-suggestions-box.open {
    display: block;
}

.search-suggestion-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    text-decoration: none;
    background: #ffffff;
    color: #111111;
    border-bottom: 1px solid #f0ecef;
}

.search-suggestion-item:hover {
    background: #faf8f9;
}

.suggestion-image {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #faf8f9;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 1px;
}

.suggestion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suggestion-content {
    display: grid;
    gap: 4px;
}

.suggestion-content strong {
    font-size: 14px;
    font-weight: 700;
}

.suggestion-content small {
    font-size: 12px;
    color: var(--muted);
}

.suggestion-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.search-suggestion-empty {
    padding: 18px;
    text-align: center;
    color: var(--muted);
}

/* =========================================================
   HOME HERO
   ========================================================= */

.hero,
.hero-section,
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 86px;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.10), transparent 34%),
        radial-gradient(circle at top right, rgba(215, 165, 59, 0.11), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%);
}

.hero .container,
.hero-section .container,
.home-hero .container,
.hero-grid,
.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: 64px;
}

.hero-content,
.home-hero-content {
    max-width: 680px;
}

.hero h1,
.hero-content h1,
.home-hero h1,
.home-hero-content h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(62px, 8vw, 116px);
    line-height: 0.9;
    letter-spacing: -3px;
    font-weight: 700;
    margin: 0 0 26px;
    color: #111111;
}

.hero p,
.hero-content p,
.home-hero p,
.home-hero-content p {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.85;
    color: var(--muted);
    margin: 0;
}

.hero-actions,
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero ul,
.home-hero ul,
.hero-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 8px;
    color: #111111;
    font-weight: 500;
}

.hero-media,
.home-hero-media,
.hero-image {
    min-height: 520px;
    border-radius: 40px;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.15), transparent 38%),
        linear-gradient(145deg, #111111, #050505);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.hero-media img,
.home-hero-media img,
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-media-placeholder,
.hero-placeholder {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: var(--gold);
    font-size: 72px;
    letter-spacing: 5px;
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */

.section-padding,
.home-section,
.categories-section,
.featured-products-section,
.professional-section,
.newsletter-section,
.about-section,
.contact-section {
    padding: 88px 0;
}

.section-heading,
.section-header {
    max-width: 780px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading h2,
.section-header h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.95;
    font-weight: 700;
    margin: 0 0 16px;
}

.section-heading p,
.section-header p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */

.categories-grid,
.category-preview-grid,
.values-grid,
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.category-card,
.category-preview-card,
.value-card {
    min-height: 240px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 34px;
    text-decoration: none;
    color: #111111;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.25s ease;
}

.category-card:hover,
.category-preview-card:hover,
.value-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.category-card span,
.category-preview-card span,
.value-card span {
    color: var(--pink);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
}

.category-card h3,
.category-preview-card h3,
.value-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 14px;
}

.category-card p,
.category-preview-card p,
.value-card p {
    color: var(--muted);
    line-height: 1.75;
    margin: 0;
}

/* =========================================================
   PROFESSIONAL / BLACK SECTION
   ========================================================= */

.professional-section,
.home-professional-section {
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.13), transparent 34%),
        linear-gradient(145deg, #151515, #050505);
    color: #ffffff;
    overflow: hidden;
}

.professional-grid,
.home-professional-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 54px;
    align-items: center;
}

.professional-content h2,
.home-professional-content h2,
.professional-section h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    margin: 0 0 24px;
    color: #ffffff;
}

.professional-content p,
.home-professional-content p,
.professional-section p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 17px;
    line-height: 1.85;
}

.professional-list,
.home-professional-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: grid;
    gap: 14px;
}

.professional-list li,
.home-professional-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.84);
}

.professional-list li::before,
.home-professional-list li::before {
    content: "✓";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    background: var(--gold-gradient);
    color: #111111;
    font-size: 13px;
    font-weight: 700;
}

.professional-card,
.home-professional-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 34px;
    padding: 38px;
    backdrop-filter: blur(12px);
}

/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter-section {
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%);
}

.newsletter-card {
    max-width: 980px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 38px;
    padding: 58px 46px;
    box-shadow: var(--shadow);
    text-align: center;
}

.newsletter-card h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1;
    margin: 0 0 18px;
}

.newsletter-card p {
    max-width: 680px;
    margin: 0 auto 30px;
    color: var(--muted);
    line-height: 1.8;
}

.newsletter-form {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
}

.newsletter-form input {
    min-height: 54px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 22px;
    outline: none;
    font-size: 16px;
}

/* =========================================================
   SHOP / PRODUCTS
   ========================================================= */

.shop-section {
    padding: 72px 0 90px;
}

.shop-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 32px;
    box-shadow: var(--shadow-soft);
}

.shop-sidebar h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 38px;
    margin: 0 0 24px;
}

.shop-category-list {
    display: grid;
    gap: 14px;
}

.shop-category-list a {
    min-height: 54px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #111111;
    font-weight: 500;
    background: #ffffff;
}

.shop-category-list a.active,
.shop-category-list a:hover {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.shop-heading {
    margin-bottom: 30px;
}

.shop-heading h1 {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 8px;
    letter-spacing: -1.5px;
    font-weight: 500;
}

.shop-heading p {
    margin: 0;
    color: var(--muted);
}

.products-grid,
.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.product-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.product-image {
    height: 330px;
    background: #faf8f9;
    display: block;
    text-decoration: none;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.product-image-placeholder {
    height: 100%;
    min-height: 330px;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.12), transparent 36%),
        linear-gradient(145deg, #111111, #050505);
    color: var(--gold);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 46px;
    letter-spacing: 4px;
    display: grid;
    place-items: center;
}

.product-card-body {
    padding: 24px;
}

.product-category {
    display: block;
    color: var(--pink);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-card h3 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 10px;
}

.product-card h3 a {
    text-decoration: none;
}

.product-card-body p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.product-card-footer strong {
    font-size: 18px;
    font-weight: 700;
}

.add-to-cart {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
}

.add-to-cart:hover,
.add-to-cart.added {
    background: var(--gold-gradient);
    color: #111111;
}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */

.crystal-product-page {
    padding: 24px 0 90px;
}

.product-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12px;
    color: #777777;
    margin-bottom: 26px;
}

.product-breadcrumbs a {
    text-decoration: none;
}

.crystal-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.85fr);
    gap: 70px;
    align-items: start;
}

.crystal-main-image {
    position: relative;
    min-height: 620px;
    background: #faf8f8;
    border: 1px solid #f0e8ec;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.crystal-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.product-zoom-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #111111;
    background: #ffffff;
}

.crystal-thumbnail-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.product-thumb-button {
    width: 78px;
    height: 78px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    padding: 0;
}

.product-thumb-button.active {
    border-color: #111111;
}

.product-thumb-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-category-line {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 18px;
}

.crystal-product-info h1 {
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    margin: 0 0 22px;
    font-weight: 700;
}

.crystal-product-short {
    color: #555555;
    line-height: 1.8;
    margin-bottom: 28px;
}

.product-option-block {
    margin: 24px 0 28px;
}

.product-option-title {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
}

.size-pill {
    min-height: 42px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid #111111;
    background: #ffffff;
}

.crystal-product-price {
    font-size: clamp(40px, 4vw, 54px);
    line-height: 1;
    font-weight: 500;
    padding-bottom: 22px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 22px;
}

.product-purchase-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.quantity-selector,
.cart-quantity-controls {
    display: flex;
    align-items: center;
    gap: 9px;
}

.product-qty-btn,
.quantity-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;
    font-size: 24px;
    display: grid;
    place-items: center;
}

.quantity-selector input,
.cart-quantity-input {
    width: 46px;
    border: 0;
    outline: none;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.crystal-add-cart {
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    padding: 0 34px;
    font-weight: 700;
}

.buy-now-button {
    min-height: 52px;
    border-radius: 999px;
    padding: 0 24px;
    background: var(--gold-gradient);
    color: #111111;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.product-payment-note,
.product-share-box {
    margin-top: 22px;
    color: var(--muted);
}

.crystal-product-details {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.product-info-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 30px;
    box-shadow: var(--shadow-soft);
}

.product-info-box h2 {
    margin: 0 0 14px;
}

/* =========================================================
   ABOUT / CONTACT
   ========================================================= */

.page-hero,
.about-hero,
.contact-hero {
    padding: 82px 0 58px;
    text-align: center;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.09), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%);
}

.page-hero h1,
.about-hero h1,
.contact-hero h1 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(54px, 8vw, 96px);
    line-height: 0.95;
    margin: 0 0 18px;
}

.page-hero p,
.about-hero p,
.contact-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.85;
}

.about-section,
.contact-section,
.content-section {
    padding: 82px 0;
}

.about-grid,
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 0.85fr);
    gap: 48px;
    align-items: start;
}

.about-card,
.about-image-card,
.about-highlight-card,
.contact-info-card,
.contact-form-card,
.contact-card,
.content-card,
.image-card,
.info-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 34px;
    padding: 38px;
    box-shadow: var(--shadow);
}

.about-content h2,
.about-text h2,
.contact-info-card h2,
.contact-form-card h2,
.contact-card h2,
.content-card h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1;
    margin: 0 0 20px;
}

.about-content p,
.about-text p,
.contact-info-card p,
.contact-form-card p,
.contact-card p,
.content-card p {
    color: var(--muted);
    line-height: 1.85;
}

.contact-detail-list {
    display: grid;
    gap: 16px;
    margin-top: 26px;
}

.contact-detail {
    background: #faf8f9;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
}

.contact-detail span {
    display: block;
    color: var(--pink);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    margin-bottom: 4px;
}

.contact-detail a,
.contact-detail strong {
    color: #111111;
    text-decoration: none;
    font-weight: 700;
}

.form-group-public {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.form-group-public label {
    font-size: 14px;
    font-weight: 700;
}

.form-group-public input,
.form-group-public textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 16px;
    outline: none;
    font-size: 15px;
    background: #faf8f9;
}

/* =========================================================
   CART / CHECKOUT
   ========================================================= */

.cart-section,
.checkout-section {
    padding: 72px 0 90px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 34px;
    align-items: start;
}

.cart-items {
    display: grid;
    gap: 18px;
}

.cart-item {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 18px;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 170px 110px 95px;
    gap: 18px;
    align-items: center;
}

.cart-item-image {
    width: 100px;
    height: 100px;
    background: #faf8f9;
    border-radius: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.cart-item-info h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.cart-item-info p {
    margin: 0;
    color: var(--muted);
}

.cart-item-total {
    text-align: right;
    font-weight: 700;
}

.remove-cart-item {
    border: 1px solid #f0d8df;
    background: #fffafa;
    color: #9d4051;
    border-radius: 999px;
    padding: 10px 14px;
}

.cart-summary-card,
.empty-cart,
.checkout-form-card,
.checkout-summary-card,
.checkout-empty {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.summary-line,
.summary-total,
.checkout-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.summary-total {
    border-bottom: 0;
    font-size: 20px;
    font-weight: 700;
}

.payment-method-list {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.payment-method-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    background: #faf8f9;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
}

/* =========================================================
   ORDER SUCCESS
   ========================================================= */

.order-success-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%);
}

.order-success-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 36px;
    padding: 58px 42px;
    box-shadow: var(--shadow);
}

.success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 26px;
    background: var(--gold-gradient);
    color: #111111;
    font-size: 38px;
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #0d0d0e;
    color: #ffffff;
    padding: 66px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 38px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.8;
}

.footer-logo-image {
    max-height: 92px;
    width: auto;
}

.footer-column h4 {
    margin: 0 0 16px;
    font-size: 15px;
}

.footer-column a {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    margin-bottom: 10px;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 44px;
    padding: 20px 0;
}

.footer-bottom-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-bottom p,
.footer-bottom a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .products-grid,
    .shop-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero .container,
    .hero-section .container,
    .home-hero .container,
    .hero-grid,
    .home-hero-grid,
    .professional-grid,
    .home-professional-grid,
    .about-grid,
    .contact-grid,
    .crystal-product-layout {
        grid-template-columns: 1fr;
    }

    .categories-grid,
    .category-preview-grid,
    .values-grid,
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .main-header-grid {
        grid-template-columns: 1fr auto;
    }

    .header-search-form {
        grid-column: 1 / -1;
        order: 3;
    }

    .shop-layout,
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        position: static;
    }

    .category-header-nav {
        justify-content: flex-start;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cart-item {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .cart-quantity-controls,
    .cart-item-total,
    .remove-cart-item {
        grid-column: 2 / 3;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(100% - 28px, 1200px);
    }

    .top-social-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        padding: 8px 0;
    }

    .main-header-grid {
        gap: 16px;
    }

    .site-logo-image {
        max-height: 46px;
    }

    .account-button {
        display: none;
    }

    .cart-link.crystal-cart-link {
        padding: 0 18px;
    }

    .hero,
    .hero-section,
    .home-hero {
        padding: 62px 0;
    }

    .hero h1,
    .hero-content h1,
    .home-hero h1,
    .home-hero-content h1 {
        font-size: 56px;
        letter-spacing: -1.5px;
    }

    .hero-media,
    .home-hero-media,
    .hero-image {
        min-height: 340px;
        border-radius: 28px;
    }

    .categories-grid,
    .category-preview-grid,
    .values-grid,
    .about-values-grid,
    .crystal-product-details {
        grid-template-columns: 1fr;
    }

    .newsletter-form,
    .product-purchase-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .products-grid,
    .shop-products-grid {
        grid-template-columns: 1fr;
    }

    .product-image {
        height: 280px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cart-item-image {
        margin: 0 auto;
    }

    .cart-quantity-controls,
    .cart-item-total,
    .remove-cart-item {
        grid-column: auto;
        justify-self: center;
        text-align: center;
    }
}
/* =========================================================
   FIX FINAL - Hide mobile search/menu on desktop
   ========================================================= */

#mobileHeaderPanel,
.mobile-header-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Solo permitir menú móvil en pantallas pequeñas */
@media (max-width: 980px) {
    #mobileHeaderPanel.open,
    .mobile-header-panel.open {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: 600px !important;
        overflow: visible !important;
        padding: 18px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        background: #ffffff !important;
        gap: 14px !important;
        transition: all 0.25s ease;
    }

    #mobileHeaderPanel.open a,
    .mobile-header-panel.open a {
        text-decoration: none !important;
        color: #111111 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 8px 0 !important;
    }

    .mobile-search-form input {
        width: 100% !important;
        min-height: 46px !important;
        border: 1px solid var(--border) !important;
        border-radius: 999px !important;
        padding: 0 18px !important;
        outline: none !important;
        font-size: 15px !important;
        background: #ffffff !important;
    }
}

/* =========================================================
   FIX ABOUT / CONNECT WITH KEYAK SECTION
   ========================================================= */

.about-section:last-of-type,
.contact-section:last-of-type,
.content-section:last-of-type {
    padding-bottom: 90px !important;
}

/* Cualquier bloque final de redes o conexión */
.social-contact-links,
.contact-social-links,
.about-social-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 26px !important;
}

/* Arregla TikTok para que no salga como link simple */
.social-contact-links a,
.contact-social-links a,
.about-social-links a,
.contact-card a[href*="tiktok"],
.about-card a[href*="tiktok"],
.content-card a[href*="tiktok"],
.about-section a[href*="tiktok"],
.contact-section a[href*="tiktok"] {
    min-height: 46px !important;
    border: 1px solid #111111 !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #111111 !important;
    background: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    width: fit-content !important;
}

.social-contact-links a:hover,
.contact-social-links a:hover,
.about-social-links a:hover,
.contact-card a[href*="tiktok"]:hover,
.about-card a[href*="tiktok"]:hover,
.content-card a[href*="tiktok"]:hover,
.about-section a[href*="tiktok"]:hover,
.contact-section a[href*="tiktok"]:hover {
    background: var(--gold-gradient) !important;
    color: #111111 !important;
    border-color: var(--gold) !important;
}

/* Bloque Connect With KEYAK más elegante */
.about-section .eyebrow,
.contact-section .eyebrow,
.content-section .eyebrow {
    margin-bottom: 18px !important;
}

.about-section h2,
.contact-section h2,
.content-section h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.about-section p,
.contact-section p,
.content-section p {
    max-width: 900px;
}

/* Evita que las secciones finales queden pegadas al footer */
.site-footer {
    margin-top: 0 !important;
}
/* =========================================================
   KEYAK FINAL POLISH - HOME / ABOUT / FOOTER / BENEFITS
   ========================================================= */

/* Separar botón de TikTok y bloques finales */
.about-section,
.contact-section,
.content-section {
    padding-top: 95px !important;
    padding-bottom: 95px !important;
}

.about-section + .site-footer,
.contact-section + .site-footer,
.content-section + .site-footer {
    margin-top: 0 !important;
}

.about-section .btn-primary,
.contact-section .btn-primary,
.content-section .btn-primary {
    margin-top: 22px !important;
}

/* About más elegante */
.about-section {
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.07), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
}

.about-grid {
    align-items: center !important;
}

.about-content,
.about-text,
.about-card,
.about-highlight-card,
.content-card {
    max-width: 100% !important;
}

.about-content h2,
.about-text h2,
.content-card h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 6vw, 82px) !important;
    line-height: 0.95 !important;
    letter-spacing: -1.5px !important;
    font-weight: 700 !important;
}

.about-content p,
.about-text p,
.content-card p {
    max-width: 900px !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: #5f5b63 !important;
}

.about-card,
.about-highlight-card,
.content-card {
    border-radius: 34px !important;
    background: #ffffff !important;
    border: 1px solid #eadfe5 !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.07) !important;
}

/* Cards 01 - 04 más premium */
.categories-grid,
.category-preview-grid {
    align-items: stretch !important;
}

.category-card,
.category-preview-card {
    min-height: 280px !important;
    padding: 44px 36px !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at top right, rgba(217, 47, 131, 0.04), transparent 30%),
        #ffffff !important;
    border: 1px solid #eadfe5 !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.045) !important;
    justify-content: center !important;
}

.category-card:hover,
.category-preview-card:hover {
    transform: translateY(-6px) !important;
    border-color: #d7a53b !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.085) !important;
}

.category-card span,
.category-preview-card span {
    font-size: 14px !important;
    color: #e5308a !important;
    letter-spacing: 2.4px !important;
    margin-bottom: 22px !important;
}

.category-card h3,
.category-preview-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(42px, 4vw, 58px) !important;
    line-height: 0.95 !important;
    letter-spacing: -1px !important;
    font-weight: 700 !important;
    margin-bottom: 22px !important;
}

.category-card p,
.category-preview-card p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #7b7880 !important;
}

/* Bloque negro más limpio entre cards y siguientes secciones */
.professional-section,
.home-professional-section {
    padding: 100px 0 !important;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.16), transparent 35%),
        linear-gradient(145deg, #181015 0%, #080808 70%) !important;
}

/* Bloque de beneficios tipo Crystalino */
.keyak-benefits-strip {
    padding: 80px 0;
    background: #ffffff;
}

.keyak-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
    text-align: center;
}

.keyak-benefit-item {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.keyak-benefit-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    color: #111111;
}

.keyak-benefit-icon svg {
    width: 86px;
    height: 86px;
    stroke-width: 2.2;
}

.keyak-benefit-item h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    margin: 12px 0 0;
}

.keyak-benefit-item p {
    color: #777777;
    font-size: 17px;
    margin: 0;
}

/* Newsletter estilo boutique, no morado */
.newsletter-section {
    padding: 90px 0 !important;
    background:
        radial-gradient(circle at top left, rgba(217, 47, 131, 0.08), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
}

.newsletter-card {
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.12), transparent 35%),
        linear-gradient(145deg, #171014, #080808) !important;
    color: #ffffff !important;
    border-radius: 36px !important;
    border: 0 !important;
    padding: 70px 48px !important;
}

.newsletter-card h2,
.newsletter-card p {
    color: #ffffff !important;
}

.newsletter-form input {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.68) !important;
}

.newsletter-form button,
.newsletter-form .btn-primary {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #ffffff !important;
}

/* Footer redes con fondo blanco */
.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.footer-social-icons a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: all 0.25s ease;
}

.footer-social-icons a:hover {
    background: var(--gold-gradient);
    color: #111111;
    transform: translateY(-2px);
}

.footer-social-icons svg {
    width: 20px;
    height: 20px;
}

/* Footer mejorado */
.site-footer {
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.10), transparent 32%),
        linear-gradient(145deg, #111111 0%, #050505 100%) !important;
    padding-top: 74px !important;
}

.footer-logo-image {
    max-height: 120px !important;
}

.footer-brand p {
    max-width: 360px !important;
}

.footer-note {
    color: rgba(255,255,255,0.64) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-top: 16px !important;
}

/* Header iconos tamaño Crystalino */
.top-social-icons a {
    width: 34px !important;
    height: 34px !important;
}

.top-social-icons svg {
    width: 21px !important;
    height: 21px !important;
}

/* Separación de botones en secciones finales */
.social-contact-links,
.contact-social-links,
.about-social-links {
    margin-top: 30px !important;
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.social-contact-links a,
.about-section a[href*="tiktok"],
.contact-section a[href*="tiktok"],
.content-section a[href*="tiktok"] {
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    border: 1px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    font-weight: 600 !important;
}

.social-contact-links a:hover,
.about-section a[href*="tiktok"]:hover,
.contact-section a[href*="tiktok"]:hover,
.content-section a[href*="tiktok"]:hover {
    background: var(--gold-gradient) !important;
    border-color: #d7a53b !important;
}

/* Responsive */
@media (max-width: 980px) {
    .keyak-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-card,
    .category-preview-card {
        min-height: 240px !important;
    }
}

@media (max-width: 640px) {
    .keyak-benefits-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        grid-template-columns: 1fr !important;
    }

    .footer-social-icons {
        justify-content: flex-start;
    }
}
/* =========================================================
   KEYAK FINAL UI FIXES - Product / Home / Contact / Header
   ========================================================= */

/* Quitar la rayita al lado del carrito en desktop */
.mobile-menu-toggle {
    display: none !important;
}

@media (max-width: 980px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
    }
}

/* ================= PRODUCT IMAGE ACTIONS ================= */

.crystal-main-image {
    position: relative !important;
    border-radius: 18px !important;
    background: #fbf8f9 !important;
    border: 1px solid #eadfe5 !important;
    min-height: 620px !important;
    padding: 24px !important;
}

.crystal-main-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 0 !important;
}

.product-image-actions {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.product-zoom-button,
.product-next-button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1.5px solid #111111 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111111 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
    transition: all 0.25s ease !important;
}

.product-zoom-button svg,
.product-next-button svg {
    width: 20px !important;
    height: 20px !important;
}

.product-zoom-button:hover,
.product-next-button:hover {
    background: var(--gold-gradient) !important;
    border-color: #d7a53b !important;
    transform: translateY(-2px);
}

/* Ficha producto más parecida a Crystalino */

.crystal-product-layout {
    align-items: start !important;
}

.crystal-product-info {
    padding-top: 10px !important;
}

.crystal-product-info h1 {
    font-size: clamp(42px, 4vw, 64px) !important;
    line-height: 1.04 !important;
    font-weight: 700 !important;
    letter-spacing: -2px !important;
}

.product-size-options {
    gap: 14px !important;
}

.size-pill {
    min-height: 50px !important;
    padding: 0 26px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
}

.crystal-product-price {
    font-size: clamp(48px, 5vw, 72px) !important;
    letter-spacing: -2px !important;
}

.product-purchase-row {
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
    gap: 16px !important;
}

.product-qty-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    font-size: 30px !important;
}

.quantity-selector input {
    width: 52px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
}

.crystal-add-cart,
.buy-now-button {
    min-height: 58px !important;
    font-size: 18px !important;
}

.product-share-box {
    margin-top: 34px !important;
    padding-top: 24px !important;
}

.product-share-box div {
    gap: 24px !important;
}

.product-share-box a {
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.back-link {
    margin-top: 24px !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #111111 !important;
}

/* ================= CONTACT / ABOUT SOCIAL BLOCK ================= */

.contact-section,
.about-section,
.content-section {
    position: relative;
    z-index: 1;
}

.contact-section .social-contact-links,
.about-section .social-contact-links,
.content-section .social-contact-links {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.contact-section a[href*="tiktok"],
.about-section a[href*="tiktok"],
.content-section a[href*="tiktok"] {
    margin-top: 18px !important;
    margin-bottom: 38px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    border-radius: 999px !important;
    border: 1.5px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    font-weight: 600 !important;
}

.contact-section a[href*="tiktok"]:hover,
.about-section a[href*="tiktok"]:hover,
.content-section a[href*="tiktok"]:hover {
    background: var(--gold-gradient) !important;
    border-color: #d7a53b !important;
}

/* Separar footer para que no se pegue al botón */
.contact-section + .site-footer,
.about-section + .site-footer,
.content-section + .site-footer {
    margin-top: 55px !important;
}

/* ================= HOME MODULES MORE ELEGANT ================= */

/* Separación visual entre secciones */
.hero,
.hero-section,
.home-hero {
    border-bottom: 1px solid #f0e6ec !important;
}

.categories-section,
.featured-products-section,
.newsletter-section,
.keyak-benefits-strip {
    position: relative;
    isolation: isolate;
}

.categories-section {
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.055), transparent 34%),
        #ffffff !important;
    padding-top: 105px !important;
    padding-bottom: 105px !important;
}

.categories-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1120px, calc(100% - 44px));
    height: 1px;
    background: #eadfe5;
    transform: translateX(-50%);
}

.featured-products-section {
    background:
        linear-gradient(180deg, #fbf7f8 0%, #ffffff 100%) !important;
    padding-top: 105px !important;
    padding-bottom: 105px !important;
}

.professional-section,
.home-professional-section {
    margin-top: 0 !important;
    padding: 115px 0 !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(229, 48, 138, 0.22), transparent 36%),
        radial-gradient(circle at 85% 30%, rgba(215, 165, 59, 0.12), transparent 32%),
        linear-gradient(145deg, #170f14 0%, #050505 72%) !important;
}

.newsletter-section {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
}

/* Encabezados más claros */
.section-heading,
.section-header {
    margin-bottom: 62px !important;
}

.section-heading h2,
.section-header h2 {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-heading p,
.section-header p {
    max-width: 760px !important;
    font-size: 18px !important;
}

/* Cards 01-04 más ordenadas */
.categories-grid,
.category-preview-grid {
    gap: 28px !important;
}

.category-card,
.category-preview-card {
    min-height: 310px !important;
    padding: 46px 38px !important;
    border-radius: 34px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at top right, rgba(229, 48, 138, 0.05), transparent 30%),
        #ffffff !important;
    border: 1px solid #eadfe5 !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.045) !important;
}

.category-card:nth-child(even),
.category-preview-card:nth-child(even) {
    border-color: rgba(215, 165, 59, 0.6) !important;
}

.category-card span,
.category-preview-card span {
    color: #e5308a !important;
    font-size: 14px !important;
    letter-spacing: 2.8px !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
}

.category-card h3,
.category-preview-card h3 {
    font-size: clamp(42px, 4vw, 62px) !important;
    line-height: 0.95 !important;
    letter-spacing: -1.2px !important;
    margin-bottom: 24px !important;
}

.category-card p,
.category-preview-card p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    color: #74717a !important;
}

/* Bloque de beneficios tipo Crystalino con más aire */
.keyak-benefits-strip {
    padding: 95px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #f0e6ec !important;
    border-bottom: 1px solid #f0e6ec !important;
}

.keyak-benefit-icon {
    width: 105px !important;
    height: 105px !important;
}

.keyak-benefit-icon svg {
    width: 98px !important;
    height: 98px !important;
}

.keyak-benefit-item h3 {
    font-size: 40px !important;
}

.keyak-benefit-item p {
    font-size: 18px !important;
}

/* ================= FOOTER SOCIAL WHITE ICONS ================= */

.footer-social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 26px !important;
}

.footer-social-icons a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #111111 !important;
    display: grid !important;
    place-items: center !important;
    text-decoration: none !important;
}

.footer-social-icons a:hover {
    background: var(--gold-gradient) !important;
    transform: translateY(-2px) !important;
}

.footer-social-icons svg {
    width: 21px !important;
    height: 21px !important;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
    .product-purchase-row {
        grid-template-columns: 1fr !important;
    }

    .crystal-add-cart,
    .buy-now-button {
        width: 100% !important;
    }

    .category-card,
    .category-preview-card {
        min-height: 260px !important;
    }
}

@media (max-width: 640px) {
    .product-image-actions {
        top: 14px;
        right: 14px;
    }

    .product-zoom-button,
    .product-next-button {
        width: 40px !important;
        height: 40px !important;
    }

    .category-card,
    .category-preview-card {
        min-height: 230px !important;
        padding: 34px 28px !important;
    }
}
/* =========================================================
   KEYAK PREMIUM POLISH FINAL
   Header / Product Zoom / Home / About / Contact
   ========================================================= */

/* ================= HEADER SOCIAL ICONS BIGGER ================= */

.top-social-bar {
    min-height: 48px !important;
}

.top-social-inner {
    min-height: 48px !important;
}

.top-social-icons {
    gap: 24px !important;
}

.top-social-icons a {
    width: 38px !important;
    height: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #111111 !important;
}

.top-social-icons a svg {
    width: 24px !important;
    height: 24px !important;
}

.top-shipping-message {
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* ================= PRODUCT IMAGE BETTER SIZE ================= */

.crystal-product-gallery {
    width: 100% !important;
}

.crystal-main-image {
    min-height: 620px !important;
    max-height: 720px !important;
    border-radius: 24px !important;
    background: #fbf8f9 !important;
    border: 1px solid #eadfe5 !important;
    padding: 34px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.crystal-main-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 620px !important;
    object-fit: contain !important;
    padding: 0 !important;
}

/* Lupa y flecha estilo premium */
.product-image-actions {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 20 !important;
}

.product-zoom-button,
.product-next-button {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 1.5px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.12) !important;
    transition: all 0.25s ease !important;
}

.product-zoom-button {
    background: var(--gold-gradient) !important;
    border-color: #d7a53b !important;
}

.product-zoom-button svg,
.product-next-button svg {
    width: 24px !important;
    height: 24px !important;
}

.product-zoom-button:hover,
.product-next-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 46px rgba(0,0,0,0.16) !important;
}

/* Modal zoom */
body.zoom-open {
    overflow: hidden !important;
}

.keyak-image-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 34px;
}

.keyak-image-zoom-modal.open {
    display: flex;
}

.keyak-image-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px);
}

.keyak-image-zoom-content {
    position: relative;
    z-index: 2;
    width: min(1100px, 94vw);
    height: min(780px, 86vh);
    background: #ffffff;
    border-radius: 28px;
    padding: 34px;
    display: grid;
    place-items: center;
    box-shadow: 0 30px 100px rgba(0,0,0,0.35);
}

.keyak-image-zoom-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.keyak-image-zoom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #111111;
    background: #ffffff;
    color: #111111;
    font-size: 32px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

/* ================= PRODUCT DETAIL MORE LIKE CRYSTALINO ================= */

.crystal-product-info h1 {
    font-size: clamp(44px, 4.5vw, 68px) !important;
    line-height: 1.03 !important;
    letter-spacing: -2.4px !important;
    font-weight: 700 !important;
}

.crystal-product-short {
    font-size: 16.5px !important;
    line-height: 1.8 !important;
    color: #55515a !important;
    max-width: 640px !important;
}

.size-pill {
    min-height: 54px !important;
    padding: 0 30px !important;
    font-size: 17px !important;
}

.crystal-product-price {
    font-size: clamp(52px, 5vw, 78px) !important;
    font-weight: 500 !important;
}

.product-purchase-row {
    grid-template-columns: auto minmax(240px, 1fr) auto !important;
    gap: 18px !important;
}

.product-qty-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 32px !important;
}

.quantity-selector input {
    width: 58px !important;
    font-size: 24px !important;
    font-weight: 500 !important;
}

.crystal-add-cart,
.buy-now-button {
    min-height: 60px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.product-payment-note {
    margin-top: 28px !important;
    font-size: 15px !important;
}

.product-share-box {
    margin-top: 36px !important;
    padding-top: 28px !important;
}

.product-share-box > span {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.product-share-box div {
    display: flex !important;
    gap: 26px !important;
    flex-wrap: wrap !important;
}

.product-share-box a {
    font-size: 16px !important;
    text-decoration: none !important;
    color: #111111 !important;
    border-bottom: 1px solid transparent !important;
}

.product-share-box a:hover {
    border-bottom-color: #111111 !important;
}

.back-link {
    display: inline-flex !important;
    margin-top: 28px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #111111 !important;
    font-size: 15px !important;
    color: #111111 !important;
}

/* ================= SEPARATE TIKTOK FROM FOOTER ================= */

.about-section,
.contact-section,
.content-section {
    padding-top: 110px !important;
    padding-bottom: 120px !important;
}

.about-section a[href*="tiktok"],
.contact-section a[href*="tiktok"],
.content-section a[href*="tiktok"] {
    margin-top: 32px !important;
    margin-bottom: 80px !important;
    min-height: 54px !important;
    padding: 0 32px !important;
    border-radius: 999px !important;
    border: 1.5px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    font-weight: 700 !important;
}

.about-section a[href*="tiktok"]:hover,
.contact-section a[href*="tiktok"]:hover,
.content-section a[href*="tiktok"]:hover {
    background: var(--gold-gradient) !important;
    border-color: #d7a53b !important;
}

/* Empuja el footer para que no toque TikTok */
.about-section + .site-footer,
.contact-section + .site-footer,
.content-section + .site-footer,
main + .site-footer {
    margin-top: 70px !important;
}

/* ================= PREMIUM HOME SECTIONS ================= */

.hero,
.hero-section,
.home-hero {
    background:
        radial-gradient(circle at 8% 12%, rgba(229,48,138,0.11), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(215,165,59,0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
    border-bottom: 1px solid #eadfe5 !important;
}

.hero h1,
.hero-content h1,
.home-hero h1,
.home-hero-content h1 {
    font-size: clamp(66px, 8vw, 124px) !important;
    line-height: 0.88 !important;
    letter-spacing: -3.8px !important;
}

.hero p,
.hero-content p,
.home-hero p,
.home-hero-content p {
    font-size: 19px !important;
    line-height: 1.9 !important;
    color: #6d6871 !important;
}

.hero-actions,
.home-hero-actions {
    margin-top: 40px !important;
}

/* Separación real entre módulos */
.categories-section,
.featured-products-section,
.keyak-benefits-strip,
.newsletter-section,
.about-section,
.contact-section {
    position: relative !important;
    isolation: isolate !important;
}

.categories-section {
    background:
        radial-gradient(circle at top left, rgba(229,48,138,0.055), transparent 32%),
        #ffffff !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.featured-products-section {
    background:
        linear-gradient(180deg, #fbf7f8 0%, #ffffff 100%) !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.professional-section,
.home-professional-section {
    padding: 125px 0 !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(229,48,138,0.24), transparent 36%),
        radial-gradient(circle at 88% 24%, rgba(215,165,59,0.16), transparent 32%),
        linear-gradient(145deg, #1a1015 0%, #050505 72%) !important;
}

.newsletter-section {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    background:
        radial-gradient(circle at top left, rgba(229,48,138,0.07), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
}

/* ================= PREMIUM ABOUT / CONTACT ================= */

.about-hero,
.contact-hero,
.page-hero {
    background:
        radial-gradient(circle at 10% 14%, rgba(229,48,138,0.10), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(215,165,59,0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbf7f8 100%) !important;
    border-bottom: 1px solid #eadfe5 !important;
}

.about-hero h1,
.contact-hero h1,
.page-hero h1 {
    font-size: clamp(64px, 8vw, 112px) !important;
    letter-spacing: -3px !important;
}

.about-grid,
.contact-grid {
    gap: 64px !important;
    align-items: center !important;
}

.about-card,
.about-highlight-card,
.content-card,
.contact-card,
.contact-info-card,
.contact-form-card {
    border-radius: 38px !important;
    border: 1px solid #eadfe5 !important;
    background:
        radial-gradient(circle at top right, rgba(229,48,138,0.045), transparent 30%),
        #ffffff !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.08) !important;
    padding: 46px !important;
}

.about-content h2,
.about-text h2,
.content-card h2,
.contact-info-card h2,
.contact-form-card h2,
.contact-card h2 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(48px, 6vw, 86px) !important;
    line-height: 0.94 !important;
    letter-spacing: -2px !important;
    font-weight: 700 !important;
}

.about-content p,
.about-text p,
.content-card p,
.contact-info-card p,
.contact-form-card p,
.contact-card p {
    font-size: 17.5px !important;
    line-height: 1.9 !important;
    color: #625d66 !important;
}

/* Contact form more premium */
.form-group-public input,
.form-group-public textarea {
    border-radius: 22px !important;
    min-height: 54px !important;
    background: #fbf8f9 !important;
    border: 1px solid #eadfe5 !important;
}

.form-group-public textarea {
    min-height: 150px !important;
}

/* ================= CATEGORY CARDS MORE PREMIUM ================= */

.category-card,
.category-preview-card {
    min-height: 330px !important;
    border-radius: 38px !important;
    padding: 48px 40px !important;
    background:
        radial-gradient(circle at top right, rgba(229,48,138,0.055), transparent 30%),
        #ffffff !important;
    border: 1px solid #eadfe5 !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.05) !important;
}

.category-card:nth-child(even),
.category-preview-card:nth-child(even) {
    border-color: rgba(215,165,59,0.72) !important;
}

.category-card h3,
.category-preview-card h3 {
    font-size: clamp(46px, 4vw, 66px) !important;
    line-height: 0.92 !important;
}

.category-card p,
.category-preview-card p {
    font-size: 18.5px !important;
}

/* ================= FOOTER BETTER SEPARATION ================= */

.site-footer {
    margin-top: 0 !important;
    padding-top: 90px !important;
}

.footer-social-icons a {
    width: 46px !important;
    height: 46px !important;
}

.footer-social-icons svg {
    width: 22px !important;
    height: 22px !important;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
    .product-purchase-row {
        grid-template-columns: 1fr !important;
    }

    .crystal-add-cart,
    .buy-now-button {
        width: 100% !important;
    }

    .crystal-main-image {
        min-height: 500px !important;
    }
}

@media (max-width: 640px) {
    .top-social-icons a {
        width: 34px !important;
        height: 34px !important;
    }

    .top-social-icons a svg {
        width: 20px !important;
        height: 20px !important;
    }

    .crystal-main-image {
        min-height: 380px !important;
        padding: 20px !important;
    }

    .product-image-actions {
        top: 16px !important;
        right: 16px !important;
    }

    .product-zoom-button,
    .product-next-button {
        width: 42px !important;
        height: 42px !important;
    }

    .about-card,
    .about-highlight-card,
    .content-card,
    .contact-card,
    .contact-info-card,
    .contact-form-card {
        padding: 30px !important;
        border-radius: 28px !important;
    }
}
/* =========================================================
   PRODUCT IMAGE FRAME + MINIMAL ZOOM
   ========================================================= */

/* Contenedor de la foto principal */
.crystal-main-image {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    min-height: unset !important;
    max-height: unset !important;
    height: auto !important;
    padding: 14px !important;
    border-radius: 26px !important;
    background: #f8f5f6 !important;
    border: 1px solid #eadfe5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Imagen bien encuadrada */
.crystal-main-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
    display: block !important;
}

/* Acciones arriba a la derecha */
.product-image-actions {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 30 !important;
}

/* Ocultamos la flecha para que no estorbe */
.product-next-button {
    display: none !important;
}

/* Lupa minimalista */
.product-zoom-button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(17, 17, 17, 0.16) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
    color: #111111 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    transition: all 0.22s ease !important;
}

.product-zoom-button svg {
    width: 18px !important;
    height: 18px !important;
}

.product-zoom-button:hover {
    background: #ffffff !important;
    border-color: rgba(17, 17, 17, 0.28) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Modal del zoom más limpio */
.keyak-image-zoom-content {
    width: min(1000px, 92vw) !important;
    height: min(760px, 88vh) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    background: #ffffff !important;
}

.keyak-image-zoom-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.keyak-image-zoom-close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(17,17,17,0.14) !important;
    background: rgba(255,255,255,0.92) !important;
    font-size: 28px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
}

/* Responsive */
@media (max-width: 640px) {
    .crystal-main-image {
        aspect-ratio: 1 / 1 !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .crystal-main-image img {
        border-radius: 14px !important;
    }

    .product-image-actions {
        top: 12px !important;
        right: 12px !important;
    }

    .product-zoom-button {
        width: 36px !important;
        height: 36px !important;
    }

    .product-zoom-button svg {
        width: 16px !important;
        height: 16px !important;
    }
}
/* =========================================================
   PRODUCT ZOOM MODAL - RESPONSIVE PREMIUM FRAME
   ========================================================= */

.keyak-image-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.keyak-image-zoom-modal.open {
    display: flex;
}

.keyak-image-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Cuadro principal del zoom */
.keyak-image-zoom-content {
    position: relative;
    z-index: 2;
    width: min(1180px, 94vw);
    height: min(820px, 90vh);
    background: #ffffff;
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Marco interno para que la imagen no quede pegada */
.keyak-image-zoom-content::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 20px;
    background: #f8f5f6;
    border: 1px solid #ece2e7;
    z-index: 0;
}

/* Imagen ampliada */
.keyak-image-zoom-content img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: calc(100% - 28px);
    max-height: calc(100% - 28px);
    object-fit: contain;
    object-position: center center;
    display: block;
    border-radius: 18px;
}

/* Botón cerrar */
.keyak-image-zoom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(17,17,17,0.14);
    background: rgba(255,255,255,0.92);
    color: #111111;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    transition: all 0.22s ease;
}

.keyak-image-zoom-close:hover {
    transform: scale(1.04);
    background: #ffffff;
}

/* Responsive tablet */
@media (max-width: 980px) {
    .keyak-image-zoom-modal {
        padding: 18px;
    }

    .keyak-image-zoom-content {
        width: 95vw;
        height: 86vh;
        border-radius: 22px;
        padding: 14px;
    }

    .keyak-image-zoom-content::before {
        inset: 14px;
        border-radius: 16px;
    }

    .keyak-image-zoom-content img {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        border-radius: 14px;
    }

    .keyak-image-zoom-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        font-size: 24px;
    }
}

/* Responsive móvil */
@media (max-width: 640px) {
    .keyak-image-zoom-modal {
        padding: 12px;
    }

    .keyak-image-zoom-content {
        width: 96vw;
        height: 82vh;
        border-radius: 18px;
        padding: 10px;
    }

    .keyak-image-zoom-content::before {
        inset: 10px;
        border-radius: 12px;
    }

    .keyak-image-zoom-content img {
        max-width: calc(100% - 12px);
        max-height: calc(100% - 12px);
        border-radius: 10px;
    }

    .keyak-image-zoom-close {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}
/* =========================================================
   PRODUCT PRICE + BUTTONS SIZE FIX
   ========================================================= */

/* Precio más elegante y adaptable */
.crystal-product-price {
    font-size: clamp(38px, 4vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.8px !important;
    font-weight: 500 !important;
    margin-bottom: 24px !important;
    padding-bottom: 22px !important;
}

/* Fila de compra más balanceada */
.product-purchase-row {
    display: grid !important;
    grid-template-columns: auto minmax(190px, 1fr) minmax(130px, auto) !important;
    gap: 14px !important;
    align-items: center !important;
}

/* Botones de cantidad más pequeños */
.product-qty-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 26px !important;
}

.quantity-selector input {
    width: 42px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

/* Add to cart más proporcionado */
.crystal-add-cart {
    min-height: 54px !important;
    border-radius: 999px !important;
    padding: 0 34px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* Buy now estilo pill, no círculo */
.buy-now-button {
    min-height: 54px !important;
    border-radius: 999px !important;
    padding: 0 28px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 132px !important;
    text-align: center !important;
}

/* Nota debajo más limpia */
.product-payment-note {
    margin-top: 24px !important;
    font-size: 15px !important;
    color: #6f6a73 !important;
}

/* Responsive */
@media (max-width: 980px) {
    .crystal-product-price {
        font-size: clamp(36px, 7vw, 48px) !important;
    }

    .product-purchase-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .quantity-selector {
        justify-content: flex-start !important;
    }

    .crystal-add-cart,
    .buy-now-button {
        width: 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .crystal-product-price {
        font-size: 38px !important;
        letter-spacing: -1px !important;
    }

    .product-qty-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .quantity-selector input {
        width: 38px !important;
        font-size: 18px !important;
    }

    .crystal-add-cart,
    .buy-now-button {
        min-height: 50px !important;
        font-size: 16px !important;
    }
}
/* =========================================================
   FIX CATEGORY SECTION SPACING + CARD TYPOGRAPHY
   ========================================================= */

/* Sección de categorías con separación real antes del bloque negro */
.categories-section,
.category-preview-section {
    padding-top: 95px !important;
    padding-bottom: 120px !important;
    background: #ffffff !important;
}

/* Separación visual antes del fondo negro */
.categories-section + .professional-section,
.categories-section + .home-professional-section,
.category-preview-section + .professional-section,
.category-preview-section + .home-professional-section {
    margin-top: 42px !important;
}

/* Grid más elegante */
.categories-grid,
.category-preview-grid {
    gap: 28px !important;
    align-items: stretch !important;
}

/* Tarjetas menos gigantes y más finas */
.category-card,
.category-preview-card {
    min-height: 255px !important;
    padding: 42px 38px !important;
    border-radius: 32px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    background:
        radial-gradient(circle at top right, rgba(229, 48, 138, 0.045), transparent 34%),
        #ffffff !important;
    border: 1px solid #eadfe5 !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.045) !important;
}

/* Alternar borde dorado de forma más elegante */
.category-card:nth-child(2),
.category-card:nth-child(4),
.category-preview-card:nth-child(2),
.category-preview-card:nth-child(4) {
    border-color: rgba(215, 165, 59, 0.75) !important;
}

/* Número 01, 02, 03, 04 más fino */
.category-card span,
.category-preview-card span {
    font-size: 13px !important;
    letter-spacing: 3px !important;
    font-weight: 800 !important;
    color: #e5308a !important;
    margin-bottom: 32px !important;
    display: block !important;
}

/* Títulos más pequeños, más adentro y alineados */
.category-card h3,
.category-preview-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(36px, 3vw, 48px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.8px !important;
    font-weight: 700 !important;
    margin: 0 0 22px !important;
    max-width: 260px !important;
}

/* Texto con mejor tamaño y aire */
.category-card p,
.category-preview-card p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #77737c !important;
    max-width: 270px !important;
    margin: 0 !important;
}

/* El bloque negro debe empezar separado, no pegado */
.professional-section,
.home-professional-section {
    margin-top: 0 !important;
    padding-top: 110px !important;
    padding-bottom: 110px !important;
    border-top: 0 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .categories-grid,
    .category-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .category-card,
    .category-preview-card {
        min-height: 240px !important;
    }
}

@media (max-width: 640px) {
    .categories-section,
    .category-preview-section {
        padding-top: 70px !important;
        padding-bottom: 80px !important;
    }

    .categories-grid,
    .category-preview-grid {
        grid-template-columns: 1fr !important;
    }

    .category-card,
    .category-preview-card {
        min-height: auto !important;
        padding: 34px 28px !important;
    }

    .category-card h3,
    .category-preview-card h3 {
        font-size: 38px !important;
    }

    .categories-section + .professional-section,
    .categories-section + .home-professional-section,
    .category-preview-section + .professional-section,
    .category-preview-section + .home-professional-section {
        margin-top: 26px !important;
    }
}
/* =========================================================
   FIX PRODUCT DETAIL TEXT BOXES
   Description / Ingredients / How to Use / Dilution Guide
   ========================================================= */

.crystal-product-details,
.product-tabs-grid {
    width: 100% !important;
    margin-top: 80px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

.product-info-box {
    width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #eadfe5 !important;
    border-radius: 28px !important;
    padding: 34px 36px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.045) !important;
    overflow: hidden !important;
}

.product-info-box h2 {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 24px !important;
}

/* Aquí está la corrección principal */
.product-info-box p {
    width: 100% !important;
    max-width: 100% !important;
    color: #5f5b63 !important;
    font-size: 16px !important;
    line-height: 1.85 !important;
    font-weight: 300 !important;
    margin: 0 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Mejor separación del Back to Shop */
.back-link {
    display: inline-flex !important;
    margin: 34px auto 0 !important;
    width: fit-content !important;
    color: #111111 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #111111 !important;
}

/* Centrar el Back to Shop si está antes de las cajas */
.crystal-product-page .back-link {
    justify-content: center !important;
}

/* Responsive */
@media (max-width: 980px) {
    .crystal-product-details,
    .product-tabs-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 55px !important;
    }

    .product-info-box {
        padding: 30px 26px !important;
        border-radius: 24px !important;
    }

    .product-info-box h2 {
        font-size: 24px !important;
    }

    .product-info-box p {
        font-size: 15px !important;
    }
}
/* =========================================================
   PRODUCT SHARE ICONS
   ========================================================= */

.product-share-box {
    margin-top: 36px !important;
    padding-top: 28px !important;
    border-top: 1px solid #ece2e7 !important;
}

.product-share-box > span {
    display: block !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 16px !important;
}

.product-share-links {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.product-share-links a {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid #e8dde3 !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.22s ease !important;
}

.product-share-links a svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    flex: 0 0 19px !important;
}

.product-share-links a:hover {
    background: var(--gold-gradient) !important;
    color: #111111 !important;
    border-color: #d7a53b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

/* Variante minimalista en móvil */
@media (max-width: 560px) {
    .product-share-links {
        gap: 10px !important;
    }

    .product-share-links a {
        min-height: 42px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    .product-share-links a svg {
        width: 17px !important;
        height: 17px !important;
    }
}
/* =========================================================
   PRODUCT DESCRIPTION TEXT CENTERED / CLEAN
   ========================================================= */

.crystal-product-info {
    text-align: center !important;
}

.product-category-line {
    text-align: center !important;
    display: block !important;
}

.crystal-product-info h1 {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.crystal-product-short {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: #625d66 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Mantener tamaño y opciones centradas */
.product-option-block {
    text-align: center !important;
}

.product-size-options {
    justify-content: center !important;
}

.crystal-product-price {
    text-align: center !important;
}

/* Centrar fila de compra cuando sea posible */
.product-purchase-row {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centrar nota, share y back */
.product-payment-note,
.product-share-box,
.back-link {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.product-share-links {
    justify-content: center !important;
}

.quantity-selector {
    justify-content: center !important;
}
/* =========================================================
   PRODUCT DETAIL ALIGN LEFT + JUSTIFIED DESCRIPTION
   ========================================================= */

/* Toda la información del producto alineada a la izquierda */
.crystal-product-info {
    text-align: left !important;
}

/* Categoría */
.product-category-line {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Título a la izquierda */
.crystal-product-info h1 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 760px !important;
}

/* Descripción justificada */
.crystal-product-short {
    text-align: justify !important;
    text-align-last: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 760px !important;
    line-height: 1.9 !important;
    color: #625d66 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Size alineado izquierda */
.product-option-block {
    text-align: left !important;
}

.product-size-options {
    justify-content: flex-start !important;
}

/* Precio a la izquierda */
.crystal-product-price {
    text-align: left !important;
}

/* Botones alineados a la izquierda */
.product-purchase-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 760px !important;
}

.quantity-selector {
    justify-content: flex-start !important;
}

/* Nota de pago a la izquierda */
.product-payment-note {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Share a la izquierda */
.product-share-box {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.product-share-links {
    justify-content: flex-start !important;
}

/* Back to Shop a la izquierda */
.back-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}
/* =========================================================
   SHOP PRODUCT COUNT - PREMIUM STYLE
   ========================================================= */

.shop-heading {
    margin-bottom: 34px !important;
}

.shop-heading h1 {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin: 0 0 10px !important;
}

/* Convierte el texto en una presentación más premium */
.shop-heading h1::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    background: var(--gold-gradient);
    border-radius: 999px;
    margin-top: 14px;
}

.shop-heading p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #77737c !important;
    max-width: 520px !important;
    margin: 0 !important;
}

/* Más aire entre título y productos */
.shop-content {
    padding-top: 4px !important;
}

@media (max-width: 640px) {
    .shop-heading h1 {
        font-size: 26px !important;
    }

    .shop-heading p {
        font-size: 14px !important;
    }
}
/* =========================================================
   SHOP PRODUCT COUNT - SMALLER PREMIUM FIX
   ========================================================= */

.shop-heading h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.4px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.shop-heading h1::after {
    width: 38px !important;
    height: 2px !important;
    margin-top: 10px !important;
}

.shop-heading p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 440px !important;
}

.shop-heading {
    margin-bottom: 26px !important;
}

@media (max-width: 640px) {
    .shop-heading h1 {
        font-size: 22px !important;
    }

    .shop-heading p {
        font-size: 13px !important;
    }
}
/* =========================================================
   SHOP PRODUCT IMAGES - SAME STANDARD SIZE
   ========================================================= */

/* Todas las tarjetas del shop con la misma estructura */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Caja de imagen estándar */
.product-image {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    background: #fbf8f9 !important;
    border-bottom: 1px solid #eadfe5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 24px !important;
}

/* Imagen siempre centrada y proporcional */
.product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
    padding: 0 !important;
}

/* Si prefieres que no recorte nada, cambia object-fit: cover por contain.
   Pero para tienda premium tipo Crystalino, cover se ve más uniforme. */

/* Cuerpo de la tarjeta alineado abajo */
.product-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
}

/* Footer del producto siempre alineado */
.product-card-footer {
    margin-top: auto !important;
}

/* Grid alineado */
.products-grid,
.shop-products-grid {
    align-items: stretch !important;
}

/* Responsive */
@media (max-width: 980px) {
    .product-image {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }
}

@media (max-width: 640px) {
    .product-image {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        padding: 18px !important;
    }
}
/* =========================================================
   HOME BUILDER PUBLIC SECTIONS
   ========================================================= */

.home-builder-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

.home-builder-section .container {
    position: relative;
    z-index: 2;
}

.home-style-soft {
    background: #fbf8f9;
}

.home-style-dark {
    background: #111111;
    color: #ffffff;
}

.home-style-premium {
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.12), transparent 32%),
        linear-gradient(135deg, #111111, #2a1824);
    color: #ffffff;
}

.home-style-dark .section-eyebrow,
.home-style-premium .section-eyebrow {
    color: #f4d779;
}

.home-style-dark p,
.home-style-premium p {
    color: rgba(255,255,255,0.76);
}

.home-block-hero {
    min-height: 720px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.home-builder-hero-content {
    max-width: 760px;
}

.home-builder-hero-content h1 {
    margin: 0 0 26px;
    font-size: clamp(48px, 7vw, 92px);
    line-height: 0.95;
    letter-spacing: -3px;
    font-weight: 500;
}

.home-builder-hero-content p {
    max-width: 620px;
    margin: 0 0 34px;
    font-size: 18px;
    line-height: 1.8;
}

.home-builder-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px;
    align-items: center;
}

.home-builder-text h2 {
    margin: 0 0 24px;
    font-size: clamp(34px, 4.2vw, 62px);
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 500;
}

.home-builder-text p {
    margin: 0 0 30px;
    color: #626262;
    font-size: 16px;
    line-height: 1.9;
}

.home-builder-image {
    border-radius: 34px;
    overflow: hidden;
    background: #f6f3f5;
    min-height: 460px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.08);
}

.home-builder-image img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    display: block;
}

.home-builder-banner {
    border-radius: 38px;
    padding: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.16), transparent 34%),
        linear-gradient(135deg, #111111, #25151e);
    color: #ffffff;
}

.home-builder-banner h2 {
    margin: 0 0 16px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -1.5px;
    font-weight: 500;
}

.home-builder-banner p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,0.76);
    line-height: 1.8;
}

.home-builder-banner .btn-primary {
    flex-shrink: 0;
}

.home-featured-products {
    margin-top: 44px;
}

.home-builder-center-button {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.home-no-image .home-builder-content-grid {
    grid-template-columns: 1fr;
}

.home-no-image .home-builder-text {
    max-width: 820px;
}

/* Responsive */
@media (max-width: 900px) {
    .home-builder-section {
        padding: 70px 0;
    }

    .home-block-hero {
        min-height: 620px;
    }

    .home-builder-content-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .home-builder-image {
        min-height: 360px;
        border-radius: 28px;
    }

    .home-builder-image img {
        min-height: 360px;
    }

    .home-builder-banner {
        display: grid;
        padding: 38px;
        border-radius: 30px;
    }
}

@media (max-width: 640px) {
    .home-builder-section {
        padding: 58px 0;
    }

    .home-block-hero {
        min-height: 560px;
    }

    .home-builder-hero-content h1 {
        letter-spacing: -1.6px;
    }

    .home-builder-banner {
        padding: 30px 24px;
    }
}
/* =========================================================
   KEYAK BENEFITS ICON GRID
   ========================================================= */

.keyak-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 46px;
}

.keyak-benefit-card {
    background: #ffffff;
    border: 1px solid rgba(238, 231, 235, 0.95);
    border-radius: 30px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.045);
    transition: all 0.25s ease;
}

.keyak-benefit-card:hover {
    transform: translateY(-6px);
    border-color: rgba(229, 48, 138, 0.24);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.075);
}

.keyak-benefit-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.18), transparent 45%),
        linear-gradient(135deg, rgba(229, 48, 138, 0.10), rgba(215, 165, 59, 0.16));
    color: #d92f83;
}

.keyak-benefit-icon svg {
    width: 34px;
    height: 34px;
}

.keyak-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #111111;
}

.keyak-benefit-card p {
    margin: 0;
    color: #68646b;
    font-size: 14px;
    line-height: 1.7;
}

.home-style-dark .keyak-benefit-card,
.home-style-premium .keyak-benefit-card {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
}

.home-style-dark .keyak-benefit-card h3,
.home-style-premium .keyak-benefit-card h3 {
    color: #ffffff;
}

.home-style-dark .keyak-benefit-card p,
.home-style-premium .keyak-benefit-card p {
    color: rgba(255,255,255,0.72);
}

@media (max-width: 1000px) {
    .keyak-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .keyak-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .keyak-benefit-card {
        padding: 28px 22px;
    }
}
/* =========================================================
   HOME BUILDER TYPOGRAPHY CONTROLS
   ========================================================= */

.home-builder-section,
.home-builder-section h1,
.home-builder-section h2,
.home-builder-section h3,
.home-builder-section p,
.home-builder-section span,
.home-builder-section a {
    font-family: "Manrope", "Montserrat", Arial, sans-serif;
}

.home-builder-section .section-eyebrow {
    color: var(--home-subtitle-color, #d92f83) !important;
}

.home-builder-section h1,
.home-builder-section h2 {
    font-size: var(--home-title-size, 56px) !important;
    color: var(--home-title-color, inherit) !important;
}

.home-builder-section p {
    font-size: var(--home-text-size, 16px) !important;
    color: var(--home-text-color, inherit) !important;
}

.home-builder-section .btn-primary {
    background: var(--home-button-bg, #111111) !important;
    color: var(--home-button-text, #ffffff) !important;
    border-color: var(--home-button-bg, #111111) !important;
}

.home-builder-section .btn-primary:hover {
    opacity: 0.88;
}

.home-style-dark h1,
.home-style-dark h2,
.home-style-premium h1,
.home-style-premium h2 {
    color: var(--home-title-color, #ffffff) !important;
}

.home-style-dark p,
.home-style-premium p {
    color: var(--home-text-color, rgba(255,255,255,0.76)) !important;
}

.keyak-benefit-card h3 {
    font-family: "Manrope", "Montserrat", Arial, sans-serif;
}
/* =========================================================
   HERO BACKGROUND SAFETY FIX
   ========================================================= */

.home-block-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
/* =========================================================
   KEYAK HOME BUILDER FINAL PUBLIC STYLES
   Hero 01 fixed, slider ready, typography controls
   ========================================================= */

.home-builder-section,
.home-builder-section h1,
.home-builder-section h2,
.home-builder-section h3,
.home-builder-section p,
.home-builder-section span,
.home-builder-section a {
    font-family: "Manrope", "Montserrat", Arial, sans-serif;
}

.home-builder-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}

.home-builder-section .container {
    position: relative;
    z-index: 2;
}

.home-style-soft {
    background: #fbf8f9;
}

.home-style-dark {
    background: #111111;
    color: #ffffff;
}

.home-style-premium {
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.12), transparent 32%),
        linear-gradient(135deg, #111111, #2a1824);
    color: #ffffff;
}

/* Typography Controls */
.home-builder-section .section-eyebrow {
    color: var(--home-subtitle-color, #d92f83) !important;
}

.home-builder-section h1,
.home-builder-section h2 {
    font-size: var(--home-title-size, 56px) !important;
    color: var(--home-title-color, inherit) !important;
}

.home-builder-section p {
    font-size: var(--home-text-size, 16px) !important;
    color: var(--home-text-color, inherit) !important;
}

.home-builder-section .btn-primary {
    background: var(--home-button-bg, #111111) !important;
    color: var(--home-button-text, #ffffff) !important;
    border-color: var(--home-button-bg, #111111) !important;
}

.home-builder-section .btn-primary:hover {
    opacity: 0.88;
}

/* Dark/Premium defaults */
.home-style-dark h1,
.home-style-dark h2,
.home-style-premium h1,
.home-style-premium h2 {
    color: var(--home-title-color, #ffffff) !important;
}

.home-style-dark p,
.home-style-premium p {
    color: var(--home-text-color, rgba(255,255,255,0.76)) !important;
}

.home-style-dark .section-eyebrow,
.home-style-premium .section-eyebrow {
    color: var(--home-subtitle-color, #f4d779) !important;
}

/* =========================================================
   HERO 01 SLIDER
   ========================================================= */

.home-block-hero,
.keyak-hero-slider {
    position: relative !important;
    min-height: 720px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.keyak-hero-media-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
}

.keyak-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.keyak-hero-slide.active {
    opacity: 1;
}

.keyak-hero-slide img,
.keyak-hero-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.keyak-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.62) 0%,
            rgba(0,0,0,0.46) 38%,
            rgba(0,0,0,0.20) 100%
        );
}

.keyak-hero-slider .container {
    position: relative;
    z-index: 2;
}

.home-builder-hero-content {
    max-width: 760px;
    position: relative;
    z-index: 2;
}

.home-builder-hero-content h1 {
    margin: 0 0 26px;
    font-size: var(--home-title-size, clamp(48px, 7vw, 92px)) !important;
    line-height: 0.95;
    letter-spacing: -3px;
    font-weight: 500;
}

.home-builder-hero-content p {
    max-width: 720px;
    margin: 0 0 34px;
    font-size: var(--home-text-size, 18px) !important;
    line-height: 1.8;
}

.home-builder-hero-content .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 34px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

/* =========================================================
   TEXT + IMAGE / CUSTOM BLOCKS
   ========================================================= */

.home-builder-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 58px;
    align-items: center;
}

.home-builder-text h2 {
    margin: 0 0 24px;
    font-size: var(--home-title-size, clamp(34px, 4.2vw, 62px)) !important;
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 500;
}

.home-builder-text p {
    margin: 0 0 30px;
    color: var(--home-text-color, #626262) !important;
    font-size: var(--home-text-size, 16px) !important;
    line-height: 1.9;
}

.home-builder-image {
    border-radius: 34px;
    overflow: hidden;
    background: #f6f3f5;
    min-height: 460px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.08);
}

.home-builder-image img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    display: block;
}

.home-no-image .home-builder-content-grid {
    grid-template-columns: 1fr;
}

.home-no-image .home-builder-text {
    max-width: 820px;
}

/* =========================================================
   BANNER BLOCK
   ========================================================= */

.home-builder-banner {
    border-radius: 38px;
    padding: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.16), transparent 34%),
        linear-gradient(135deg, #111111, #25151e);
    color: #ffffff;
}

.home-builder-banner h2 {
    margin: 0 0 16px;
    font-size: var(--home-title-size, clamp(34px, 4vw, 56px)) !important;
    line-height: 1;
    letter-spacing: -1.5px;
    font-weight: 500;
}

.home-builder-banner p {
    max-width: 680px;
    margin: 0;
    color: var(--home-text-color, rgba(255,255,255,0.76)) !important;
    line-height: 1.8;
}

.home-builder-banner .btn-primary {
    flex-shrink: 0;
}

/* =========================================================
   FEATURED PRODUCTS BLOCK
   ========================================================= */

.home-featured-products {
    margin-top: 44px;
}

.home-builder-center-button {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

/* =========================================================
   ICON GRID / BENEFITS BLOCK
   ========================================================= */

.keyak-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 46px;
}

.keyak-benefit-card {
    background: #ffffff;
    border: 1px solid rgba(238, 231, 235, 0.95);
    border-radius: 30px;
    padding: 34px 26px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.045);
    transition: all 0.25s ease;
}

.keyak-benefit-card:hover {
    transform: translateY(-6px);
    border-color: rgba(229, 48, 138, 0.24);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.075);
}

.keyak-benefit-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at top left, rgba(229, 48, 138, 0.18), transparent 45%),
        linear-gradient(135deg, rgba(229, 48, 138, 0.10), rgba(215, 165, 59, 0.16));
    color: #d92f83;
}

.keyak-benefit-icon svg {
    width: 34px;
    height: 34px;
}

.keyak-benefit-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #111111;
    font-family: "Manrope", "Montserrat", Arial, sans-serif;
}

.keyak-benefit-card p {
    margin: 0;
    color: #68646b;
    font-size: 14px;
    line-height: 1.7;
}

.home-style-dark .keyak-benefit-card,
.home-style-premium .keyak-benefit-card {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
}

.home-style-dark .keyak-benefit-card h3,
.home-style-premium .keyak-benefit-card h3 {
    color: #ffffff;
}

.home-style-dark .keyak-benefit-card p,
.home-style-premium .keyak-benefit-card p {
    color: rgba(255,255,255,0.72);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .keyak-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-builder-section {
        padding: 70px 0;
    }

    .home-block-hero,
    .keyak-hero-slider {
        min-height: 620px !important;
    }

    .home-builder-content-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .home-builder-image {
        min-height: 360px;
        border-radius: 28px;
    }

    .home-builder-image img {
        min-height: 360px;
    }

    .home-builder-banner {
        display: grid;
        padding: 38px;
        border-radius: 30px;
    }
}

@media (max-width: 640px) {
    .home-builder-section {
        padding: 58px 0;
    }

    .home-block-hero,
    .keyak-hero-slider {
        min-height: 560px !important;
    }

    .home-builder-hero-content h1 {
        letter-spacing: -1.6px;
        font-size: clamp(38px, 13vw, 58px) !important;
    }

    .home-builder-hero-content p {
        font-size: var(--home-text-size, 16px) !important;
    }

    .home-builder-banner {
        padding: 30px 24px;
    }

    .keyak-benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .keyak-benefit-card {
        padding: 28px 22px;
    }
}
/* =========================================================
   KEYAK HERO SLIDER FIX
   Hace que las imágenes/video del Hero se monten como slider
   ========================================================= */

.keyak-hero-slider {
    position: relative !important;
    min-height: 720px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.keyak-hero-media-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.keyak-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1.2s ease, visibility 1.2s ease !important;
    z-index: 0 !important;
}

.keyak-hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

.keyak-hero-slide img,
.keyak-hero-slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.keyak-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.62) 0%,
            rgba(0,0,0,0.46) 38%,
            rgba(0,0,0,0.20) 100%
        ) !important;
    pointer-events: none !important;
}

.keyak-hero-slider .container {
    position: relative !important;
    z-index: 3 !important;
}

.home-builder-hero-content {
    position: relative !important;
    z-index: 4 !important;
}

@media (max-width: 700px) {
    .keyak-hero-slider {
        min-height: 620px !important;
    }
}
/* =========================================================
   KEYAK HERO SLIDER ARROWS + DOTS
   ========================================================= */

.keyak-hero-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;

    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;

    border: 1px solid rgba(255,255,255,0.38) !important;
    background: rgba(0,0,0,0.26) !important;
    color: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 300 !important;

    cursor: pointer !important;
    transition: all 0.25s ease !important;
    backdrop-filter: blur(10px) !important;
}

.keyak-hero-arrow:hover {
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
}

.keyak-hero-prev {
    left: 28px !important;
}

.keyak-hero-next {
    right: 28px !important;
}

.keyak-hero-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 34px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.keyak-hero-dot {
    width: 11px !important;
    height: 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    background: rgba(255,255,255,0.35) !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.keyak-hero-dot.active {
    width: 34px !important;
    background: #ffffff !important;
}

@media (max-width: 700px) {
    .keyak-hero-arrow {
        width: 42px !important;
        height: 42px !important;
        font-size: 32px !important;
    }

    .keyak-hero-prev {
        left: 14px !important;
    }

    .keyak-hero-next {
        right: 14px !important;
    }

    .keyak-hero-dots {
        bottom: 22px !important;
    }
}
/* =========================================================
   KEYAK HERO SLIDE INDIVIDUAL TEXT + COLORS
   ========================================================= */

.keyak-hero-slider {
    position: relative !important;
    min-height: 720px !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.keyak-hero-media-layer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.keyak-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1.1s ease, visibility 1.1s ease !important;
}

.keyak-hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.keyak-hero-slide img,
.keyak-hero-slide video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

.keyak-hero-slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.64) 0%,
            rgba(0,0,0,0.48) 42%,
            rgba(0,0,0,0.20) 100%
        ) !important;
}

.keyak-hero-slide .container {
    position: relative !important;
    z-index: 3 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.keyak-hero-slide .home-builder-hero-content {
    max-width: 780px !important;
    position: relative !important;
    z-index: 4 !important;
    padding-top: 90px !important;
}

.keyak-hero-slide .section-eyebrow {
    display: inline-flex !important;
    margin-bottom: 22px !important;
    color: var(--slide-subtitle-color, #f4d779) !important;
}

.keyak-hero-slide h1 {
    margin: 0 0 26px !important;
    color: var(--slide-title-color, #ffffff) !important;
    font-size: var(--home-title-size, clamp(48px, 7vw, 92px)) !important;
    line-height: 0.96 !important;
    letter-spacing: -3px !important;
    font-weight: 500 !important;
}

.keyak-hero-slide p {
    max-width: 720px !important;
    margin: 0 0 34px !important;
    color: var(--slide-text-color, #ffffff) !important;
    font-size: var(--home-text-size, 18px) !important;
    line-height: 1.8 !important;
}

.keyak-hero-arrow {
    z-index: 10 !important;
}

.keyak-hero-dots {
    z-index: 10 !important;
}

@media (max-width: 700px) {
    .keyak-hero-slider {
        min-height: 620px !important;
    }

    .keyak-hero-slide .home-builder-hero-content {
        padding-top: 80px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .keyak-hero-slide h1 {
        font-size: clamp(38px, 13vw, 58px) !important;
        letter-spacing: -1.6px !important;
    }
}
/* =========================================================
   HOME - TRENDING NOW
========================================================= */

.home-trending-section {
    padding: 90px 0;
    background: #f7f4f6;
}

.home-trending-header {
    text-align: center;
    margin-bottom: 38px;
}

.home-trending-header .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e5308a;
}

.home-trending-header h2 {
    margin: 0 0 12px;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 700;
    color: #111111;
}

.home-trending-header p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.75;
    color: #6f6f78;
}

.home-trending-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

/* CARD */
.home-trending-card {
    background: #ffffff;
    border: 1px solid #eee6ea;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(24, 15, 22, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-height: 100%;
}

.home-trending-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(24, 15, 22, 0.08);
}

.home-trending-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* IMAGE */
.home-trending-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fbf8fa;
    overflow: hidden;
    border-bottom: 1px solid #f3edf1;
}

.home-trending-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-trending-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c29a2e;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* CONTENT */
/* ESTA ES LA PARTE QUE TE CORRIGE EL TEXTO TAPADO */
.home-trending-content {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.home-trending-category {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8c8692;
}

.home-trending-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    color: #111111;

    /* importante para que no se salga raro */
    word-break: break-word;
    overflow-wrap: anywhere;
}

.home-trending-price {
    margin: 4px 0 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #e5308a;
}

/* opcional: descripción corta */
.home-trending-short {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6f6f78;
}

/* botón inferior opcional */
.home-trending-footer {
    margin-top: auto;
    padding-top: 8px;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
    .home-trending-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .home-trending-section {
        padding: 72px 0;
    }

    .home-trending-header h2 {
        font-size: 36px;
    }

    .home-trending-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .home-trending-title {
        font-size: 26px;
    }
}

@media (max-width: 640px) {
    .home-trending-grid {
        grid-template-columns: 1fr;
    }

    .home-trending-header h2 {
        font-size: 30px;
    }

    .home-trending-header p {
        font-size: 16px;
    }

    .home-trending-content {
        padding: 20px 20px 24px;
    }

    .home-trending-title {
        font-size: 24px;
    }

    .home-trending-price {
        font-size: 17px;
    }
}
/* =========================================================
   HOME - TRENDING NOW FIXED PRODUCT CARDS
   Corrige texto pegado debajo de la curva del card
   ========================================================= */

.home-trending-section {
    padding: 90px 0 !important;
    background: #f7f4f6 !important;
}

.home-trending-header {
    text-align: center !important;
    margin-bottom: 42px !important;
}

.home-trending-header .eyebrow {
    display: inline-block !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--home-subtitle-color, #e5308a) !important;
}

.home-trending-header h2 {
    margin: 0 0 14px !important;
    font-size: var(--home-title-size, 54px) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    color: var(--home-title-color, #111111) !important;
    letter-spacing: -1.8px !important;
}

.home-trending-header p {
    max-width: 740px !important;
    margin: 0 auto !important;
    font-size: var(--home-text-size, 16px) !important;
    line-height: 1.8 !important;
    color: var(--home-text-color, #666666) !important;
}

.home-trending-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
}

.home-trending-card {
    background: #ffffff !important;
    border: 1px solid #eee6ea !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(24, 15, 22, 0.055) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.home-trending-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 60px rgba(24, 15, 22, 0.09) !important;
}

.home-trending-card a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
}

.home-trending-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #fbf8fa !important;
    overflow: hidden !important;
    border-bottom: 1px solid #f3edf1 !important;
}

.home-trending-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.home-trending-image.placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #c29a2e !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    background:
        linear-gradient(135deg, #e5308a, #d7a53b) !important;
    color: #ffffff !important;
}

.home-trending-content {
    padding: 24px 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    min-height: 150px !important;
}

.home-trending-category {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #8c8692 !important;
}

.home-trending-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    color: #111111 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.home-trending-price {
    margin: 4px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #e5308a !important;
}

.home-trending-empty {
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 34px !important;
    text-align: center !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px dashed #e8dde4 !important;
    color: #77747a !important;
}

.home-trending-empty p {
    margin: 0 !important;
}

@media (max-width: 1199px) {
    .home-trending-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .home-trending-section {
        padding: 72px 0 !important;
    }

    .home-trending-header h2 {
        font-size: 40px !important;
    }

    .home-trending-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media (max-width: 640px) {
    .home-trending-section {
        padding: 58px 0 !important;
    }

    .home-trending-grid {
        grid-template-columns: 1fr !important;
    }

    .home-trending-header h2 {
        font-size: 32px !important;
    }

    .home-trending-content {
        padding: 22px 22px 26px !important;
    }

    .home-trending-title {
        font-size: 22px !important;
    }
}
/* =========================================================
   HEADER TOP BAR - SOCIAL ICONS RIGHT RESPONSIVE
   ========================================================= */

.top-social-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
    min-height: 66px !important;
}

.top-social-inner {
    min-height: 66px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 20px !important;
}

.top-social-spacer {
    min-height: 1px !important;
}

.top-shipping-message {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #0f0f0f !important;
    white-space: nowrap !important;
}

.top-social-icons {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
}

.top-social-icons a {
    width: 26px !important;
    height: 26px !important;
    color: #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.top-social-icons a:hover {
    opacity: 0.72 !important;
    transform: translateY(-1px) !important;
}

.top-social-icons svg {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
}

@media (max-width: 900px) {
    .top-social-bar {
        min-height: 56px !important;
    }

    .top-social-inner {
        min-height: 56px !important;
        grid-template-columns: 1fr auto !important;
        gap: 14px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .top-social-spacer {
        display: none !important;
    }

    .top-shipping-message {
        grid-column: 1 !important;
        justify-self: start !important;
        text-align: left !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    .top-social-icons {
        grid-column: 2 !important;
        justify-self: end !important;
        gap: 18px !important;
    }

    .top-social-icons a {
        width: 24px !important;
        height: 24px !important;
    }

    .top-social-icons svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 560px) {
    .top-social-inner {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 8px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .top-shipping-message {
        grid-column: 1 !important;
        justify-self: center !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .top-social-icons {
        grid-column: 1 !important;
        justify-self: center !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    .top-social-icons a {
        width: 23px !important;
        height: 23px !important;
    }

    .top-social-icons svg {
        width: 21px !important;
        height: 21px !important;
    }
}
/* =========================================================
   HIDE CATEGORY SIDEBAR BOX
   Quita el bloque lateral de Categories en todas las páginas
   ========================================================= */

.shop-sidebar,
.product-sidebar,
.category-sidebar,
.categories-sidebar,
.filters-sidebar,
.sidebar-categories,
.shop-categories,
.category-filter-box,
.categories-box,
.filter-card,
.shop-filter-card {
    display: none !important;
}

/* Si el layout tenía 2 columnas, lo convertimos a 1 columna */
.shop-layout,
.products-layout,
.store-layout,
.catalog-layout,
.shop-content-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
}

/* El área de productos ocupa todo el ancho */
.shop-main,
.products-main,
.catalog-main,
.store-main,
.products-content {
    width: 100% !important;
    max-width: 100% !important;
}
/* =========================================================
   GLOBAL PRODUCT CARDS - SAME STYLE AS TRENDING NOW
   Aplica el estilo premium de Trending Now a todos los productos
   ========================================================= */

.products-grid,
.product-grid,
.shop-products-grid,
.related-products-grid,
.home-featured-products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

/* Card general */
.product-card {
    background: #ffffff !important;
    border: 1px solid #eee6ea !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(24, 15, 22, 0.055) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    height: 100% !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 60px rgba(24, 15, 22, 0.09) !important;
}

/* Imagen */
.product-card .product-image,
.product-card > a.product-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #fbf8fa !important;
    overflow: hidden !important;
    border-bottom: 1px solid #f3edf1 !important;
    display: block !important;
    border-radius: 0 !important;
}

.product-card .product-image img,
.product-card > a.product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.product-card:hover .product-image img {
    transform: scale(1.035) !important;
}

/* Placeholder */
.product-placeholder,
.product-card .product-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #e5308a, #d7a53b) !important;
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

/* Contenido */
.product-card-content,
.product-info,
.product-card .product-info {
    padding: 24px 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    min-height: 150px !important;
}

/* Categoría */
.product-card-content span,
.product-card .product-category,
.product-category {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #8c8692 !important;
}

/* Título */
.product-card-content h3,
.product-card h3,
.product-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    color: #111111 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.product-card-content h3 a,
.product-card h3 a,
.product-title a {
    color: #111111 !important;
    text-decoration: none !important;
}

.product-card-content h3 a:hover,
.product-card h3 a:hover,
.product-title a:hover {
    color: #e5308a !important;
}

/* Precio */
.product-card-content strong,
.product-card .product-price,
.product-price {
    margin: 4px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #e5308a !important;
}

/* Descripción corta si aparece */
.product-card-content p,
.product-card .product-excerpt,
.product-excerpt {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #6f6f78 !important;
}

/* Botones dentro de cards */
.product-card .btn-primary,
.product-card .add-to-cart-btn,
.product-card .view-product-btn {
    margin-top: 12px !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #111111 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.product-card .btn-primary:hover,
.product-card .add-to-cart-btn:hover,
.product-card .view-product-btn:hover {
    background: linear-gradient(135deg, #e5308a, #d7a53b) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* =========================================================
   RESPONSIVE PRODUCT CARDS
   ========================================================= */

@media (max-width: 1199px) {
    .products-grid,
    .product-grid,
    .shop-products-grid,
    .related-products-grid,
    .home-featured-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .products-grid,
    .product-grid,
    .shop-products-grid,
    .related-products-grid,
    .home-featured-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}

@media (max-width: 640px) {
    .products-grid,
    .product-grid,
    .shop-products-grid,
    .related-products-grid,
    .home-featured-products {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .product-card-content,
    .product-info,
    .product-card .product-info {
        padding: 22px 22px 26px !important;
    }

    .product-card-content h3,
    .product-card h3,
    .product-title {
        font-size: 22px !important;
    }

    .product-card-content strong,
    .product-card .product-price,
    .product-price {
        font-size: 18px !important;
    }
}
/* =========================================================
   PRODUCT CARDS SIN DESCRIPCION
   Igual al estilo visual de Trending Now
   ========================================================= */

/* Ocultar descripción/excerpt en todas las cards */
.product-card p,
.product-card .product-excerpt,
.product-card .product-description,
.product-card .short-description,
.product-card .card-description,
.product-info p,
.product-info .product-excerpt,
.product-info .product-description,
.trending-product-card p,
.shop-product-card p {
    display: none !important;
}

/* Estructura general de la card */
.product-card,
.trending-product-card,
.shop-product-card {
    background: #fff !important;
    border: 1px solid #eee6ea !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 45px rgba(24, 15, 22, 0.055) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    height: 100% !important;
}

.product-card:hover,
.trending-product-card:hover,
.shop-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 60px rgba(24, 15, 22, 0.09) !important;
}

/* Imagen */
.product-card .product-image,
.product-card > a.product-image,
.trending-product-card .product-image,
.shop-product-card .product-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #fbf8fa !important;
    display: block !important;
}

.product-card .product-image img,
.product-card > a.product-image img,
.trending-product-card .product-image img,
.shop-product-card .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.product-card:hover .product-image img,
.trending-product-card:hover .product-image img,
.shop-product-card:hover .product-image img {
    transform: scale(1.03) !important;
}

/* Contenido */
.product-card .product-info,
.product-card-content,
.trending-product-card .product-info,
.shop-product-card .product-info {
    padding: 26px 28px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
}

/* Categoría */
.product-card .product-category,
.product-card-content .product-category,
.trending-product-card .product-category,
.shop-product-card .product-category,
.product-card span:first-child {
    display: block !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6e6e73 !important;
}

/* Título */
.product-card h3,
.product-card .product-title,
.product-card-content h3,
.trending-product-card h3,
.shop-product-card h3 {
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: #111111 !important;
}

.product-card h3 a,
.product-card .product-title a,
.product-card-content h3 a,
.trending-product-card h3 a,
.shop-product-card h3 a {
    color: #111111 !important;
    text-decoration: none !important;
}

.product-card h3 a:hover,
.product-card .product-title a:hover,
.product-card-content h3 a:hover,
.trending-product-card h3 a:hover,
.shop-product-card h3 a:hover {
    color: #e5308a !important;
}

/* Precio */
.product-card .product-price,
.product-card-content .product-price,
.product-card strong,
.trending-product-card .product-price,
.shop-product-card .product-price {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #5f6672 !important;
}

/* Responsive */
@media (max-width: 991px) {
    .product-card .product-info,
    .product-card-content,
    .trending-product-card .product-info,
    .shop-product-card .product-info {
        padding: 22px 22px 24px !important;
    }

    .product-card h3,
    .product-card .product-title,
    .product-card-content h3,
    .trending-product-card h3,
    .shop-product-card h3 {
        font-size: 24px !important;
    }

    .product-card .product-category,
    .product-card-content .product-category,
    .trending-product-card .product-category,
    .shop-product-card .product-category {
        font-size: 14px !important;
    }

    .product-card .product-price,
    .product-card-content .product-price,
    .trending-product-card .product-price,
    .shop-product-card .product-price {
        font-size: 18px !important;
    }
}

@media (max-width: 640px) {
    .product-card h3,
    .product-card .product-title,
    .product-card-content h3,
    .trending-product-card h3,
    .shop-product-card h3 {
        font-size: 20px !important;
    }

    .product-card .product-price,
    .product-card-content .product-price,
    .trending-product-card .product-price,
    .shop-product-card .product-price {
        font-size: 17px !important;
    }
}
/* =========================================================
   ORDER CONFIRMATION / THANK YOU PAGE RESPONSIVE
   Separa texto, número de orden y botones
   ========================================================= */

.order-success-card,
.thank-you-card,
.confirmation-card,
.order-confirmation-card,
.checkout-success-card {
    max-width: 1120px !important;
    margin: 60px auto !important;
    padding: 80px 70px !important;
    border-radius: 46px !important;
    background: #ffffff !important;
    border: 1px solid #eadde4 !important;
    box-shadow: 0 24px 80px rgba(24, 15, 22, 0.06) !important;
    text-align: center !important;
}

.order-success-card h1,
.thank-you-card h1,
.confirmation-card h1,
.order-confirmation-card h1,
.checkout-success-card h1 {
    margin: 34px 0 26px !important;
    font-size: clamp(36px, 5vw, 58px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    color: #050505 !important;
    letter-spacing: -1.6px !important;
}

.order-success-card p,
.thank-you-card p,
.confirmation-card p,
.order-confirmation-card p,
.checkout-success-card p {
    max-width: 860px !important;
    margin: 0 auto 30px !important;
    font-size: clamp(17px, 2vw, 23px) !important;
    line-height: 1.65 !important;
    color: #111111 !important;
}

.order-number,
.confirmation-order-number,
.order-success-number,
.thank-you-order-number {
    display: block !important;
    margin: 36px auto 34px !important;
    font-size: clamp(18px, 2.2vw, 24px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #111111 !important;
}

.order-success-actions,
.thank-you-actions,
.confirmation-actions,
.order-confirmation-actions,
.checkout-success-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 18px !important;
}

.order-success-actions a,
.thank-you-actions a,
.confirmation-actions a,
.order-confirmation-actions a,
.checkout-success-actions a {
    min-width: 230px !important;
    min-height: 64px !important;
    padding: 0 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

/* Por si los botones usan clases generales */
.order-success-card .btn-primary,
.thank-you-card .btn-primary,
.confirmation-card .btn-primary,
.order-confirmation-card .btn-primary,
.checkout-success-card .btn-primary {
    margin-top: 0 !important;
}

.order-success-card .btn-secondary,
.thank-you-card .btn-secondary,
.confirmation-card .btn-secondary,
.order-confirmation-card .btn-secondary,
.checkout-success-card .btn-secondary {
    margin-top: 0 !important;
}

/* Responsive tablet */
@media (max-width: 900px) {
    .order-success-card,
    .thank-you-card,
    .confirmation-card,
    .order-confirmation-card,
    .checkout-success-card {
        margin: 40px 18px !important;
        padding: 64px 38px !important;
        border-radius: 38px !important;
    }

    .order-success-card p,
    .thank-you-card p,
    .confirmation-card p,
    .order-confirmation-card p,
    .checkout-success-card p {
        max-width: 680px !important;
    }
}

/* Responsive mobile */
@media (max-width: 560px) {
    .order-success-card,
    .thank-you-card,
    .confirmation-card,
    .order-confirmation-card,
    .checkout-success-card {
        margin: 28px 14px !important;
        padding: 48px 22px !important;
        border-radius: 30px !important;
    }

    .order-success-card h1,
    .thank-you-card h1,
    .confirmation-card h1,
    .order-confirmation-card h1,
    .checkout-success-card h1 {
        margin: 28px 0 20px !important;
        font-size: 34px !important;
        letter-spacing: -0.8px !important;
    }

    .order-success-card p,
    .thank-you-card p,
    .confirmation-card p,
    .order-confirmation-card p,
    .checkout-success-card p {
        font-size: 17px !important;
        line-height: 1.6 !important;
        margin-bottom: 26px !important;
    }

    .order-number,
    .confirmation-order-number,
    .order-success-number,
    .thank-you-order-number {
        margin: 30px auto 28px !important;
        font-size: 17px !important;
        line-height: 1.45 !important;
        word-break: break-word !important;
    }

    .order-success-actions,
    .thank-you-actions,
    .confirmation-actions,
    .order-confirmation-actions,
    .checkout-success-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 18px !important;
    }

    .order-success-actions a,
    .thank-you-actions a,
    .confirmation-actions a,
    .order-confirmation-actions a,
    .checkout-success-actions a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        font-size: 17px !important;
    }
}
/* ===========================
   ORDER SUCCESS / THANK YOU
   =========================== */

.order-success-card,
.thank-you-card,
.checkout-success-card,
.confirmation-card {
    text-align: center;
}

.order-success-card .order-number,
.thank-you-card .order-number,
.checkout-success-card .order-number,
.confirmation-card .order-number {
    display: block;
    margin-top: 28px;
    margin-bottom: 42px; /* aquí separa el texto de los botones */
    font-size: 18px;
    line-height: 1.5;
    color: #111;
}

.order-success-card .order-actions,
.thank-you-card .order-actions,
.checkout-success-card .order-actions,
.confirmation-card .order-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.order-success-card .order-actions a,
.thank-you-card .order-actions a,
.checkout-success-card .order-actions a,
.confirmation-card .order-actions a {
    min-width: 220px;
    min-height: 62px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
}

/* espacio extra entre descripción y número de orden */
.order-success-card .success-description,
.thank-you-card .success-description,
.checkout-success-card .success-description,
.confirmation-card .success-description {
    margin-bottom: 26px;
}

/* responsive */
@media (max-width: 768px) {
    .order-success-card .order-number,
    .thank-you-card .order-number,
    .checkout-success-card .order-number,
    .confirmation-card .order-number {
        margin-bottom: 26px;
        font-size: 17px;
    }

    .order-success-card .order-actions,
    .thank-you-card .order-actions,
    .checkout-success-card .order-actions,
    .confirmation-card .order-actions {
        flex-direction: column;
        gap: 12px;
    }

    .order-success-card .order-actions a,
    .thank-you-card .order-actions a,
    .checkout-success-card .order-actions a,
    .confirmation-card .order-actions a {
        width: 100%;
        max-width: 320px;
    }
}
/* =========================================================
   KEYAK — UNIFICACIÓN GLOBAL DE TIPOGRAFÍAS
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Fuente general
|--------------------------------------------------------------------------
*/

html,
body,
button,
input,
select,
textarea {
    font-family: "Manrope", Arial, sans-serif;
}

body {
    font-weight: 400;
    line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Todos los títulos principales
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6,
.page-hero h1,
.page-hero h2,
.section-title,
.checkout-subtitle {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: normal;
    text-transform: none;
}

/*
|--------------------------------------------------------------------------
| Títulos H1 de Cart, Checkout, About y Contact
|--------------------------------------------------------------------------
*/

.cart-hero h1,
.checkout-hero h1,
.about-hero h1,
.contact-hero h1,
.page-hero h1 {
    margin: 0 0 16px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/*
|--------------------------------------------------------------------------
| Subtítulos principales H2
|--------------------------------------------------------------------------
*/

.cart-section h2,
.checkout-section h2,
.about-section h2,
.contact-section h2,
.checkout-form-card > h2,
.checkout-summary-card h2,
.cart-summary-card h2,
.product-info-box h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/*
|--------------------------------------------------------------------------
| Títulos secundarios H3
|--------------------------------------------------------------------------
*/

.cart-section h3,
.checkout-section h3,
.about-section h3,
.contact-section h3,
.cart-item-info h3,
.payment-method-card h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.25;
}

/*
|--------------------------------------------------------------------------
| Eyebrows o textos pequeños sobre títulos
|--------------------------------------------------------------------------
*/

.eyebrow,
.page-hero .eyebrow,
[class*="eyebrow"] {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Textos descriptivos de los hero
|--------------------------------------------------------------------------
*/

.cart-hero p,
.checkout-hero p,
.about-hero p,
.contact-hero p,
.page-hero p {
    max-width: 720px;
    margin: 0 auto;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
}

/*
|--------------------------------------------------------------------------
| Formularios
|--------------------------------------------------------------------------
*/

.checkout-form label,
.contact-form label,
.form-group-public label {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.checkout-form input,
.checkout-form textarea,
.checkout-form select,
.contact-form input,
.contact-form textarea,
.contact-form select,
.form-group-public input,
.form-group-public textarea,
.form-group-public select {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/*
|--------------------------------------------------------------------------
| Botones
|--------------------------------------------------------------------------
*/

.checkout-button,
.place-order-button,
.clear-cart-btn,
.btn-primary,
.btn-secondary,
.contact-form button,
.cart-section button,
.checkout-section button {
    font-family: "Manrope", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/*
|--------------------------------------------------------------------------
| Carrito generado por JavaScript
|--------------------------------------------------------------------------
*/

.empty-cart h2,
.cart-summary-card h2,
.checkout-empty h2,
.checkout-summary-card h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 600;
    line-height: 1.15;
}

.cart-item-info h3 {
    margin: 0 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

/*
|--------------------------------------------------------------------------
| About
|--------------------------------------------------------------------------
*/

.about-section h1,
.about-section h2,
.about-section h3,
.about-story h2,
.about-values h2,
.about-values h3,
.about-professionals h2,
[class*="about-"] h1,
[class*="about-"] h2,
[class*="about-"] h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: normal;
}

/*
|--------------------------------------------------------------------------
| Contact
|--------------------------------------------------------------------------
*/

.contact-section h1,
.contact-section h2,
.contact-section h3,
.contact-support h2,
.contact-form-card h2,
.contact-social h2,
[class*="contact-"] h1,
[class*="contact-"] h2,
[class*="contact-"] h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: normal;
}

/*
|--------------------------------------------------------------------------
| Evitar que otras reglas cambien la fuente de los títulos
|--------------------------------------------------------------------------
*/

.cart-section .checkout-subtitle,
.checkout-section .checkout-subtitle {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

/*
|--------------------------------------------------------------------------
| Ajustes móviles
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .cart-hero h1,
    .checkout-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .page-hero h1 {
        font-size: 42px;
        line-height: 1.08;
    }

    .cart-section h2,
    .checkout-section h2,
    .about-section h2,
    .contact-section h2,
    .checkout-form-card > h2,
    .checkout-summary-card h2,
    .cart-summary-card h2 {
        font-size: 30px;
    }

    .cart-item-info h3 {
        font-size: 22px;
    }

}
/* =========================================================
   KEYAK — TÍTULOS UNIFICADOS DEFINITIVOS
   Cart · Checkout · About · Contact
   ========================================================= */

/* Títulos principales de las páginas */

.page-hero h1,
.cart-hero h1,
.checkout-hero h1,
.about-hero h1,
.contact-hero h1,
.contact-page-hero h1,
.about-page-hero h1,
[class*="contact"] .page-hero h1,
[class*="about"] .page-hero h1 {
    margin: 0 0 18px !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(38px, 4vw, 56px) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
}

/* Títulos internos H2 */

.cart-section h2,
.checkout-section h2,
.about-section h2,
.contact-section h2,
.checkout-form-card h2,
.checkout-summary-card h2,
.cart-summary-card h2,
.contact-form-card h2,
[class*="about-"] h2,
[class*="contact-"] h2 {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(26px, 2.5vw, 36px) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
}

/* Títulos H3 */

.cart-section h3,
.checkout-section h3,
.about-section h3,
.contact-section h3,
.cart-item-info h3,
[class*="about-"] h3,
[class*="contact-"] h3 {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
}

/* Texto pequeño superior */

.page-hero .eyebrow,
.cart-hero .eyebrow,
.checkout-hero .eyebrow,
.about-hero .eyebrow,
.contact-hero .eyebrow {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

/* Descripción debajo del título */

.page-hero p,
.cart-hero p,
.checkout-hero p,
.about-hero p,
.contact-hero p {
    max-width: 760px !important;
    margin: 0 auto !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
}

/* Evitar títulos excesivamente anchos */

.contact-hero h1,
.about-hero h1 {
    max-width: 1050px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Móvil */

@media (max-width: 768px) {

    .page-hero h1,
    .cart-hero h1,
    .checkout-hero h1,
    .about-hero h1,
    .contact-hero h1,
    .contact-page-hero h1,
    .about-page-hero h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    .cart-section h2,
    .checkout-section h2,
    .about-section h2,
    .contact-section h2,
    .checkout-form-card h2,
    .checkout-summary-card h2,
    .cart-summary-card h2 {
        font-size: 27px !important;
    }

    .page-hero p,
    .cart-hero p,
    .checkout-hero p,
    .about-hero p,
    .contact-hero p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}
/* =========================================================
   KEYAK — FOOTER TIPOGRAFÍA UNIFICADA
   ========================================================= */

.site-footer,
.site-footer * {
    font-family: "Manrope", Arial, sans-serif;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .footer-title,
.site-footer .footer-column-title,
.site-footer strong {
    font-family: "Manrope", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title,
.site-footer .footer-column-title {
    margin: 0 0 24px !important;
    font-size: 17px !important;
}

.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}

.site-footer a {
    text-decoration: none;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li {
    margin-bottom: 14px;
}

/* Evita que los títulos del footer hereden Cormorant */

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-family: "Manrope", Arial, sans-serif !important;
}

/* Ajuste móvil */

@media (max-width: 768px) {

    .site-footer h2,
    .site-footer h3,
    .site-footer h4,
    .site-footer .footer-title,
    .site-footer .footer-column-title {
        margin-bottom: 16px !important;
        font-size: 16px !important;
    }

    .site-footer p,
    .site-footer a,
    .site-footer li,
    .site-footer span {
        font-size: 15px;
    }

}
/* =========================================================
   KEYAK — HERO UNIFICADO
   About · Contact · Cart · Checkout
   ========================================================= */

.about-hero,
.contact-hero,
.cart-hero,
.checkout-hero {
    padding: 70px 20px 72px !important;
    text-align: center !important;
    background: #fbf8f9 !important;
}

.about-hero .container,
.contact-hero .container,
.cart-hero .container,
.checkout-hero .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Texto pequeño superior */

.about-hero .eyebrow,
.contact-hero .eyebrow,
.cart-hero .eyebrow,
.checkout-hero .eyebrow {
    display: block !important;
    margin-bottom: 14px !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: #e5308a !important;
}

/* Títulos principales */

.about-hero h1,
.contact-hero h1,
.cart-hero h1,
.checkout-hero h1 {
    max-width: 1100px !important;
    margin: 0 auto 22px !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(54px, 6vw, 84px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    text-align: center !important;
    text-transform: none !important;
    color: #111111 !important;
}

/* Descripción inferior */

.about-hero p,
.contact-hero p,
.cart-hero p,
.checkout-hero p {
    max-width: 1050px !important;
    margin: 0 auto !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: -0.01em !important;
    text-align: center !important;
    color: #252525 !important;
}

/* Tablet */

@media (max-width: 992px) {

    .about-hero,
    .contact-hero,
    .cart-hero,
    .checkout-hero {
        padding: 58px 24px 62px !important;
    }

    .about-hero h1,
    .contact-hero h1,
    .cart-hero h1,
    .checkout-hero h1 {
        max-width: 850px !important;
        font-size: clamp(46px, 7vw, 68px) !important;
        line-height: 1.02 !important;
    }

    .about-hero p,
    .contact-hero p,
    .cart-hero p,
    .checkout-hero p {
        max-width: 760px !important;
        font-size: 17px !important;
    }

}

/* Móvil */

@media (max-width: 600px) {

    .about-hero,
    .contact-hero,
    .cart-hero,
    .checkout-hero {
        padding: 46px 18px 50px !important;
    }

    .about-hero .eyebrow,
    .contact-hero .eyebrow,
    .cart-hero .eyebrow,
    .checkout-hero .eyebrow {
        margin-bottom: 12px !important;
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
    }

    .about-hero h1,
    .contact-hero h1,
    .cart-hero h1,
    .checkout-hero h1 {
        max-width: 100% !important;
        margin-bottom: 18px !important;
        font-size: 42px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
    }

    .about-hero p,
    .contact-hero p,
    .cart-hero p,
    .checkout-hero p {
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

}
/* =========================================================
   KEYAK — TÍTULO DE PRODUCTO UNIFICADO
   ========================================================= */

.crystal-product-info h1,
.crystal-product-page h1,
.product-detail-section h1 {
    margin: 0 0 24px !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(42px, 5vw, 68px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
    text-transform: none !important;
    color: #111111 !important;
}

.crystal-product-short {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: -0.01em !important;
    color: #555555 !important;
}

.crystal-product-price {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(44px, 5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: #111111 !important;
}

/* Móvil */

@media (max-width: 768px) {

    .crystal-product-info h1,
    .crystal-product-page h1,
    .product-detail-section h1 {
        font-size: 40px !important;
        line-height: 1.06 !important;
        letter-spacing: -0.04em !important;
    }

    .crystal-product-short {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .crystal-product-price {
        font-size: 44px !important;
    }
}
/* =========================================================
   KEYAK — TÍTULO Y PRECIO DE PRODUCTO MÁS MODERADOS
   ========================================================= */

.crystal-product-info h1,
.crystal-product-page h1,
.product-detail-section h1 {
    font-size: clamp(36px, 4vw, 54px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    font-weight: 600 !important;
    margin-bottom: 22px !important;
}

.crystal-product-price {
    font-size: clamp(36px, 4vw, 50px) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    font-weight: 500 !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
}

/* Tablet */

@media (max-width: 992px) {

    .crystal-product-info h1,
    .crystal-product-page h1,
    .product-detail-section h1 {
        font-size: 44px !important;
    }

    .crystal-product-price {
        font-size: 42px !important;
    }
}

/* Móvil */

@media (max-width: 600px) {

    .crystal-product-info h1,
    .crystal-product-page h1,
    .product-detail-section h1 {
        font-size: 34px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }

    .crystal-product-price {
        font-size: 36px !important;
        margin-top: 22px !important;
        margin-bottom: 22px !important;
    }
}
/* =========================================================
   KEYAK — ORDER SUCCESS TYPOGRAPHY
   ========================================================= */

.order-success-section h1,
.order-success-card h1,
.order-success-content h1,
.order-success-section .success-title {
    margin: 0 auto 22px !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: clamp(42px, 5vw, 66px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
    text-transform: none !important;
    color: #111111 !important;
}

.order-success-section .eyebrow,
.order-success-card .eyebrow {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: #e5308a !important;
}

.order-success-section p,
.order-success-card p,
.order-success-content p {
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

@media (max-width: 768px) {

    .order-success-section h1,
    .order-success-card h1,
    .order-success-content h1,
    .order-success-section .success-title {
        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }
}
/* KEYAK — Main website link + unified typography */

html,
body,
button,
input,
textarea,
select,
.site-header,
.site-header a,
.site-header span,
.site-header p {
    font-family: "Montserrat", Arial, sans-serif;
}

.keyak-main-website-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #111111;
    color: #111111;
    background: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.keyak-main-website-link:hover,
.keyak-main-website-link:focus {
    color: #ffffff;
    background: #e5308a;
    border-color: #e5308a;
}

.mobile-main-website-link {
    color: #e5308a !important;
    font-weight: 700 !important;
}

@media (max-width: 991px) {
    .keyak-main-website-link {
        display: none;
    }
}
/* KEYAK — SOLO FUENTE DE TÍTULOS DE PRODUCTOS */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");

.product-card h2,
.product-card h3,
.product-card h4,
.product-card-title,
.product-title,
.product-name,
.shop-product-title,
.products-grid .product-title,
.products-grid .product-name,
.products-grid h2,
.products-grid h3,
.product-grid .product-title,
.product-grid .product-name,
.product-grid h2,
.product-grid h3 {
    font-family: "Montserrat", Arial, sans-serif !important;
}
/* KEYAK PRODUCTS — OCULTAR SOLO BOTÓN DE CATEGORÍAS EN MÓVIL */
@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}