/* =============================================================
   Aragold — Product Page Designs (Theme Options Preset System)
   =============================================================
   Override-uri CSS per design preset pentru pagina de produs.
   Aplicat pe baza atributului `data-page-design` adaugat pe
   `.tp-product-details-area` in product.blade.php.

   PARITATE 100% cu prototypes din public/product-page-v3-reference/.
   Colors LITERAL din prototype (nu via theme vars cu fallback).
   Cand prototypes contrazic shofy, prototypes castiga.

   Tokeni de baza folositi pe toata pagina (din shared.css prototype):
     --aragold-surface:        #fbf8f3   (cream subtil background)
     --aragold-gold:           #BD844C   (gold brand)
     --aragold-text:           #1a1a1a   (foreground principal)
     --aragold-muted:          #6c757d   (text secundar, share label)
     --aragold-border:         #e5e7eb   (divider/borders subtili)
     --aragold-card-radius:    12px      (cards Alt D)
============================================================= */

[data-page-design] {
    --aragold-surface: #fbf8f3;
    --aragold-gold: #BD844C;
    --aragold-text: #1a1a1a;
    --aragold-muted: #6c757d;
    --aragold-border: #e5e7eb;
    --aragold-card-radius: 12px;
}

/* ============================================================
   BASELINE — current live (no overrides, default theme styles)
============================================================ */
/* Niciun override. */

/* ============================================================
   ALT D — Combined grid + Summary cards (12px radius) + Hybrid +N gramaj
============================================================ */

/* Wrapper-ul de detalii nu mai e un singur card — devine un container
   pentru cele 2 carduri (info + action) cu gap intre ele. Anulam orice
   bg/radius/padding pe wrapper. */
