/* ==========================================================================
   MÜNZER KUNSTHANDWERK - Product Page Redesign v3
   Porto Theme + Owl Carousel Override → Mockup Design
   Live getestet auf muenzerkunsthandwerk.de am 27.02.2026
   
   EINBINDUNG:
   1. cp product-redesign-v3.css /var/www/mz/pub/media/product-redesign.css
   2. Admin → Content → Design → Configuration → HTML Head:
      <link rel="stylesheet" href="{{MEDIA_URL}}product-redesign.css" />
   3. cd /var/www/mz && php bin/magento cache:flush
   
   HINWEIS: Die Boxen (Rückfrage, Produktdetails-Grid, Hersteller) werden
   per PHTML-Template erzeugt – siehe catalog_product_view.xml + Templates
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --mz-black: #1a1a1a;
    --mz-gray-700: #555;
    --mz-gray-500: #888;
    --mz-gray-300: #ccc;
    --mz-gray-200: #e5e5e5;
    --mz-gray-100: #f5f5f5;
    --mz-white: #fff;
    --mz-green: #16a34a;
    --mz-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --mz-radius: 6px;
}

/* ==========================================================================
   1. LAYOUT: 2-Spalten Grid
   ========================================================================== */
.catalog-product-view .column.main {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 28px !important;
}
.catalog-product-view .product.media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 20px !important;
    align-self: start !important;
    width: 100% !important;
    float: none !important;
    overflow: hidden !important;
}
.catalog-product-view .product-info-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.catalog-product-view .column.main > .clearer {
    display: none !important;
}
.catalog-product-view .product.info.detailed {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 20px !important;
    padding-top: 10px !important;
}

/* ==========================================================================
   2. GALLERY: Owl Carousel → Single Image View
   ========================================================================== */
.catalog-product-view .product.media .owl-carousel.product-image-carousel {
    max-width: 420px !important;
}
.catalog-product-view .product.media .owl-carousel .owl-stage {
    display: flex !important;
}
.catalog-product-view .product.media .owl-carousel .owl-item {
    min-width: 420px !important;
    width: 420px !important;
    height: 420px !important;
}
.catalog-product-view .product.media .owl-carousel .owl-item .item {
    width: 420px !important;
    height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--mz-gray-100) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.catalog-product-view .product.media .owl-carousel .owl-item img {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
}
.catalog-product-view .product.media .owl-stage-outer {
    overflow: hidden !important;
    border-radius: 8px !important;
}
/* Nav Arrows */
.catalog-product-view .product.media .owl-nav {
    position: absolute !important;
    top: 50% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    padding: 0 8px !important;
}
.catalog-product-view .product.media .owl-nav button {
    pointer-events: all !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Dots */
.catalog-product-view .product.media .owl-dots {
    margin-top: 12px !important;
    text-align: center !important;
}
.catalog-product-view .product.media .owl-dots .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--mz-gray-300) !important;
    margin: 0 4px !important;
}
.catalog-product-view .product.media .owl-dots .owl-dot.active span {
    background: var(--mz-black) !important;
}

/* ==========================================================================
   3. PRODUCT INFO: Reihenfolge & Styling
   ========================================================================== */
.catalog-product-view .product-info-main .page-title-wrapper { order: 1 !important; }
.catalog-product-view .product-info-main .product-info-price { order: 2 !important; }
.catalog-product-view .product-info-main .short-custom-block { order: 3 !important; }
.catalog-product-view .product-info-main .product-info-stock-sku { order: 4 !important; }
.catalog-product-view .product-info-main .product.attribute.overview { order: 5 !important; }
.catalog-product-view .product-info-main .prices-tier { order: 6 !important; }
.catalog-product-view .product-info-main .product-add-form { order: 7 !important; }
.catalog-product-view .product-info-main .product-social-links { order: 99 !important; display: none !important; }

/* Titel */
.catalog-product-view .page-title-wrapper h1.page-title,
.catalog-product-view .page-title-wrapper h1.page-title span {
    font-family: var(--mz-font) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--mz-black) !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

/* Preis */
.catalog-product-view .price-box .price {
    font-family: var(--mz-font) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--mz-black) !important;
}
.catalog-product-view .product-info-main .price-box {
    margin: 0 0 4px 0 !important;
}
.catalog-product-view .short-custom-block {
    font-size: 12px !important;
    color: var(--mz-gray-500) !important;
    margin-top: -4px !important;
    margin-bottom: 8px !important;
}

