/* =============================================================================
   MR. TED SHOP — home.css
   ============================================================================= */

.mrted-shipping-bar {
    position:         relative;
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
    text-align:       center;
    padding:          0.625rem var(--mt-gap);
    font-family:      var(--mt-font-ui);
    font-size:        1rem;
    font-weight:      600;
    letter-spacing:   0.05em;
    text-transform:   uppercase;
}

.mrted-shipping-bar strong { font-weight: 700; }

.mrted-hero {
    position:      relative;
    min-height:    calc(100vh - var(--mt-header-height));
    display:       grid;
    grid-template-columns: 1fr;
    align-items:   center;
    overflow:      hidden;
    padding-block: var(--mt-gap-xl);
}

.mrted-hero::before {
    content:         'MR TED';
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--mt-font-display);
    font-size:       clamp(8rem, 20vw, 22rem);
    color:           rgba(123, 66, 205, 0.12);
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    pointer-events:  none;
    z-index:         0;
    white-space:     nowrap;
}

.mrted-hero__bg      { position: absolute; inset: 0; z-index: 0; }
.mrted-hero__texture { width: 100%; height: 100%; object-fit: cover; }

.mrted-hero__gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, var(--mt-navy) 0%, rgba(63,33,105,0.5) 50%, var(--mt-navy) 100%);
}

.mrted-hero__content {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--mt-gap);
    padding-left:   var(--mt-gap-lg);
}

.mrted-hero__badge { align-self: flex-start; }

.mrted-hero__title {
    font-family:    var(--mt-font-display);
    font-size:      clamp(3.5rem, 8vw, 7rem);
    color:          #fff;
    line-height:    0.95;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mrted-hero__title-accent {
    display:             block;
    color:               transparent;
    -webkit-text-stroke: 2px var(--mt-mint);
    font-size:           clamp(2.5rem, 6vw, 5.5rem);
}

.mrted-hero__desc {
    font-family: var(--mt-font-body);
    font-size:   var(--mt-text-lg);
    color:       var(--mt-text-muted);
    max-width:   480px;
    line-height: 1.7;
}

.mrted-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--mt-gap-sm);
    align-items: center;
    margin-top:  var(--mt-gap-sm);
}

.mrted-hero__image {
    position:        relative;
    z-index:         1;
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    height:          100%;
    min-height:      500px;
}

.mrted-hero__product-img {
    max-height: 85vh;
    width:      auto;
    max-width:  100%;
    object-fit: contain;
    animation:  mrted-float 4s ease-in-out infinite;
}

@keyframes mrted-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-16px); }
}

/* ─── Funko Feature ─────────────────────────────────────────────────────────── */

.mrted-funko-feature { padding-block: var(--mt-gap-xl); }

.mrted-funko-feature__inner {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   var(--mt-gap);
    height:                600px;
}

.mrted-funko-card {
    position:        relative;
    overflow:        hidden;
    border-radius:   var(--mt-radius);
    display:         block;
    text-decoration: none;
    background:      var(--mt-surface-card);
}

.mrted-funko-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.7;
    transition: transform var(--mt-transition-slow), opacity var(--mt-transition);
}

.mrted-funko-card:hover .mrted-funko-card__img { transform: scale(1.05); opacity: 0.9; }

.mrted-funko-card__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(12,0,63,0.95) 0%, rgba(12,0,63,0.3) 60%, transparent 100%);
}

.mrted-funko-card__overlay--mint {
    background: linear-gradient(to top, rgba(0,57,31,0.9) 0%, rgba(0,57,31,0.3) 60%, transparent 100%);
}

