/**
 * Urban Curator — Single Product Page Styles
 * Scope: .uc-product-page  (no afecta otras páginas)
 * Fuente: Manrope (Google Fonts)  |  Íconos: Material Symbols Outlined
 */

/* ─────────────────────────────────────────────
   0. FONT IMPORTS
───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
───────────────────────────────────────────── */
.uc-product-page {
    --uc-bg:          #ece9e2;
    --uc-surface:     #faf9f5;
    --uc-surface-lo:  #f4f4ef;
    --uc-surface-hi:  #e7e9e2;
    --uc-container:   #edeee8;
    --uc-charcoal:    #2f342e;
    --uc-primary:     #5f5e5e;
    --uc-primary-dim: #535252;
    --uc-on-primary:  #faf7f6;
    --uc-outline:     #787c75;
    --uc-outline-var: #afb3ac;
    --uc-muted:       #5c605a;
    --uc-border:      rgba(47, 52, 46, 0.12);
    --uc-font:        'Manrope', -apple-system, sans-serif;

    font-family: var(--uc-font);
    background:  var(--uc-bg);
    color:       var(--uc-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin:  0;
    padding: 0;
    width:   100%;
}

/* Reset parcial dentro del scope */
.uc-product-page *,
.uc-product-page *::before,
.uc-product-page *::after {
    box-sizing: border-box;
}

.uc-product-page h1,
.uc-product-page h2,
.uc-product-page h3,
.uc-product-page p {
    margin: 0;
}

/* Material Symbols */
.uc-product-page .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-weight: normal;
    font-style:  normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    vertical-align: middle;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

/* ─────────────────────────────────────────────
   2. BODY OVERRIDE para páginas de producto
───────────────────────────────────────────── */
body.single-product {
    background: #ece9e2 !important;
}

/* ─────────────────────────────────────────────
   3. BREADCRUMBS
───────────────────────────────────────────── */
.uc-breadcrumbs {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     16px 48px;
    border-bottom: 1px solid var(--uc-border);
    font-family: var(--uc-font);
    font-size:   11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--uc-outline);
}

.uc-breadcrumbs a {
    color:           inherit;
    text-decoration: none;
    transition:      color 0.2s;
}

.uc-breadcrumbs a:hover {
    color: var(--uc-charcoal);
}

.uc-breadcrumbs span:last-child {
    font-weight: 700;
    color:       var(--uc-charcoal);
}

@media (max-width: 768px) {
    .uc-breadcrumbs { padding: 12px 20px; }
}

/* ─────────────────────────────────────────────
   4. GRID PRINCIPAL
───────────────────────────────────────────── */
.uc-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    border-bottom: 1px solid var(--uc-border);
    min-height: 80vh;
}

@media (max-width: 1024px) {
    .uc-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* ─────────────────────────────────────────────
   5. GALERÍA DE IMÁGENES
───────────────────────────────────────────── */
.uc-gallery {
    padding:      48px;
    border-right: 1px solid var(--uc-border);
}

@media (max-width: 1024px) {
    .uc-gallery {
        padding:       24px;
        border-right:  none;
        border-bottom: 1px solid var(--uc-border);
    }
}

.uc-gallery__main {
    background:  var(--uc-surface-lo);
    position:    relative;
}

.uc-gallery__main img {
    width:      100%;
    height:     auto;
    object-fit: contain;
    display:    block;
}

/* Miniaturas */
.uc-gallery__thumbs {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    margin-top:            16px;
}

.uc-thumb {
    background:  var(--uc-container);
    aspect-ratio: 1;
    border:      1px solid var(--uc-border);
    cursor:      pointer;
    overflow:    hidden;
    filter:      grayscale(1);
    transition:  filter 0.3s, outline 0.2s;
    outline:     2px solid transparent;
    outline-offset: 2px;
}

.uc-thumb.active,
.uc-thumb:hover {
    filter:  grayscale(0);
    outline: 2px solid var(--uc-charcoal);
}

.uc-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   6. DETALLES DEL PRODUCTO
───────────────────────────────────────────── */
.uc-details {
    display:        flex;
    flex-direction: column;
    padding:        48px;
}

@media (max-width: 1024px) {
    .uc-details { padding: 24px; }
}

/* Header: título + precio */
.uc-details__header {
    padding-bottom: 24px;
    margin-bottom:  16px;
    border-bottom:  1px solid var(--uc-border);
}

.uc-product-title {
    font-size:      clamp(28px, 3.5vw, 44px);
    font-weight:    800;
    letter-spacing: -0.02em;
    line-height:    1.1;
    color:          var(--uc-charcoal);
    margin-bottom:  16px;
}

.uc-product-price,
.uc-product-price .woocommerce-Price-amount,
.uc-product-price .amount {
    font-size:   22px !important;
    font-weight: 300 !important;
    color:       var(--uc-primary) !important;
    font-family: var(--uc-font) !important;
    margin:      0 !important;
}

.uc-product-price del {
    opacity: 0.5;
    margin-right: 8px;
}

/* Descripción corta */
.uc-product-desc {
    font-size:     15px;
    line-height:   1.7;
    color:         var(--uc-muted);
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom:  1px solid var(--uc-border);
}

.uc-product-desc p { margin: 0 0 8px; }

/* ─────────────────────────────────────────────
   7. FORMULARIO WC OCULTO
───────────────────────────────────────────── */
.uc-wc-form {
    display:    none !important;
    visibility: hidden;
    position:   absolute;
    height:     0;
    overflow:   hidden;
}

/* ─────────────────────────────────────────────
   8. GRUPOS DE ATRIBUTOS
───────────────────────────────────────────── */
.uc-attr-group {
    margin-bottom: 16px;
}

.uc-attr-label {
    display:        block;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--uc-charcoal);
    margin-bottom:  8px;
}