/* Lagerstatus */
.catalog-product-view .product-info-stock-sku::before {
    content: '● Reguläre Lagerware' !important;
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--mz-green) !important;
    margin-bottom: 8px !important;
    font-family: var(--mz-font) !important;
    text-transform: none !important;
}
.catalog-product-view .product-info-stock-sku {
    margin-bottom: 4px !important;
}
.catalog-product-view .product-info-stock-sku .product.attribute.sku {
    font-size: 11px !important;
    color: var(--mz-gray-500) !important;
}

/* Beschreibung */
.catalog-product-view .product.attribute.overview {
    font-size: 12px !important;
    color: #444 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--mz-gray-200) !important;
}

/* ==========================================================================
   4. STAFFELPREISE
   ========================================================================== */
.catalog-product-view .prices-tier {
    background: var(--mz-gray-100) !important;
    border-radius: var(--mz-radius) !important;
    padding: 12px 16px !important;
    margin: 16px 0 !important;
    border: none !important;
}
.catalog-product-view .prices-tier li {
    font-size: 12px !important;
    color: var(--mz-gray-700) !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}
.catalog-product-view .prices-tier .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--mz-black) !important;
}
.catalog-product-view .prices-tier .benefit {
    font-weight: 600 !important;
    color: var(--mz-green) !important;
}

/* ==========================================================================
   5. SOCIAL SHARING → WEG
   ========================================================================== */
.catalog-product-view .product-social-links,
.catalog-product-view .porto-social-share,
.catalog-product-view .addthis_toolbox {
    display: none !important;
}

/* ==========================================================================
   6. WARENKORB BUTTON & QUANTITY
   ========================================================================== */
.catalog-product-view .box-tocart,
.catalog-product-view .product-add-form .box-tocart {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.catalog-product-view .box-tocart .field.qty label { display: none !important; }
.catalog-product-view .box-tocart .input-text.qty {
    width: 50px !important;
    height: 40px !important;
    text-align: center !important;
    border: 1px solid var(--mz-gray-300) !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--mz-font) !important;
    -moz-appearance: textfield !important;
}
.catalog-product-view .box-tocart .input-text.qty::-webkit-outer-spin-button,
.catalog-product-view .box-tocart .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
.catalog-product-view .qty-changer .qty_inc,
.catalog-product-view .qty-changer .qty_dec,
.catalog-product-view .box-tocart a[href*="void"] {
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--mz-gray-300) !important;
    background: var(--mz-white) !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mz-black) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.catalog-product-view .box-tocart .action.tocart {
    flex: 1 !important;
    max-width: 300px !important;
    padding: 12px 28px !important;
    background: var(--mz-black) !important;
    color: var(--mz-white) !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: var(--mz-font) !important;
    border-radius: 4px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 40px !important;
    line-height: 1 !important;
    transition: background 0.2s ease !important;
}
.catalog-product-view .box-tocart .action.tocart:hover {
    background: #333 !important;
}
.catalog-product-view .box-tocart .action.tocart span {
    font-size: 12px !important;
    text-transform: none !important;
}

/* Wishlist → Icon-Button */
.catalog-product-view .link.wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--mz-gray-300) !important;
    border-radius: 4px !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin-left: 8px !important;
}
.catalog-product-view .link.wishlist::before {
    content: '♡' !important;
    font-size: 18px !important;
    color: var(--mz-black) !important;
}
.catalog-product-view .link.wishlist:hover {
    border-color: var(--mz-black) !important;
}

/* Reviews weg */
.catalog-product-view .product-reviews-summary { display: none !important; }

/* ==========================================================================
   7. TABS → VERSTECKEN (Boxen übernehmen per Template)
   ========================================================================== */