.mrted-funko-card__body {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        var(--mt-gap-lg) var(--mt-gap);
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.mrted-funko-card__title {
    font-family:    var(--mt-font-display);
    font-size:      clamp(3rem, 6vw, 5rem);
    color:          #fff;
    line-height:    0.9;
    text-transform: uppercase;
}

.mrted-funko-card__title em {
    font-style:          italic;
    color:               transparent;
    -webkit-text-stroke: 2px var(--mt-mint);
    display:             block;
}

.mrted-funko-card__title--sm { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.mrted-funko-card__cta {
    font-family:    var(--mt-font-ui);
    font-size:      var(--mt-text-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--mt-mint);
}

.mrted-funko-card__cta--wa { display: flex; align-items: center; gap: 0.5rem; color: #25d366; }
.mrted-funko-card__count   { font-family: var(--mt-font-ui); font-size: var(--mt-text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--mt-text-dim); }
.mrted-funko-cards-side    { display: flex; flex-direction: column; gap: var(--mt-gap); }
.mrted-funko-card--side    { flex: 1; }

/* ─── Nuevos Arrivals ───────────────────────────────────────────────────────── */

.mrted-new-arrivals { padding-block: var(--mt-gap-xl); }

.mrted-product-card__price .woocommerce-Price-amount { font-family: var(--mt-font-display); font-size: var(--mt-text-2xl); color: var(--mt-mint); }
.mrted-product-card__price ins { text-decoration: none; }
.mrted-product-card__price del { font-size: var(--mt-text-sm); color: var(--mt-text-dim); opacity: 0.7; }
.mrted-product-card__title a   { color: inherit; text-decoration: none; transition: color var(--mt-transition-fast); }
.mrted-product-card__title a:hover { color: var(--mt-mint); }

/* ─── Visítanos ─────────────────────────────────────────────────────────────── */

.mrted-visit { position: relative; padding-block: var(--mt-gap-xl); margin-top: var(--mt-gap-xl); overflow: hidden; }
.mrted-visit__bg     { position: absolute; inset: 0; z-index: 0; }
.mrted-visit__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.mrted-visit__bg-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(19,6,71,0.95) 0%, rgba(63,33,105,0.8) 100%); }
.mrted-visit__content { position: relative; z-index: 1; padding-block: var(--mt-gap-xl); }
.mrted-visit__text { max-width: 600px; display: flex; flex-direction: column; gap: var(--mt-gap-sm); }
.mrted-visit__eyebrow { font-family: var(--mt-font-ui); font-size: var(--mt-text-sm); letter-spacing: 0.3em; text-transform: uppercase; color: var(--mt-mint); margin: 0; }
.mrted-visit__title { font-family: var(--mt-font-display); font-size: clamp(4rem, 8vw, 7rem); line-height: 0.9; text-transform: uppercase; color: #fff; margin: 0; }
.mrted-visit__title em { font-style: italic; color: transparent; -webkit-text-stroke: 2px var(--mt-mint); }
.mrted-visit__address, .mrted-visit__hours { font-family: var(--mt-font-ui); font-size: var(--mt-text-xl); color: var(--mt-text-muted); font-style: normal; letter-spacing: 0.03em; margin: 0; }
.mrted-visit__actions { display: flex; gap: var(--mt-gap-sm); flex-wrap: wrap; margin-top: var(--mt-gap-sm); }
.mrted-visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mt-gap-lg); align-items: center; min-height: 400px; }
.mrted-visit__map { height: 420px; border-radius: var(--mt-radius-lg); overflow: hidden; border: 1px solid var(--mt-border-accent); }
.mrted-visit__map iframe { width: 100%; height: 100%; border: 0; }

/* ─── WhatsApp flotante ─────────────────────────────────────────────────────── */

.mrted-wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 9000; width: 60px; height: 60px; background-color: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform var(--mt-transition-fast); text-decoration: none; }
.mrted-wa-float:hover { transform: scale(1.1) rotate(-5deg); }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .mrted-hero { min-height: auto; }
    .mrted-hero__image   { display: none; }
    .mrted-hero__content { padding-left: 0; }
    .mrted-funko-feature__inner { grid-template-columns: 1fr; height: auto; }
    .mrted-funko-card--main     { min-height: 400px; }
    .mrted-funko-cards-side     { flex-direction: row; }
    .mrted-funko-card--side     { min-height: 250px; }
}

@media (max-width: 767px) {
    .mrted-shipping-bar { padding: 0.4rem var(--mt-gap-sm); font-size: 0.8rem; }

    .mrted-hero { padding-block: var(--mt-gap) var(--mt-gap-sm); }
    .mrted-hero__title        { font-size: clamp(3rem, 15vw, 5rem); }
    .mrted-hero__title-accent { font-size: clamp(2rem, 12vw, 4rem); }
    .mrted-hero__content      { gap: var(--mt-gap-sm); padding-left: 0; }

    .mrted-hero__actions {
        flex-direction:  row;
        flex-wrap:       wrap;
        justify-content: flex-start;
        align-items:     center;
    }

    .mrted-hero__actions .mrted-btn,
    .mrted-hero__actions .mrted-btn--lg {
        font-size: var(--mt-text-sm);
        padding:   0.6rem 1.25rem;
        flex:      0 0 auto;
        width:     auto;
    }

    .mrted-funko-feature__inner { height: auto; }
    .mrted-funko-card--main     { min-height: 260px; }
    .mrted-funko-cards-side     { flex-direction: column; gap: var(--mt-gap-sm); }
    .mrted-funko-card--side     { min-height: 160px; }

    .mrted-visit__grid { grid-template-columns: 1fr; }
    .mrted-visit__map  { height: 280px; }
    .mrted-wa-float    { bottom: 1.5rem; right: 1.5rem; width: 52px; height: 52px; }
}

@media (max-width: 767px) {
    .mrted-shipping-bar {
        padding:       0.35rem var(--mt-gap-sm);
        font-size:     0.72rem;
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
    }

    .mrted-hero {
        min-height:    calc(100svh - var(--mt-header-height) - 2rem);
        padding-block: var(--mt-gap) var(--mt-gap-lg);
        justify-content: center;
    }

    .mrted-hero__content {
        padding-inline: var(--mt-gap);
    }
}