[data-page-design="alt-d"] .tp-product-details-wrapper {
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Summary Info Card — title block + rating + description + price */
[data-page-design="alt-d"] .summary-info-card {
    background: var(--aragold-surface);
    border-radius: var(--aragold-card-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[data-page-design="alt-d"] .summary-info-card > * {
    margin: 0 !important;
}
[data-page-design="alt-d"] .summary-info-card .tp-product-details-title {
    font-size: 24px;
    line-height: 1.3;
    color: var(--aragold-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Summary Action Card — gramaj + icon-specs + stock + qty + add to cart + trust strip */
[data-page-design="alt-d"] .summary-action-card {
    background: var(--aragold-surface);
    border-radius: var(--aragold-card-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
[data-page-design="alt-d"] .summary-action-card > * {
    margin: 0 !important;
}

/* Mobile: padding mai mic */
@media (max-width: 768px) {
    [data-page-design="alt-d"] .summary-info-card,
    [data-page-design="alt-d"] .summary-action-card {
        padding: 18px;
        gap: 12px;
    }
    [data-page-design="alt-d"] .summary-info-card .tp-product-details-title {
        font-size: 20px;
    }
}

/* ----- Galerie Alt D — combined-grid (overlay pill thumbs).
   Hero 1:1 cu thumbs strip floating pe baza imaginii principale.
   Compatibil cu Slick.js: nu modificam slick-list/slick-track widths
   (calculate JS at init), doar pozitionam parent ca overlay si
   ajustam slide-uri vizual. ----- */
[data-page-design="alt-d"] .tp-product-details-thumb-wrapper {
    border-radius: var(--aragold-card-radius);
    overflow: hidden;
    position: relative;
}
[data-page-design="alt-d"] .bb-product-gallery {
    position: relative;
    display: block;
}
[data-page-design="alt-d"] .bb-product-gallery-images {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fff;
}
/* Slick seteaza inline `width` pe .slick-slide (calculat din viewport) — NU
   suprascriem cu 100% pentru ca s-ar mari la slick-track-width. Setam doar
   pe <a> + <img> (copii ai slide-ului) sa umple slide-ul corect. */
[data-page-design="alt-d"] .bb-product-gallery-images .slick-slide a,
[data-page-design="alt-d"] .bb-product-gallery-images .slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}
[data-page-design="alt-d"] .bb-product-gallery-images .slick-slide {
    height: 100%;
}
[data-page-design="alt-d"] .bb-product-gallery-images .slick-list,
[data-page-design="alt-d"] .bb-product-gallery-images .slick-track {
    height: 100%;
}

/* Thumbs container ca pill overlay floating — override CIRCUMSTANTIAL la
   regulile vertical-thumbnails din ecommerce.css (height:100%, min-width:80px). */
[data-page-design="alt-d"] .bb-product-gallery-thumbnails {
    position: absolute !important;
    top: auto !important;
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 8px 12px;
    box-shadow: 0 4px 16px rgba(1, 15, 28, 0.08);
    z-index: 5;
    display: flex !important;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 32px) !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 12px !important;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-list {
    overflow: hidden;
    max-width: 320px;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-track {
    display: flex;
    gap: 6px;
    align-items: center;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-slide {
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    transition: outline-color .2s ease;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-slide.slick-current {
    outline: 2px solid var(--aragold-gold);
    outline-offset: -1px;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 8px;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-slide > div {
    width: 100%;
    height: 100%;
}

/* Arrow buttons inside the pill — fara cerc, aliniate la mijloc */
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-arrow {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    color: #1a1a1a !important;
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-arrow:hover {
    color: var(--aragold-gold) !important;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-arrow.slick-disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-arrow svg {
    width: 18px;
    height: 18px;
}
[data-page-design="alt-d"] .bb-product-gallery-thumbnails .slick-arrow:before {
    display: none !important; /* Slick default content */
}

/* Trust strip + eye-row consistent radius (12px) */
[data-page-design="alt-d"] .tp-livrare,
[data-page-design="alt-d"] .trust-strip,
[data-page-design="alt-d"] .eye-row,
[data-page-design="alt-d"] .tp-product-visitors-pill {
    border-radius: var(--aragold-card-radius);
}

/* ----- Trust strip Alt D: row 4-col (paritate prototype, NOT marquee) ----- */
[data-page-design="alt-d"] .ara-trust-track {
    display: contents;
}
[data-page-design="alt-d"] .ara-trust-item[aria-hidden="true"] {
    display: none;
}
[data-page-design="alt-d"] .bb-product-detail .ara-trust-strip,
[data-page-design="alt-d"] .ara-trust-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    -webkit-mask-image: none;
            mask-image: none;
    padding: 0;
    width: 100%;
}
[data-page-design="alt-d"] .ara-trust-item {
    min-width: 0; /* fix flex truncation in grid cell */
}
[data-page-design="alt-d"] .ara-trust-title {
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.25;
}
[data-page-design="alt-d"] .ara-trust-sub {
    font-size: 10.5px;
    white-space: normal;
    line-height: 1.3;
}
@media (max-width: 991px) {
    [data-page-design="alt-d"] .bb-product-detail .ara-trust-strip,
    [data-page-design="alt-d"] .ara-trust-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ----- Page background Alt D: cream surface global pentru consistenta
   cu cardurile interioare (paritate prototype). ----- */
body:has([data-page-design="alt-d"]) .tp-product-details-area,
[data-page-design="alt-d"] {
    background: #ffffff;
}
[data-page-design="alt-d"] {
    padding-top: 16px;
    padding-bottom: 32px;
}

/* ----- Subscribe section: contained card cu surface bg + 12px radius
   (paritate prototype, NOT full-bleed gold). Aplicat doar pe pagini de
   produs cu Alt D activ. ----- */
body:has([data-page-design="alt-d"]) .tp-newsletter-area,
/* Subscribe area Alt D: dark navy bg + white text (paritate prototype). */
body:has([data-page-design="alt-d"]) .tp-subscribe-area {
    background: #0f1729 !important;
    border-radius: var(--aragold-card-radius) !important;
    margin: 40px auto 0 !important;
    max-width: calc(100% - 32px);
    color: #fff;
}
body:has([data-page-design="alt-d"]) .tp-subscribe-area .tp-subscribe-title,
body:has([data-page-design="alt-d"]) .tp-subscribe-area .tp-subscribe-content,
body:has([data-page-design="alt-d"]) .tp-subscribe-area .tp-subscribe-content span,
body:has([data-page-design="alt-d"]) .tp-subscribe-area h3 {
    color: #fff !important;
}
body:has([data-page-design="alt-d"]) .tp-subscribe-area .tp-subscribe-content > span {
    display: inline-block;
    background: rgba(189, 132, 76, 0.15);
    border: 1px solid rgba(189, 132, 76, 0.4);
    color: var(--aragold-gold) !important;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* Section dedesubt (related, categorii) cu surface bg + radius.
   Wrap-uim middle_sidebar continut (care contine widget categorii)
   intr-un card surface ca paritate prototype. */
[data-page-design="alt-d"] .tp-related-product,
[data-page-design="alt-d"] .tp-product-category-area {
    background: var(--aragold-surface);
    border-radius: var(--aragold-card-radius);
    padding: 24px;
    margin: 20px auto;
    max-width: calc(100% - 32px);
}

/* Categorii widget — paritate prototype Alt D: cards cu thumb 1:1
   square si name centred dedesubt (similar cu .pp-categorii-grid din
   prototype shared.css). Aragold widget randeaza in stilul slider-square
   cu markup .tp-product-categories-slider > .swiper-wrapper > .swiper-
   slide > .tp-product-category-item structure. */
[data-page-design="alt-d"] .tp-product-categories-slider {
    background: var(--aragold-surface);
    border-radius: var(--aragold-card-radius);
    padding: 24px;
    margin: 20px auto;
    max-width: calc(100% - 32px);
}
[data-page-design="alt-d"] .tp-product-categories-slider .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    transform: none !important;
}
[data-page-design="alt-d"] .tp-product-categories-slider .swiper-slide {
    width: auto !important;
    margin: 0 !important;
}
[data-page-design="alt-d"] .tp-product-category-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--aragold-border);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    margin-bottom: 0 !important;
    padding: 0 0 14px !important;
    text-align: center !important;
    text-decoration: none;
    color: var(--aragold-text);
}
[data-page-design="alt-d"] .tp-product-category-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border-color: var(--aragold-gold);
}

/* Thumb 1:1 pătrat — paritate exactă prototype Alt D, NO oval clipping */
[data-page-design="alt-d"] .tp-product-category-thumb-square,
[data-page-design="alt-d"] .tp-product-category-thumb {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden;
    background: linear-gradient(135deg, #FAF7F2, #F0ECE4, #E8DFCF);
    border-radius: 0 !important;
    margin-bottom: 14px;
    position: relative;
}
[data-page-design="alt-d"] .tp-product-category-thumb-square a,
[data-page-design="alt-d"] .tp-product-category-thumb a,
[data-page-design="alt-d"] .tp-product-category-thumb > a,
[data-page-design="alt-d"] .tp-product-category-thumb-square > a {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    overflow: hidden;
}
[data-page-design="alt-d"] .tp-product-category-thumb-square img,
[data-page-design="alt-d"] .tp-product-category-thumb img,
[data-page-design="alt-d"] .tp-category-square-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
    transition: transform .4s ease;
}
[data-page-design="alt-d"] .tp-product-category-item:hover img {
    transform: scale(1.04);
}

[data-page-design="alt-d"] .tp-product-category-content {
    padding: 0;
    text-align: center;
}
[data-page-design="alt-d"] .tp-product-category-title {
    margin: 0 14px 3px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--aragold-text);
    line-height: 1.3;
}
[data-page-design="alt-d"] .tp-product-category-title a {
    color: inherit;
    text-decoration: none;
}
[data-page-design="alt-d"] .tp-product-category-content p {
    font-size: 11.5px;
    color: var(--aragold-muted);
    margin: 0 14px;
}

/* Responsive — paritate cu prototype shared.css breakpoints */
@media (max-width: 1000px) {
    [data-page-design="alt-d"] .tp-product-categories-slider .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    [data-page-design="alt-d"] .tp-product-category-title { font-size: 12px; margin: 0 10px 2px !important; }
    [data-page-design="alt-d"] .tp-product-category-content p { font-size: 10.5px; margin: 0 10px; }
}
@media (max-width: 600px) {
    [data-page-design="alt-d"] .tp-product-categories-slider .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Section title (Categorii / Related Products) — font size si weight
   consistent cu prototype */
[data-page-design="alt-d"] .tp-section-title-wrapper-6,
[data-page-design="alt-d"] .tp-related-product .tp-section-title-6 {
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--aragold-text);
    margin-bottom: 16px;
}

/* ----- Alt D — Gramaj Hybrid (+N pill popover) ----- */

/* Lista de chips se intinde pe toata latimea attr-group prin
   space-between (paritate prototype). flex-wrap nowrap pe desktop+
   tablet ca toate sa fie inline pe un rand. */
[data-page-design="alt-d"] .text-swatches-wrapper .bb-product-attribute-swatch-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* +N pill — chip dasshed gold, paritate prototype Alt D.
   Same min-width + padding ca chips normale ca sa intre in space-between. */
[data-page-design="alt-d"] .attr-popover-trigger {
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
[data-page-design="alt-d"] .attr-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    min-width: 42px;
    background: #fff;
    border: 1px dashed var(--aragold-border);
    border-radius: 6px;
    color: var(--aragold-gold);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
[data-page-design="alt-d"] .attr-more-btn:hover {
    background: rgba(189, 132, 76, 0.06);
    border-color: var(--aragold-gold);
    border-style: solid;
}
[data-page-design="alt-d"] .attr-more-btn svg {
    width: 12px;
    height: 12px;
    transition: transform .2s ease;
}
[data-page-design="alt-d"] .attr-popover[data-open="true"] ~ ul .attr-more-btn svg,
[data-page-design="alt-d"] .text-swatches-wrapper .attr-popover[data-open="true"] + .bb-product-attribute-swatch-list .attr-more-btn svg {
    transform: rotate(180deg);
}

/* Popover panel — sub randul de chips, lățime = wrapper, conține rest */
[data-page-design="alt-d"] .attr-popover {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
}
[data-page-design="alt-d"] .attr-popover-panel {
    display: none;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--aragold-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(1, 15, 28, .1);
    padding: 12px;
    width: 100%;
}
[data-page-design="alt-d"] .attr-popover[data-open="true"] .attr-popover-panel {
    display: block;
}
[data-page-design="alt-d"] .attr-list-grid-full {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    flex-wrap: unset;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   ALT A — Horizontal refined (hover zoom + lightbox + Builder.io)
============================================================ */

[data-page-design="alt-a"] .tp-product-details-thumb-wrapper .tp-product-details-thumb img {
    transition: transform .4s ease;
    cursor: zoom-in;
}
[data-page-design="alt-a"] .tp-product-details-thumb-wrapper .tp-product-details-thumb:hover img {
    transform: scale(1.04);
}
[data-page-design="alt-a"] .tp-related-product {
    background: var(--aragold-surface);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}
[data-page-design="alt-a"] .tp-related-product .tp-section-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--aragold-text);
}

/* ============================================================
   ALT B — Vertical thumbs luxury + bullets pagination
============================================================ */

[data-page-design="alt-b"] .tp-related-product {
    background: var(--aragold-surface);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
}
[data-page-design="alt-b"] .ecommerce-categories-widget .category-item img,
[data-page-design="alt-b"] .ecommerce-categories-widget .category-thumb img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ============================================================
   ALT C — Editorial stack (Acne Studios scroll-snap)
============================================================ */

[data-page-design="alt-c"] .tp-product-details-thumb-wrapper {
    box-shadow: none;
    border-radius: var(--aragold-card-radius);
    overflow: hidden;
}

/* ============================================================
   COMMON — Mecanisme partajate intre designs
============================================================ */

/* Bullets pagination styling pentru related products carusel
   (folosit cand un design alege pagination type 'bullets' in loc
   de scrollbar). Aplica gold pill 24x5px pe activ. */
.tp-related-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    opacity: 1;
    margin: 0 5px !important;
    transition: width .25s ease, background-color .2s ease;
    cursor: pointer;
    vertical-align: middle;
}
.tp-related-pagination .swiper-pagination-bullet-active {
    background: var(--aragold-gold);
    width: 24px;
}

/* ============================================================
   FAZA 2 NOTES — TODO pentru paritate completa cu prototypes
============================================================
   Schimbari care necesita port markup blade + JS suplimentar:

   ALT A:
   - Builder.io quickcopy markup pentru related products
   - Swiper carusel cu scrollbar gold (vs shofy default)

   ALT B:
   - Galerie verticala (thumbs stanga, main dreapta) — restructurare
     product-gallery.blade.php
   - Bullets pagination JS init (modificare partials shofy related)

   ALT C:
   - Galerie scroll-snap stack — restructurare gallery markup
   - Gramaj scroll chips cu sageti — JS implementation noua

   ALT D:
   - Gramaj hybrid +N pill popover — JS port din prototype
   - Galerie combined-grid (hero + thumbs strip overlay) — restructurare
     gallery markup complet

   Aceste schimbari sunt scope > 1h fiecare si trebuie atacate ca
   tichete separate (Phase 2.1, 2.2, 2.3, 2.4).
============================================================ */