/* =============================================================================
   MR. TED SHOP — components.css
   Botones, badges, cards, inputs, forms
   Basado en maquetas Stitch / VIBE_VAULT
   ============================================================================= */

/* ─── Botones ───────────────────────────────────────────────────────────────── */

.mrted-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    font-family:     var(--mt-font-display);
    font-size:       var(--mt-text-2xl);
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.875rem 2rem;
    border:          none;
    border-radius:   var(--mt-radius);
    cursor:          pointer;
    text-decoration: none;
    transition:      var(--mt-transition);
    white-space:     nowrap;
    line-height:     1;
}

/* Primario — mint */
.mrted-btn--primary {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
    box-shadow:       var(--mt-glow-mint);
}

.mrted-btn--primary:hover {
    filter:    brightness(1.1);
    transform: scale(1.02);
    color:     var(--mt-text-on-mint);
}

.mrted-btn--primary:active {
    transform: scale(0.97);
}

/* Secundario — violet */
.mrted-btn--secondary {
    background-color: var(--mt-violet);
    color:            var(--mt-text-on-violet);
}

.mrted-btn--secondary:hover {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
    transform:        scale(1.02);
}

/* Ghost — borde */
.mrted-btn--ghost {
    background-color: transparent;
    color:            var(--mt-text-muted);
    border:           1px solid var(--mt-border);
}

.mrted-btn--ghost:hover {
    border-color: var(--mt-mint);
    color:        var(--mt-mint);
}

/* Outline violet */
.mrted-btn--outline {
    background-color: transparent;
    color:            var(--mt-text);
    border:           2px solid var(--mt-violet);
}

.mrted-btn--outline:hover {
    background-color: var(--mt-violet);
    color:            #fff;
}

/* Tamaños */
.mrted-btn--sm {
    font-size: var(--mt-text-lg);
    padding:   0.5rem 1.25rem;
}

.mrted-btn--lg {
    font-size: var(--mt-text-3xl);
    padding:   1.125rem 2.5rem;
}

.mrted-btn--full {
    width: 100%;
}

/* Add to cart — sube desde abajo en hover (maqueta) */
.mrted-btn--add-to-cart {
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
    font-family:      var(--mt-font-display);
    font-size:        var(--mt-text-xl);
    letter-spacing:   0.1em;
    padding:          0.875rem;
    border:           none;
    cursor:           pointer;
    transform:        translateY(100%);
    transition:       transform var(--mt-transition);
    text-align:       center;
    text-transform:   uppercase;
}

/* ─── Badges ────────────────────────────────────────────────────────────────── */

.mrted-badge {
    display:         inline-block;
    font-family:     var(--mt-font-display);
    font-size:       var(--mt-text-lg);
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         0.25rem 0.75rem;
    border-radius:   var(--mt-radius-sm);
    line-height:     1.2;
}

/* Rotado como en las maquetas */
.mrted-badge--rotated {
    transform: rotate(-5deg);
}

.mrted-badge--limited {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
}

.mrted-badge--preorder {
    background-color: var(--mt-purple);
    color:            var(--mt-text);
}

.mrted-badge--soldout {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
}

.mrted-badge--sale {
    background-color: #93000a;
    color:            #ffdad6;
}

.mrted-badge--new {
    background-color: var(--mt-violet);
    color:            #fff;
}

/* ─── Product Card ──────────────────────────────────────────────────────────── */

.mrted-product-card {
    display:          flex;
    flex-direction:   column;
    background-color: var(--mt-surface-card);
    border-radius:    var(--mt-radius-sm);
    overflow:         hidden;
    transition:       background-color var(--mt-transition);
}

.mrted-product-card:hover {
    background-color: var(--mt-surface-high);
}

.mrted-product-card__image-wrap {
    position:         relative;
    aspect-ratio:     1 / 1;
    overflow:         hidden;
    background-color: var(--mt-navy-lowest);
}

.mrted-product-card__image-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--mt-transition-slow),
                opacity var(--mt-transition);
    opacity:    0.85;
}

.mrted-product-card:hover .mrted-product-card__image-wrap img {
    transform: scale(1.1);
    opacity:   1;
}

.mrted-product-card:hover .mrted-btn--add-to-cart {
    transform: translateY(0);
}

.mrted-product-card__badge {
    position: absolute;
    top:      1rem;
    left:     1rem;
    z-index:  2;
}

.mrted-product-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap:     0.5rem;
    flex:    1;
}

.mrted-product-card__meta {
    font-family:     var(--mt-font-ui);
    font-size:       var(--mt-text-xs);
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    color:           var(--mt-text-dim);
}

