/* =============================================================================
   MR. TED SHOP — main.css
   Design system base: variables, reset, tipografía, layout
   ============================================================================= */

/* ─── Google Fonts Import ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600&display=swap');

/* ─── Variables CSS ─────────────────────────────────────────────────────────── */
:root {
    /* Paleta principal */
    --mt-navy:          #130647;
    --mt-purple:        #3f2169;
    --mt-violet:        #7b42cd;
    --mt-mint:          #53ffa7;

    /* Derivados */
    --mt-navy-light:    #1e0a6e;
    --mt-navy-card:     #1e1552;
    --mt-navy-card-hi:  #29205d;
    --mt-navy-lowest:   #0c003f;
    --mt-purple-light:  #522d85;
    --mt-violet-dark:   #5c2fa0;
    --mt-mint-dark:     #27e28d;

    /* Superficies */
    --mt-surface:       #120446;
    --mt-surface-low:   #1a104e;
    --mt-surface-card:  #1e1552;
    --mt-surface-high:  #29205d;
    --mt-surface-hi2:   #342c68;
    --mt-surface-bright:#39306d;

    /* Texto */
    --mt-text:          #e5deff;
    --mt-text-muted:    #cdc3d5;
    --mt-text-dim:      #968d9f;
    --mt-text-on-mint:  #00391f;
    --mt-text-on-violet:#e5deff;

    /* Bordes */
    --mt-border:        rgba(75, 68, 83, 0.15);
    --mt-border-accent: rgba(123, 66, 205, 0.4);

    /* Semánticos */
    --mt-bg:            var(--mt-surface);
    --mt-accent:        var(--mt-violet);
    --mt-cta:           var(--mt-mint);
    --mt-cta-text:      var(--mt-text-on-mint);

    /* Tipografía */
    --mt-font-display:  'Bebas Neue', 'Arial Black', sans-serif;
    --mt-font-ui:       'Barlow Condensed', 'Arial Narrow', sans-serif;
    --mt-font-body:     'Barlow', system-ui, sans-serif;

    /* Escala tipográfica */
    --mt-text-xs:       0.75rem;
    --mt-text-sm:       0.875rem;
    --mt-text-base:     1rem;
    --mt-text-lg:       1.125rem;
    --mt-text-xl:       1.25rem;
    --mt-text-2xl:      1.5rem;
    --mt-text-3xl:      1.875rem;
    --mt-text-4xl:      2.25rem;
    --mt-text-5xl:      3rem;
    --mt-text-6xl:      3.75rem;
    --mt-text-7xl:      4.5rem;
    --mt-text-8xl:      6rem;
    --mt-text-9xl:      8rem;

    /* Espaciado */
    --mt-container:     1280px;
    --mt-gap-xs:        0.5rem;
    --mt-gap-sm:        1rem;
    --mt-gap:           1.5rem;
    --mt-gap-lg:        2.5rem;
    --mt-gap-xl:        4rem;

    /* Bordes radio */
    --mt-radius-sm:     0.125rem;
    --mt-radius:        0.25rem;
    --mt-radius-lg:     0.5rem;
    --mt-radius-full:   9999px;

    /* Sombras y efectos */
    --mt-glow-violet:   0 0 40px rgba(123, 66, 205, 0.3);
    --mt-glow-mint:     0 0 20px rgba(83, 255, 167, 0.2);
    --mt-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);

    /* Transiciones */
    --mt-transition:    all 0.3s ease;
    --mt-transition-fast: all 0.15s ease;
    --mt-transition-slow: all 0.5s ease;

    /* Header */
    --mt-header-height: 72px;
}

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:        var(--mt-font-body);
    font-size:          var(--mt-text-base);
    font-weight:        400;
    line-height:        1.6;
    color:              var(--mt-text);
    background-color:   var(--mt-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selección de texto */
::selection {
    background-color: var(--mt-mint);
    color:            var(--mt-text-on-mint);
}

/* ─── Tipografía base ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--mt-font-display);
    font-weight:    400; /* Bebas Neue solo tiene un weight */
    line-height:    1.1;
    letter-spacing: 0.02em;
    color:          var(--mt-text);
}

h1 { font-size: clamp(3rem, 8vw, var(--mt-text-8xl)); }
h2 { font-size: clamp(2rem, 5vw, var(--mt-text-6xl)); }
h3 { font-size: clamp(1.5rem, 3vw, var(--mt-text-4xl)); }
h4 { font-size: var(--mt-text-2xl); }
h5 { font-size: var(--mt-text-xl); }
h6 { font-size: var(--mt-text-lg); }

p {
    font-family: var(--mt-font-body);
    color:       var(--mt-text-muted);
    line-height: 1.7;
}

a {
    color:           var(--mt-mint);
    text-decoration: none;
    transition:      var(--mt-transition-fast);
}

a:hover {
    color: #fff;
}

img, video {
    max-width: 100%;
    height:    auto;
    display:   block;
}

ul, ol {
    list-style: none;
}

button {
    cursor:     pointer;
    border:     none;
    background: none;
    font-family: var(--mt-font-ui);
}