/* Falls Tabs noch sichtbar (vor Template-Umbau): */
.catalog-product-view .product.data.items > .item.title { border: none !important; background: none !important; }
.catalog-product-view .product.data.items > .item.title a,
.catalog-product-view .product.data.items > .item.title a span {
    font-family: var(--mz-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--mz-gray-500) !important;
    border: none !important;
    background: none !important;
    padding: 8px 16px 8px 0 !important;
}
.catalog-product-view .product.data.items > .item.title.active a,
.catalog-product-view .product.data.items > .item.title.active a span { color: var(--mz-black) !important; }
.catalog-product-view .product.data.items > .item.title.active { border-bottom: 2px solid var(--mz-black) !important; }
.catalog-product-view .product.data.items > .item.content { border: none !important; padding: 16px 0 !important; }
.catalog-product-view .additional-attributes {
    border: none !important;
    background: var(--mz-gray-100) !important;
    border-radius: var(--mz-radius) !important;
    padding: 14px !important;
}
.catalog-product-view .additional-attributes caption { display: none !important; }
.catalog-product-view .additional-attributes th,
.catalog-product-view .additional-attributes td {
    font-family: var(--mz-font) !important;
    font-size: 11px !important;
    padding: 6px 10px 6px 0 !important;
    border-bottom: 1px solid var(--mz-gray-200) !important;
    background: none !important;
}
.catalog-product-view .additional-attributes th {
    color: var(--mz-gray-700) !important;
    font-weight: 400 !important;
    width: 140px !important;
    text-align: left !important;
}
.catalog-product-view .additional-attributes td { color: var(--mz-black) !important; font-weight: 500 !important; }
.catalog-product-view .additional-attributes tr:last-child th,
.catalog-product-view .additional-attributes tr:last-child td { border-bottom: none !important; }

/* ==========================================================================
   8. NEUE BOXEN (erzeugt per Template oder JS)
   ========================================================================== */

/* Rückfrage Box */
.mz-inquiry-box {
    background: var(--mz-gray-100);
    border-radius: var(--mz-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mz-inquiry-box svg {
    color: var(--mz-gray-500);
    flex-shrink: 0;
}
.mz-inquiry-content { flex: 1; }
.mz-inquiry-content p {
    font-family: var(--mz-font);
    font-size: 13px;
    color: var(--mz-gray-700);
    margin: 0 0 8px 0;
}
.mz-inquiry-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--mz-white);
    border: 1px solid var(--mz-gray-300);
    border-radius: 4px;
    font-family: var(--mz-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--mz-black);
    text-decoration: none;
    transition: border-color 0.2s;
}
.mz-inquiry-btn:hover {
    border-color: var(--mz-black);
    color: var(--mz-black);
    text-decoration: none;
}

/* Details Grid: 2 Spalten */
.mz-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.mz-detail-box {
    background: var(--mz-gray-100);
    padding: 16px 18px;
    border-radius: var(--mz-radius);
}
.mz-detail-box h4,
.mz-hersteller-box h4 {
    font-family: var(--mz-font);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mz-gray-500);
    margin: 0 0 12px 0;
}
.mz-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--mz-gray-200);
    gap: 12px;
    font-family: var(--mz-font);
}
.mz-detail-row:last-child { border-bottom: none; }
.mz-detail-label { color: var(--mz-gray-700); flex-shrink: 0; }
.mz-detail-value { font-weight: 500; text-align: right; color: var(--mz-black); }

/* Hersteller Box */
.mz-hersteller-box {
    background: var(--mz-gray-100);
    padding: 16px 18px;
    border-radius: var(--mz-radius);
    margin-bottom: 20px;
}

/* ==========================================================================
   9. BREADCRUMBS
   ========================================================================== */
.catalog-product-view .breadcrumbs {
    font-family: var(--mz-font) !important;
    font-size: 11px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 12px 28px !important;
}
.catalog-product-view .breadcrumbs a,
.catalog-product-view .breadcrumbs li {
    font-size: 11px !important;
    color: var(--mz-gray-500) !important;
}
.catalog-product-view .breadcrumbs a:hover {
    color: var(--mz-black) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   10. FONT OVERRIDE
   ========================================================================== */
.catalog-product-view .product-info-main,
.catalog-product-view .product-info-main * {
    font-family: var(--mz-font) !important;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .catalog-product-view .column.main {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 16px !important;
    }
    .catalog-product-view .product.media {
        position: relative !important;
        top: auto !important;
    }
    .catalog-product-view .product.media .owl-carousel .owl-item,
    .catalog-product-view .product.media .owl-carousel .owl-item .item {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }
    .catalog-product-view .page-title-wrapper h1.page-title,
    .catalog-product-view .page-title-wrapper h1.page-title span {
        font-size: 18px !important;
    }
    .catalog-product-view .price-box .price { font-size: 22px !important; }
    .catalog-product-view .box-tocart { flex-wrap: wrap !important; }
    .catalog-product-view .box-tocart .action.tocart { max-width: 100% !important; }
    .mz-details-grid { grid-template-columns: 1fr !important; }
}