.mrted-product-card__title {
    font-family:  var(--mt-font-body);
    font-size:    var(--mt-text-lg);
    font-weight:  700;
    color:        var(--mt-text);
    line-height:  1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mrted-product-card__price-wrap {
    display:     flex;
    align-items: baseline;
    gap:         0.5rem;
    margin-top:  auto;
}

.mrted-product-card__price {
    font-family: var(--mt-font-display);
    font-size:   var(--mt-text-2xl);
    color:       var(--mt-mint);
    line-height: 1;
}

.mrted-product-card__price--regular {
    font-family:     var(--mt-font-display);
    font-size:       var(--mt-text-sm);
    color:           var(--mt-text-dim);
    text-decoration: line-through;
}

/* ─── Inputs y Forms ────────────────────────────────────────────────────────── */

.mrted-input {
    width:            100%;
    background-color: var(--mt-surface-high);
    border:           1px solid var(--mt-border);
    border-radius:    var(--mt-radius);
    color:            var(--mt-text);
    font-family:      var(--mt-font-ui);
    font-size:        var(--mt-text-sm);
    letter-spacing:   0.05em;
    padding:          0.75rem 1rem;
    outline:          none;
    transition:       border-color var(--mt-transition-fast);
    -webkit-appearance: none;
}

.mrted-input::placeholder {
    color:           var(--mt-text-dim);
    text-transform:  uppercase;
    letter-spacing:  0.1em;
}

.mrted-input:focus {
    border-color: var(--mt-mint);
    box-shadow:   0 0 0 2px rgba(83, 255, 167, 0.1);
}

.mrted-input:focus-visible {
    outline: none;
}

/* Label */
.mrted-label {
    display:        block;
    font-family:    var(--mt-font-ui);
    font-size:      var(--mt-text-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          var(--mt-text-muted);
    margin-bottom:  0.5rem;
}

/* Form group */
.mrted-form-group {
    display:        flex;
    flex-direction: column;
    gap:            0.375rem;
}

/* ─── Section headers ───────────────────────────────────────────────────────── */

.mrted-section-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    margin-bottom:   var(--mt-gap-lg);
    gap:             var(--mt-gap);
}

.mrted-section-header__titles {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.mrted-section-header__title {
    font-family:    var(--mt-font-display);
    font-size:      clamp(2.5rem, 5vw, var(--mt-text-6xl));
    color:          var(--mt-text);
    line-height:    1;
    text-transform: uppercase;
}

.mrted-section-header__subtitle {
    font-family:     var(--mt-font-ui);
    font-size:       var(--mt-text-sm);
    letter-spacing:  0.15em;
    text-transform:  uppercase;
    color:           var(--mt-text-muted);
}

.mrted-section-header__link {
    font-family:    var(--mt-font-ui);
    font-size:      var(--mt-text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--mt-mint);
    white-space:    nowrap;
    transition:     color var(--mt-transition-fast);
}

.mrted-section-header__link:hover {
    color: var(--mt-text);
}

/* Acento bajo el título */
.mrted-section-header__accent {
    display:          block;
    width:            4rem;
    height:           3px;
    background-color: var(--mt-mint);
    margin-top:       0.5rem;
}

/* ─── Grid de productos ─────────────────────────────────────────────────────── */

.mrted-products-grid {
    display:               grid;
    grid-template-columns: repeat( 4, 1fr );
    gap:                   var(--mt-gap-lg);
}

@media (max-width: 1279px) {
    .mrted-products-grid {
        grid-template-columns: repeat( 3, 1fr );
    }
}

@media (max-width: 767px) {
    .mrted-products-grid {
        grid-template-columns: repeat( 2, 1fr );
        gap: var(--mt-gap);
    }
}

@media (max-width: 479px) {
    .mrted-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Pagination ────────────────────────────────────────────────────────────── */

.mrted-pagination {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             0.5rem;
    margin-top:      var(--mt-gap-xl);
}

.mrted-pagination__btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            2.75rem;
    height:           2.75rem;
    background-color: var(--mt-surface-card);
    color:            var(--mt-text-muted);
    font-family:      var(--mt-font-display);
    font-size:        var(--mt-text-xl);
    border-radius:    var(--mt-radius-sm);
    text-decoration:  none;
    transition:       var(--mt-transition-fast);
}

.mrted-pagination__btn:hover,
.mrted-pagination__btn.is-current {
    background-color: var(--mt-violet);
    color:            #fff;
}

/* ─── Notices / Alerts ──────────────────────────────────────────────────────── */

.mrted-notice {
    padding:      1rem 1.25rem;
    border-left:  3px solid var(--mt-violet);
    background:   var(--mt-surface-card);
    border-radius: var(--mt-radius);
    font-family:  var(--mt-font-body);
    font-size:    var(--mt-text-sm);
    color:        var(--mt-text-muted);
}

.mrted-notice--success {
    border-color: var(--mt-mint);
    color:        var(--mt-mint);
}

.mrted-notice--error {
    border-color: #ff4444;
    color:        #ff8888;
}

/* ─── Product card title clamp — global ─────────────────────────────────────── */
.mrted-product-card__title {
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

@media (max-width: 767px) {
    .mrted-product-card__title {
        font-size:   var(--mt-text-sm);
        line-height: 1.3;
    }
    .mrted-product-card__body  { padding: 0.75rem; gap: 0.25rem; }
    .mrted-product-card__meta  { font-size: 0.65rem; }
    .mrted-product-card__price { font-size: var(--mt-text-lg); }
}

/* ─── Card completa clickeable ───────────────────────────────────────────────── */
.mrted-product-card {
    position: relative;
    cursor:   pointer;
}

.mrted-product-card__title a::after {
    content:  '';
    position: absolute;
    inset:    0;
    z-index:  1;
}

/* ── WhatsApp flotante (global) ── */
.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); }
@media (max-width: 768px) { .mrted-wa-float { bottom: 1.5rem; right: 1.5rem; width: 52px; height: 52px; } }