/* ============================================================
   NORDIKLUM — Product Detail Page
   Estilo: Lladró + ABC Decorative Rugs
   Tema padre: Hyvä 1.4.6
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
    --nk-font-display: 'Cormorant Garamond', 'Georgia', serif;
    --nk-font-body: 'Jost', 'Helvetica Neue', sans-serif;
    --nk-black: #1a1a1a;
    --nk-dark: #2c2c2c;
    --nk-gray-700: #4a4a4a;
    --nk-gray-500: #8a8a8a;
    --nk-gray-300: #c8c8c8;
    --nk-gray-100: #f0f0f0;
    --nk-white: #ffffff;
    --nk-accent: #9b8b6e;       /* warm gold/bronze for luxury */
    --nk-accent-hover: #7d7058;
    --nk-error: #c0392b;
    --nk-success: #27ae60;
    --nk-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --nk-container-max: 1440px;
    --nk-pdp-gap: 48px;
}

/* ---- Global PDP Container ---- */
.nordiklum-pdp .columns .column.main {
    max-width: var(--nk-container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Product Top Section: Gallery + Info ---- */
.nordiklum-pdp .product-info-main,
.nordiklum-pdp .product.media {
    font-family: var(--nk-font-body);
}

.nordiklum-pdp .product-top-wrapper,
.nordiklum-pdp .columns .column.main > .product-info-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nk-pdp-gap);
    align-items: start;
    margin-bottom: 60px;
}

/* Hyvä default structure - target the flex/grid parent */
.nordiklum-pdp .product.media {
    position: sticky;
    top: 20px;
    width: 100%;
}

/* ============================================================
   GALLERY — Lladró style: large image, thumbnails below
   ============================================================ */

/* Main image container */
.nordiklum-pdp .gallery-placeholder,
.nordiklum-pdp [x-data*="gallery"] {
    background: var(--nk-gray-100);
}

.nordiklum-pdp .product.media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: zoom-in;
}

.nordiklum-pdp .product.media img:hover {
    transform: scale(1.03);
}

/* Thumbnail strip */
.nordiklum-pdp .gallery-thumbs,
.nordiklum-pdp [class*="thumb"] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nk-gray-300) transparent;
}

.nordiklum-pdp .gallery-thumbs img,
.nordiklum-pdp [class*="thumb"] img {
    width: 80px;
    height: 98px;
    object-fit: cover;
    border: 1px solid transparent;
    opacity: 0.6;
    transition: all var(--nk-transition);
    cursor: pointer;
}

.nordiklum-pdp .gallery-thumbs img:hover,
.nordiklum-pdp .gallery-thumbs img.active,
.nordiklum-pdp [class*="thumb"] img:hover,
.nordiklum-pdp [class*="thumb"] img.active {
    opacity: 1;
    border-color: var(--nk-black);
}

/* ============================================================
   PRODUCT INFO PANEL — Right side
   ============================================================ */

.nordiklum-pdp .product-info-main {
    padding: 0 0 0 12px;
}

/* Product Name - Lladró style: elegant serif */
.nordiklum-pdp .page-title-wrapper .page-title,
.nordiklum-pdp .product-info-main .page-title {
    font-family: var(--nk-font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--nk-black);
    margin-bottom: 12px;
    text-transform: none;
}

/* SKU */
.nordiklum-pdp .product.attribute.sku {
    font-family: var(--nk-font-body);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
    margin-bottom: 20px;
}

/* Price */
.nordiklum-pdp .product-info-price .price-wrapper .price,
.nordiklum-pdp .product-info-main .price {
    font-family: var(--nk-font-body);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--nk-black);
    letter-spacing: 0.03em;
}

/* Old price / Special price */
.nordiklum-pdp .old-price .price {
    font-size: 1.1rem;
    color: var(--nk-gray-500);
    text-decoration: line-through;
}

.nordiklum-pdp .special-price .price {
    color: var(--nk-error);
}

/* Stock status */
.nordiklum-pdp .stock.available span,
.nordiklum-pdp .product-info-stock-sku .stock {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nk-success);
}

.nordiklum-pdp .stock.unavailable span {
    color: var(--nk-gray-500);
}