.uc-attr-sep  { color: var(--uc-outline); }
.uc-attr-selected { font-weight: 400; text-transform: capitalize; }

/* ─── Swatches de color ─── */
.uc-color-swatches {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.uc-swatch {
    display:       block;
    flex:          0 0 28px;
    width:         28px;
    height:        28px;
    min-width:     28px;
    min-height:    28px;
    max-width:     28px;
    max-height:    28px;
    border-radius: 0;
    border:        none;
    outline:       none;
    cursor:        pointer;
    transition:    transform 0.15s, box-shadow 0.15s;
    box-shadow:    0 0 0 2px transparent, 0 0 0 4px transparent;
    padding:       0;
    line-height:   1;
}

.uc-swatch:focus,
.uc-swatch:focus-visible {
    outline:    none !important;
    box-shadow: none !important;
}

.uc-swatch:hover {
    transform: scale(1.1);
}

.uc-swatch.active,
.uc-swatch.active:focus,
.uc-swatch.active:focus-visible {
    box-shadow: 0 0 0 2px var(--uc-bg), 0 0 0 4px var(--uc-charcoal) !important;
    outline: none !important;
}

/* ─── Grid de tallas ─── */
.uc-size-grid {
    display: inline-flex;
    border:  1px solid var(--uc-border);
}

.uc-size-btn {
    flex:           0 0 auto;
    min-width:      56px;
    background:     var(--uc-bg);
    border:         none;
    border-right:   1px solid var(--uc-border);
    padding:        14px 8px;
    font-family:    var(--uc-font);
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    color:          var(--uc-charcoal);
    text-align:     center;
    transition:     background 0.15s, color 0.15s;
}

.uc-size-btn:last-child {
    border-right: none;
}

.uc-attr-group:has(.uc-size-grid) {
    padding-bottom: 32px;
    border-bottom:  1px solid var(--uc-border);
    margin-bottom:  32px;
}

.uc-attr-group:has(.uc-color-swatches) {
    padding-top:    32px;
    padding-bottom: 32px;
    border-bottom:  1px solid var(--uc-border);
    margin-bottom:  32px;
}

.uc-size-btn:hover {
    background: var(--uc-container);
}

.uc-size-btn.active {
    background: var(--uc-primary);
    color:      var(--uc-on-primary);
}

.uc-size-btn:disabled,
.uc-size-btn.disabled {
    opacity: 0.35;
    cursor:  not-allowed;
    text-decoration: line-through;
}

/* ─────────────────────────────────────────────
   9. BOTÓN ADD TO CART
───────────────────────────────────────────── */
.uc-cart-wrap {
    margin-bottom: 8px;
}

/* ─── Selector de cantidad ─── */
.uc-qty-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.uc-qty-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--uc-text-muted, #888);
    white-space: nowrap;
}

.uc-qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--uc-border, #d0ccc7);
    background: var(--uc-surface, #f9f7f4);
}

.uc-qty-btn {
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--uc-text, #111);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.uc-qty-btn:hover {
    background: var(--uc-border, #e8e4de);
}

.uc-qty-input {
    width: 44px;
    height: 38px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--uc-border, #d0ccc7);
    border-right: 1px solid var(--uc-border, #d0ccc7);
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--uc-text, #111);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}

.uc-qty-input::-webkit-outer-spin-button,
.uc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.uc-qty-input:focus {
    outline: none;
}

.uc-add-to-cart {
    width:         100%;
    background:    linear-gradient(145deg, var(--uc-primary), var(--uc-primary-dim));
    color:         var(--uc-on-primary);
    border:        none;
    padding:       13px 32px;
    font-family:   var(--uc-font);
    font-size:     12px;
    font-weight:   700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           12px;
    transition:    background 0.2s, transform 0.1s;
    border-radius: 0;
}

.uc-add-to-cart:hover {
    background: var(--uc-charcoal);
    color: var(--uc-on-primary);
}

.uc-add-to-cart:active {
    transform: scale(0.98);
}

.uc-add-to-cart .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s;
}

.uc-add-to-cart:hover .material-symbols-outlined {
    transform: translateX(4px);
}

.uc-add-to-cart.uc-loading {
    opacity:        0.7;
    pointer-events: none;
}

.uc-add-to-cart.uc-added {
    background: #3a5c3a;
}

/* ─────────────────────────────────────────────
   10. ACORDEONES
───────────────────────────────────────────── */
.uc-accordions {
    margin-top: auto;
    padding-top: 8px;
}

.uc-accordion {
    border-bottom: 1px solid var(--uc-border);
}

.uc-accordion summary.uc-accordion__header,
.uc-accordion button.uc-accordion__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         22px 0;
    cursor:          pointer;
    list-style:      none;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--uc-charcoal);
    user-select:     none;
}