input, textarea, select {
    font-family: var(--mt-font-body);
    font-size:   var(--mt-text-base);
}

/* ─── Layout ────────────────────────────────────────────────────────────────── */
.mrted-container {
    width:         100%;
    max-width:     var(--mt-container);
    margin-inline: auto;
    padding-inline: var(--mt-gap);
}

.mrted-main {
    padding-top: var(--mt-header-height);
    min-height:  100vh;
}

.mrted-main--generic {
    padding-block: var(--mt-gap-xl);
}

#mrted-page-wrapper {
    min-height: 100vh;
}

/* ─── Utilidades tipográficas ───────────────────────────────────────────────── */
.mrted-font-display  { font-family: var(--mt-font-display); }
.mrted-font-ui       { font-family: var(--mt-font-ui); }
.mrted-font-body     { font-family: var(--mt-font-body); }

.mrted-tracking-wide  { letter-spacing: 0.1em; }
.mrted-tracking-wider { letter-spacing: 0.2em; }
.mrted-tracking-max   { letter-spacing: 0.3em; }
.mrted-uppercase      { text-transform: uppercase; }

/* ─── Colores de texto ──────────────────────────────────────────────────────── */
.mrted-text-mint    { color: var(--mt-mint); }
.mrted-text-violet  { color: var(--mt-violet); }
.mrted-text-muted   { color: var(--mt-text-muted); }
.mrted-text-dim     { color: var(--mt-text-dim); }
.mrted-text-white   { color: #ffffff; }

/* ─── Fondos ────────────────────────────────────────────────────────────────── */
.mrted-bg-navy      { background-color: var(--mt-navy); }
.mrted-bg-card      { background-color: var(--mt-surface-card); }
.mrted-bg-violet    { background-color: var(--mt-violet); }
.mrted-bg-mint      { background-color: var(--mt-mint); }

/* ─── Separadores ───────────────────────────────────────────────────────────── */
.mrted-divider {
    height:           1px;
    background-color: var(--mt-border);
    border:           none;
    margin-block:     var(--mt-gap);
}

/* ─── Responsive: body padding-top cuando el header es sticky ──────────────── */
body.admin-bar .mrted-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .mrted-header {
        top: 46px;
    }
}

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

/* ─── Contenedor responsive ─────────────────────────────────────────────────── */
@media (max-width: 1279px) {
    .mrted-container { padding-inline: var(--mt-gap-lg); }
}

@media (max-width: 767px) {
    .mrted-container { padding-inline: var(--mt-gap-sm); }
    h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
    h2 { font-size: clamp(2rem, 8vw, 3rem); }
}

/* ─── Products grid responsive ──────────────────────────────────────────────── */
@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-sm); }
}
@media (max-width: 479px) {
    .mrted-products-grid { grid-template-columns: 1fr; }
}

/* ─── Admin bar adjustment ──────────────────────────────────────────────────── */
body.admin-bar {
    --mt-header-height: 104px;
}
@media (max-width: 782px) {
    body.admin-bar { --mt-header-height: 118px; }
}

/* ─── WC Notices override ────────────────────────────────────────────────────── */
.woocommerce-notices-wrapper { margin-bottom: var(--mt-gap); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background:    var(--mt-surface-card) !important;
    border-top:    none !important;
    border-left:   3px solid var(--mt-mint) !important;
    border-radius: var(--mt-radius) !important;
    color:         var(--mt-text-muted) !important;
    font-family:   var(--mt-font-ui) !important;
    font-size:     var(--mt-text-sm) !important;
    letter-spacing: 0.05em !important;
    padding:       1rem var(--mt-gap) !important;
    margin-bottom: var(--mt-gap-sm) !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: space-between !important;
    list-style:    none !important;
}

.woocommerce-error { border-left-color: #ff6b6b !important; }
.woocommerce-info  { border-left-color: var(--mt-violet) !important; }

.woocommerce-message a.button,
.woocommerce-info a.button {
    background:    var(--mt-violet) !important;
    color:         #fff !important;
    font-family:   var(--mt-font-ui) !important;
    font-size:     var(--mt-text-xs) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding:       0.4rem 1rem !important;
    border-radius: var(--mt-radius) !important;
    border:        none !important;
    text-decoration: none !important;
    white-space:   nowrap !important;
}

.woocommerce-message a.button:hover { background: var(--mt-mint) !important; color: var(--mt-text-on-mint) !important; }

/* ─── Account dashboard fix ──────────────────────────────────────────────────── */
.mrted-wc-account-wrap { width: 100%; }

.mrted-account__hero {
    flex-wrap: wrap;
    margin-bottom: 0;
}

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

.mrted-account__nav-item {
    flex-direction: column;
    gap:            0.375rem;
    padding:        var(--mt-gap-sm);
    text-align:     center;
    min-width:      unset;
    flex:           unset;
    font-size:      var(--mt-text-xs);
}

@media (max-width: 767px) {
    .mrted-account__nav { grid-template-columns: repeat(2, 1fr); }
}
.mt-account-user-tier svg { width: 12px !important; height: 12px !important; }