/* ============================================================
   SHORT DESCRIPTION — Lladró: brief, poetic
   ============================================================ */

.nordiklum-pdp .product.attribute.overview {
    font-family: var(--nk-font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--nk-gray-700);
    margin: 20px 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--nk-gray-100);
}

/* ============================================================
   SWATCHES / OPTIONS
   ============================================================ */

.nordiklum-pdp .swatch-attribute-label {
    font-family: var(--nk-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-dark);
    margin-bottom: 8px;
}

.nordiklum-pdp .swatch-option {
    border: 1px solid var(--nk-gray-300);
    border-radius: 0;
    transition: all var(--nk-transition);
}

.nordiklum-pdp .swatch-option:hover,
.nordiklum-pdp .swatch-option.selected {
    border-color: var(--nk-black);
    outline: none;
    box-shadow: none;
}

.nordiklum-pdp .swatch-option.text {
    font-family: var(--nk-font-body);
    font-size: 0.8rem;
    font-weight: 400;
    padding: 8px 16px;
    min-width: 44px;
}

/* ============================================================
   QUANTITY + ADD TO CART — Luxury minimal
   ============================================================ */

.nordiklum-pdp .box-tocart {
    margin: 28px 0;
}

.nordiklum-pdp .field.qty {
    margin-right: 16px;
}

.nordiklum-pdp .field.qty label {
    font-family: var(--nk-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
    margin-bottom: 6px;
    display: block;
}

.nordiklum-pdp .input-text.qty {
    width: 64px;
    height: 48px;
    border: 1px solid var(--nk-gray-300);
    border-radius: 0;
    text-align: center;
    font-family: var(--nk-font-body);
    font-size: 0.95rem;
    background: var(--nk-white);
    transition: border-color var(--nk-transition);
}

.nordiklum-pdp .input-text.qty:focus {
    border-color: var(--nk-black);
    outline: none;
    box-shadow: none;
}

/* Add to Cart Button - Lladró: solid black, full width */
.nordiklum-pdp .action.tocart,
.nordiklum-pdp button.action.tocart {
    display: block;
    width: 100%;
    padding: 16px 32px;
    background-color: var(--nk-black);
    color: var(--nk-white);
    border: 2px solid var(--nk-black);
    border-radius: 0;
    font-family: var(--nk-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--nk-transition);
    text-align: center;
}

.nordiklum-pdp .action.tocart:hover,
.nordiklum-pdp button.action.tocart:hover {
    background-color: var(--nk-white);
    color: var(--nk-black);
}

/* ============================================================
   SECONDARY ACTIONS — Wishlist, Compare
   ============================================================ */

.nordiklum-pdp .product-addto-links {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nk-gray-100);
}

.nordiklum-pdp .product-addto-links a,
.nordiklum-pdp .product-addto-links button {
    font-family: var(--nk-font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--nk-transition);
    text-decoration: none;
}

.nordiklum-pdp .product-addto-links a:hover,
.nordiklum-pdp .product-addto-links button:hover {
    color: var(--nk-black);
}

/* ============================================================
   PRODUCT DETAILS TABS — Lladró accordion/clean tabs
   ============================================================ */

.nordiklum-pdp .product.info.detailed {
    margin-top: 60px;
    border-top: 1px solid var(--nk-gray-300);
}

.nordiklum-pdp .product.data.items > .item.title {
    border: none;
    border-bottom: 1px solid var(--nk-gray-100);
}

.nordiklum-pdp .product.data.items > .item.title > .switch {
    font-family: var(--nk-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
    padding: 18px 0;
    background: none;
    border: none;
    transition: color var(--nk-transition);
}

.nordiklum-pdp .product.data.items > .item.title.active > .switch,
.nordiklum-pdp .product.data.items > .item.title > .switch:hover {
    color: var(--nk-black);
    border-bottom: 2px solid var(--nk-black);
}

.nordiklum-pdp .product.data.items > .item.content {
    font-family: var(--nk-font-body);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--nk-gray-700);
    padding: 24px 0 40px;
    border: none;
}