.uc-accordion summary::-webkit-details-marker { display: none; }
.uc-accordion summary::marker               { display: none; }

.uc-accordion summary .material-symbols-outlined {
    font-size:  20px;
    transition: transform 0.3s ease;
    color:      var(--uc-primary);
}

.uc-accordion[open] summary .material-symbols-outlined {
    transform: rotate(180deg);
}

.uc-accordion__body {
    padding-bottom: 22px;
    font-size:      13px;
    line-height:    1.75;
    color:          var(--uc-muted);
}

/* ─────────────────────────────────────────────
   11. SECCIÓN EDITORIAL
───────────────────────────────────────────── */
.uc-editorial {
    display:    grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--uc-border);
}

@media (max-width: 768px) {
    .uc-editorial {
        grid-template-columns: 1fr;
    }
}

.uc-editorial__text {
    padding:        80px;
    border-right:   1px solid var(--uc-border);
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            24px;
}

@media (max-width: 1200px) {
    .uc-editorial__text { padding: 48px; }
}

@media (max-width: 768px) {
    .uc-editorial__text {
        padding:    36px 24px;
        border-right: none;
        order:      2;
    }
}

.uc-editorial__text h2 {
    font-size:      clamp(22px, 3vw, 32px);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--uc-charcoal);
}

.uc-editorial__text > p {
    font-size:   15px;
    line-height: 1.75;
    color:       var(--uc-muted);
}

.uc-editorial__badge {
    background: var(--uc-surface-hi);
    padding:    40px 48px;
    border:     1px solid var(--uc-border);
    display:    inline-block;
}

.uc-editorial__num {
    display:     block;
    font-size:   56px;
    font-weight: 900;
    color:       var(--uc-outline-var);
    opacity:     0.3;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.uc-editorial__badge p {
    margin:         0;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--uc-charcoal);
}

.uc-editorial__image {
    overflow:   hidden;
    min-height: 500px;
}

@media (max-width: 768px) {
    .uc-editorial__image {
        order:      1;
        min-height: 280px;
    }
}

.uc-editorial__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ─────────────────────────────────────────────
   12. SOBREESCRIBIR ESTILOS DE STOREFRONT
        en páginas de producto único
───────────────────────────────────────────── */
body.single-product .site-content,
body.single-product #primary,
body.single-product .content-area,
body.single-product .woocommerce {
    max-width:  100% !important;
    padding:    0 !important;
    margin:     0 !important;
    float:      none !important;
    width:      100% !important;
}

body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-notices-wrapper:empty,
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .woocommerce-tabs {
    display: none !important;
}

/* body.single-product #product-XXX */
.woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery {
    display: none !important;
}

/* Ocultar rating nativo en producto individual */
body.single-product .woocommerce-product-rating {
    display: none;
}

/* ─────────────────────────────────────────────
   13. RESPONSIVE EXTRA
───────────────────────────────────────────── */
@media (max-width: 480px) {
    .uc-gallery__thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .uc-size-grid {
        gap: 6px;
    }
}

/* ─────────────────────────────────────────────
   14. ANIMACIONES SUTILES
───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .uc-product-page .uc-details__header,
    .uc-product-page .uc-product-desc,
    .uc-product-page .uc-attr-group,
    .uc-product-page .uc-cart-wrap {
        animation: uc-fadeUp 0.4s ease both;
    }

    .uc-product-page .uc-attr-group:nth-child(1) { animation-delay: 0.05s; }
    .uc-product-page .uc-attr-group:nth-child(2) { animation-delay: 0.10s; }
    .uc-product-page .uc-cart-wrap              { animation-delay: 0.15s; }
}

@keyframes uc-fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ─────────────────────────────────────────────
   15. NOTICES DE WOOCOMMERCE
───────────────────────────────────────────── */
.uc-product-page .woocommerce-notices-wrapper .woocommerce-message,
.uc-product-page .woocommerce-notices-wrapper .woocommerce-error,
.uc-product-page .woocommerce-notices-wrapper .woocommerce-info {
    font-family:  var(--uc-font);
    font-size:    13px;
    padding:      12px 48px;
    border-radius: 0;
    margin:       0;
}

/* ─── Botón Guía de Tallas ───────────────────────────────────── */
.uc-size-guide-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--uc-charcoal);
    text-decoration: underline;
    text-underline-offset: 3px;
    display: block;
}
.uc-size-guide-btn:hover { opacity: 0.65; }