/* Product attributes table (dimensions, material, etc.) */
.nordiklum-pdp .additional-attributes-wrapper .data.table {
    width: 100%;
    border-collapse: collapse;
}

.nordiklum-pdp .additional-attributes-wrapper .data.table th {
    font-family: var(--nk-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
    text-align: left;
    padding: 12px 20px 12px 0;
    border-bottom: 1px solid var(--nk-gray-100);
    width: 180px;
}

.nordiklum-pdp .additional-attributes-wrapper .data.table td {
    font-family: var(--nk-font-body);
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--nk-dark);
    padding: 12px 0;
    border-bottom: 1px solid var(--nk-gray-100);
}

/* ============================================================
   DELIVERY / TRUST BADGES — like Lladró's "Free shipping" bar
   ============================================================ */

.nordiklum-pdp .product-delivery-info {
    margin: 20px 0;
    padding: 16px 0;
    border-top: 1px solid var(--nk-gray-100);
    border-bottom: 1px solid var(--nk-gray-100);
}

.nordiklum-pdp .product-delivery-info p,
.nordiklum-pdp .product-delivery-info span {
    font-family: var(--nk-font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--nk-gray-500);
    line-height: 1.8;
}

/* ============================================================
   RELATED / UPSELL / CROSS-SELL
   ============================================================ */

.nordiklum-pdp .block.related,
.nordiklum-pdp .block.upsell,
.nordiklum-pdp .block.crosssell {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--nk-gray-100);
}

.nordiklum-pdp .block.related .block-title strong,
.nordiklum-pdp .block.upsell .block-title strong,
.nordiklum-pdp .block.crosssell .block-title strong {
    font-family: var(--nk-font-display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--nk-black);
    text-transform: none;
}

.nordiklum-pdp .block.related .product-item-name a,
.nordiklum-pdp .block.upsell .product-item-name a {
    font-family: var(--nk-font-body);
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--nk-dark);
    text-decoration: none;
    transition: color var(--nk-transition);
}

.nordiklum-pdp .block.related .product-item-name a:hover,
.nordiklum-pdp .block.upsell .product-item-name a:hover {
    color: var(--nk-accent);
}

/* ============================================================
   BREADCRUMBS — subtle, uppercase micro
   ============================================================ */

.nordiklum-pdp .breadcrumbs {
    padding: 16px 0;
    margin-bottom: 24px;
}

.nordiklum-pdp .breadcrumbs li {
    font-family: var(--nk-font-body);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nk-gray-500);
}

.nordiklum-pdp .breadcrumbs a {
    color: var(--nk-gray-500);
    text-decoration: none;
    transition: color var(--nk-transition);
}

.nordiklum-pdp .breadcrumbs a:hover {
    color: var(--nk-black);
}

/* ============================================================
   RESPONSIVE — Mobile first adjustments
   ============================================================ */

@media (max-width: 1024px) {
    .nordiklum-pdp .product-top-wrapper,
    .nordiklum-pdp .columns .column.main > .product-info-wrapper {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .nordiklum-pdp .product.media {
        position: relative;
        top: 0;
    }

    .nordiklum-pdp .product-info-main {
        padding: 0;
    }

    .nordiklum-pdp .page-title-wrapper .page-title,
    .nordiklum-pdp .product-info-main .page-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .nordiklum-pdp .columns .column.main {
        padding: 0 16px;
    }

    .nordiklum-pdp .page-title-wrapper .page-title,
    .nordiklum-pdp .product-info-main .page-title {
        font-size: 1.4rem;
    }

    .nordiklum-pdp .product-info-price .price-wrapper .price,
    .nordiklum-pdp .product-info-main .price {
        font-size: 1.25rem;
    }

    .nordiklum-pdp .action.tocart,
    .nordiklum-pdp button.action.tocart {
        padding: 14px 24px;
        font-size: 0.75rem;
    }

    .nordiklum-pdp .gallery-thumbs img,
    .nordiklum-pdp [class*="thumb"] img {
        width: 60px;
        height: 74px;
    }

    .nordiklum-pdp .product.info.detailed {
        margin-top: 40px;
    }

    .nordiklum-pdp .block.related,
    .nordiklum-pdp .block.upsell {
        margin-top: 48px;
    }
}

/* ============================================================
   HYVÄ ALPINE.JS GALLERY OVERRIDES
   Hyvä usa Alpine para la galería; estos selectores atacan
   la estructura típica del componente gallery de Hyvä
   ============================================================ */

/* Gallery wrapper */
.nordiklum-pdp [x-data*="initGallery"] {
    display: flex;
    flex-direction: column;
}

/* Main image area */
.nordiklum-pdp [x-data*="initGallery"] .relative {
    background: var(--nk-gray-100);
    overflow: hidden;
}

/* Navigation arrows - subtle */
.nordiklum-pdp [x-data*="initGallery"] button[aria-label*="revious"],
.nordiklum-pdp [x-data*="initGallery"] button[aria-label*="ext"] {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--nk-transition);
}

.nordiklum-pdp [x-data*="initGallery"]:hover button[aria-label*="revious"],
.nordiklum-pdp [x-data*="initGallery"]:hover button[aria-label*="ext"] {
    opacity: 1;
}

/* Thumbnail row in Hyvä gallery */
.nordiklum-pdp [x-data*="initGallery"] .flex.overflow-x-auto,
.nordiklum-pdp [x-data*="initGallery"] .flex.gap-2 {
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 4px;
}

.nordiklum-pdp [x-data*="initGallery"] .flex.overflow-x-auto img,
.nordiklum-pdp [x-data*="initGallery"] .flex.gap-2 img {
    width: 80px;
    height: 98px;
    object-fit: cover;
    border: 1px solid transparent;
    opacity: 0.5;
    transition: all var(--nk-transition);
    cursor: pointer;
}

.nordiklum-pdp [x-data*="initGallery"] .flex.overflow-x-auto img:hover,
.nordiklum-pdp [x-data*="initGallery"] .flex.overflow-x-auto img.active,
.nordiklum-pdp [x-data*="initGallery"] .border-primary {
    opacity: 1;
    border-color: var(--nk-black) !important;
}

/* ============================================================
   HYVÄ-SPECIFIC ADD TO CART FORM
   ============================================================ */

/* Hyvä form wrapper */
.nordiklum-pdp form[x-data*="initProductForm"],
.nordiklum-pdp #product_addtocart_form {
    display: flex;
    flex-direction: column;
}

/* Qty + Button row */
.nordiklum-pdp .product-info-main .flex.items-center {
    flex-wrap: wrap;
    gap: 12px;
}

/* Hyvä qty input */
.nordiklum-pdp .product-info-main input[name="qty"] {
    width: 64px;
    height: 48px;
    border: 1px solid var(--nk-gray-300);
    border-radius: 0;
    text-align: center;
    font-family: var(--nk-font-body);
    font-size: 0.95rem;
    background: var(--nk-white);
}

.nordiklum-pdp .product-info-main input[name="qty"]:focus {
    border-color: var(--nk-black);
    outline: none;
    ring: none;
    box-shadow: none;
}

/* Hyvä add-to-cart button */
.nordiklum-pdp .product-info-main button[type="submit"],
.nordiklum-pdp #product-addtocart-button {
    display: block;
    width: 100%;
    padding: 16px 32px;
    background-color: var(--nk-black) !important;
    color: var(--nk-white) !important;
    border: 2px solid var(--nk-black) !important;
    border-radius: 0 !important;
    font-family: var(--nk-font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--nk-transition);
    text-align: center;
}

.nordiklum-pdp .product-info-main button[type="submit"]:hover,
.nordiklum-pdp #product-addtocart-button:hover {
    background-color: var(--nk-white) !important;
    color: var(--nk-black) !important;
}

/* ============================================================
   GLOBAL PAGE OVERRIDES for PDP
   ============================================================ */

/* Remove default Hyvä blue focus rings */
.nordiklum-pdp *:focus {
    --tw-ring-color: transparent;
    box-shadow: none;
}

/* Clean link styling */
.nordiklum-pdp a {
    transition: color var(--nk-transition);
}

/* Smooth scrolling */
.nordiklum-pdp {
    scroll-behavior: smooth;
}