/**
 * Product detail — attribute selectors (chip-style swatches)
 *
 * Matches the Figma design (https://www.figma.com/design/gDuDag6hHwlm2PBNGRTSML/
 * aragold.mediadesignro.ro?node-id=364-460):
 *
 *   - Title:     Poppins Regular 14px / #3D3D3D — "Gramaj:" / "Diametru:" etc.
 *   - Chip:      White bg, 1px #CED4DA border, 6px radius, padding 9px 16px,
 *                Poppins Regular 14px #727578 text.
 *   - Selected:  1px #BD844C gold border + 20x20 notched checkmark in corner.
 *   - Disabled:  diagonal strikethrough line (45deg) across the chip, text
 *                color #CED4DA, cursor not-allowed.
 *
 * Scope: .bb-product-attribute-swatch (standard Botble markup from
 * platform/plugins/ecommerce/resources/views/themes/attributes/_layouts/).
 * No markup changes needed — all styling is achieved via CSS on existing
 * classes and pseudo-elements.
 */

/* ----- Container spacing -------------------------------------------------- */
.bb-product-detail .bb-product-attribute-swatch {
    margin-bottom: 16px;
}

/* ----- Title -------------------------------------------------------------- */
/* Target (alt-c shared.css .attr-group-title): 13px / weight 500 / #010F1C.   */
.bb-product-detail .bb-product-attribute-swatch-title {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1px;
    color: #010F1C;
    margin: 0 0 6px;
    padding: 0;
    text-transform: none;
}

/* ----- List (chip row) ---------------------------------------------------- */
.bb-product-detail .bb-product-attribute-swatch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ----- Chip item ---------------------------------------------------------- */
.bb-product-detail .bb-product-attribute-swatch-item {
    margin: 0;
    padding: 0;
    display: inline-flex;
    position: relative;
}

.bb-product-detail .bb-product-attribute-swatch-item label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #CED4DA;
    border-radius: 6px;
    padding: 8px 14px;
    min-width: 48px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    position: relative;
    margin: 0;
    overflow: hidden;
}

.bb-product-detail .bb-product-attribute-swatch-item input[type="radio"].product-filter-item,
.bb-product-detail .bb-product-attribute-swatch-item input[type="checkbox"].product-filter-item {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.bb-product-detail .bb-product-attribute-text-display {
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #727578;
    white-space: nowrap;
    text-align: center;
    /* Reset shofy theme's default (5px 15px) — our chip padding lives on the
     * label, so the inner span should not add its own box. */
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
}

/* ----- Hover -------------------------------------------------------------- */
.bb-product-detail .bb-product-attribute-swatch-item:not(.disabled) label:hover {
    border-color: #BD844C;
}

/* ----- Selected (checked radio) ------------------------------------------
 * Scoped to :not(.disabled) because a disabled variation can still carry the
 * input:checked state when pre-selected from URL or default. In that case we
 * want the disabled strikethrough (handled below) to win — not render BOTH
 * the corner checkmark AND the strikethrough on top of each other. */
.bb-product-detail .bb-product-attribute-swatch-item:not(.disabled):has(input:checked) label,
.bb-product-detail .bb-product-attribute-swatch-item.active:not(.disabled) label,
.bb-product-detail .bb-product-attribute-swatch-item.selected:not(.disabled) label {
    border-color: #BD844C;
}

/* Notched-corner + checkmark indicator (bottom-right), matching Figma
 * imgVector7 asset — a small gold triangle wedge filling the bottom-right
 * corner with a white check stroke over it. */
.bb-product-detail .bb-product-attribute-swatch-item:not(.disabled):has(input:checked) label::after,
.bb-product-detail .bb-product-attribute-swatch-item.active:not(.disabled) label::after,
.bb-product-detail .bb-product-attribute-swatch-item.selected:not(.disabled) label::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23BD844C' d='M20 0v20H0L20 0z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M11.5 14l1.8 1.8 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

/* ----- Kill Botble ecommerce plugin's duplicate checkmark ----------------
 * Plugin ecommerce aplica automat un white checkmark SVG pe .bb-product-
 * attribute-text-display::after cand input este checked (regula din
 * front-ecommerce.css). Noi deja avem notched-corner gold pe label::after
 * (vezi mai sus). Suprimam duplicarea. */
.bb-product-detail .bb-product-attribute-swatch-item .bb-product-attribute-text-display::before,
.bb-product-detail .bb-product-attribute-swatch-item .bb-product-attribute-text-display::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ----- Disabled ----------------------------------------------------------- */
.bb-product-detail .bb-product-attribute-swatch-item.disabled label {
    cursor: not-allowed;
    background: #ffffff;
}

.bb-product-detail .bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display {
    color: #CED4DA;
}

/* Diagonal strikethrough line corner-to-corner (45°) */
.bb-product-detail .bb-product-attribute-swatch-item.disabled label::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - 0.75px),
        #CED4DA calc(50% - 0.75px),
        #CED4DA calc(50% + 0.75px),
        transparent calc(50% + 0.75px)
    );
}

/* ----- Visual (color/image) swatches — round chip variant ---------------- */
.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item label {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border-width: 1.5px;
}

.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item:has(input:checked) label,
.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item.active label {
    border-color: #BD844C;
}

.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item label::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--bb-attribute-color, #CED4DA);
    opacity: 0.4;
}

.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item:has(input:checked) label::before,
.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item.active label::before {
    opacity: 1;
}

/* Suppress the checkmark overlay on visual swatches — the ring itself is the cue */
.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item:has(input:checked) label::after,
.bb-product-detail .bb-product-attribute-swatch[data-type="visual"] .bb-product-attribute-swatch-item.active label::after {
    display: none;
}

/* ========================================================================
 * Icon Specs list — premium spec display (Alt C pattern)
 * ========================================================================
 *
 * Rendered by views/ecommerce/includes/icon-specs.blade.php underneath the
 * Gramaj chip row (variable products) or standalone (simple products).
 *
 *   - Container: 1px light-gray border, 8px radius, flex-column of rows.
 *   - Row: gold circular icon (34x34, #FEF9F3 bg, #BD844C stroke) on the
 *     left, muted label in the middle, dark value pushed to the right.
 *     Rows are separated by a 1px top border; first row has no top border.
 */
.bb-product-detail .ara-icon-specs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #EDEDED;
    border-radius: 8px;
    overflow: hidden;
    margin: 14px 0 16px;
    background: #fff;
}

.bb-product-detail .ara-icon-specs-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #EDEDED;
}

.bb-product-detail .ara-icon-specs-row:first-child {
    border-top: 0;
}

.bb-product-detail .ara-icon-specs-row .ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #FEF9F3;
    color: #BD844C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bb-product-detail .ara-icon-specs-row .ico svg {
    width: 16px;
    height: 16px;
}

.bb-product-detail .ara-icon-specs-row .label {
    flex: 1;
    font-size: 13px;
    color: #727578;
    margin: 0;
}

.bb-product-detail .ara-icon-specs-row .value {
    font-size: 14px;
    color: #010F1C;
    font-weight: 500;
    text-align: right;
}

/* ----- Trust strip (Livrare / Retur / Garanție / Împachetare) ---------- */
/* Pattern din public/product-page-reference/alt-c.html v1 Icon Specs.      */

.bb-product-detail .ara-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 16px 0;
    padding: 4px 0;
    border-top: 0;
    border-bottom: 0;
}

.bb-product-detail .ara-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bb-product-detail .ara-trust-ico {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #FEF9F3;
    color: #BD844C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bb-product-detail .ara-trust-ico svg {
    width: 18px;
    height: 18px;
}

.bb-product-detail .ara-trust-text {
    min-width: 0;
    line-height: 1.3;
}

.bb-product-detail .ara-trust-title {
    font-size: 13px;
    font-weight: 500;
    color: #010F1C;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-product-detail .ara-trust-sub {
    font-size: 11px;
    color: #727578;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991px) {
    .bb-product-detail .ara-trust-strip {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

/* ========================================================================
 * Product detail — right column (title + price + qty/cart + share)
 * Pattern: public/product-page-reference/alt-c.html (shared.css v1).
 * Overrides Shofy theme defaults to match the "Icon Specs" approved design.
 * ==================================================================== */

/* ----- Title (h1) ----------------------------------------------------- */
/* Target: 28px / weight 500 / line-height 1.25 / #010F1C / no margin.    */
.bb-product-detail .tp-product-details-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.25;
    color: #010F1C;
    margin: 0 0 12px;
    letter-spacing: 0;
}

/* ----- Short description ---------------------------------------------- */
/* Target: 14px / weight 400 / #3D3D3D / line-height 1.5 / no margin.    */
.bb-product-detail .tp-product-details-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #3D3D3D;
    margin: 0 0 20px;
}

/* ----- Price ---------------------------------------------------------- */
/* Target: 22px / weight 600 / line-height 1.2 / #010F1C / no margin.    */
.bb-product-detail .tp-product-details-price-wrapper {
    margin: 0 0 20px;
}
.bb-product-detail .tp-product-details-price.new-price {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #010F1C;
}
.bb-product-detail .tp-product-details-price.old-price {
    font-size: 15px;
    font-weight: 400;
    color: #727578;
    margin-left: 6px;
    text-decoration: line-through;
}

/* ----- Stock / availability ------------------------------------------ */
/* Target: 12px / weight 500 / #006554 green, dot prefix, no margin.    */
.bb-product-detail .number-items-available {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #006554;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bb-product-detail .number-items-available::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.bb-product-detail .number-items-available .text-success {
    color: inherit !important;
}

/* ----- Quantity + Cart + Wishlist row --------------------------------- */
/* Target: single flex row (gap 8); qty-counter = 120x52 #F8F9FA pill;
 *         btn-cart = black pill, cart SVG + text, flex:1 52h;
 *         btn-wishlist = 52x52 gold square, heart icon.
 * Live markup:
 *   .tp-product-details-action-wrapper
 *     > h3.tp-product-details-action-title ("Quantity")
 *     > .tp-product-details-action-item-wrapper (flex row)
 *         > .tp-product-details-quantity > .tp-product-quantity (counter)
 *         > .tp-product-details-add-to-cart > button.tp-product-details-add-to-cart-btn
 *         > (inserted by blade override) wishlist trigger
 *                                                                       */
.bb-product-detail .tp-product-details-action-wrapper {
    margin-top: 0;
}
.bb-product-detail .tp-product-details-action-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: #010F1C;
    margin: 0 0 8px;
    text-transform: none;
    letter-spacing: 0;
}
.bb-product-detail .tp-product-details-action-item-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
}
.bb-product-detail .tp-product-details-action-item-wrapper > * {
    margin: 0 !important; /* neutralise theme's mb-15 / mr-15 utilities */
}

/* Quantity counter — pill style */
.bb-product-detail .tp-product-details-quantity {
    flex-shrink: 0;
}
.bb-product-detail .tp-product-quantity {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    height: 52px;
    padding: 8px 10px;
    background: #F8F9FA;
    border: 1px solid #F8F9FA;
    border-radius: 6px;
    gap: 8px;
}
/* Override Shofy theme defaults: .tp-cart-minus / .tp-cart-plus use absolute
 * positioning (left:0 / right:0) in theme.css; restore to flex flow here. */
.bb-product-detail .tp-product-quantity .tp-cart-minus,
.bb-product-detail .tp-product-quantity .tp-cart-plus,
.bb-product-detail .tp-product-details-action-item-wrapper .tp-product-details-quantity .tp-cart-minus,
.bb-product-detail .tp-product-details-action-item-wrapper .tp-product-details-quantity .tp-cart-plus {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none; /* Override Shofy's translateY(-50%) — static position makes top:50% useless but transform still shifted elements -14px */
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #010F1C;
    flex-shrink: 0;
    vertical-align: middle;
}
.bb-product-detail .tp-product-quantity .tp-cart-input,
.bb-product-detail .tp-product-quantity .tp-cart-input[type="number"],
.bb-product-detail .tp-product-quantity .tp-cart-input[type="text"] {
    position: static;
    flex: 0 0 auto;
    width: 24px;
    min-width: 24px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px; /* Match input height for vertical centering — matches target .qty-val span behavior */
    color: #010F1C;
    text-align: center;
    vertical-align: middle;
    appearance: textfield;
    -moz-appearance: textfield;
    box-sizing: border-box;
}
.bb-product-detail .tp-product-quantity .tp-cart-input::-webkit-outer-spin-button,
.bb-product-detail .tp-product-quantity .tp-cart-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Add to cart button — black pill with cart icon */
.bb-product-detail .tp-product-details-add-to-cart {
    flex: 1;
    width: auto !important;
}
.bb-product-detail .tp-product-details-add-to-cart-btn {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: #010F1C;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s ease;
    text-transform: none;
    letter-spacing: 0;
}
.bb-product-detail .tp-product-details-add-to-cart-btn:hover:not(:disabled):not(.btn-disabled) {
    background: #1a2737;
    color: #fff;
}
.bb-product-detail .tp-product-details-add-to-cart-btn:disabled,
.bb-product-detail .tp-product-details-add-to-cart-btn.btn-disabled {
    background: #9ca3af;
    color: #fff;
    cursor: not-allowed;
}
.bb-product-detail .tp-product-details-add-to-cart-btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h2l2 12h12l2-9H7'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='18' cy='19' r='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Wishlist square button — inline at end of qty row (hoisted by blade) */
.bb-product-detail .tp-product-details-action-item-wrapper .tp-product-details-wishlist-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    background: #BD844C;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.bb-product-detail .tp-product-details-action-item-wrapper .tp-product-details-wishlist-btn:hover {
    background: #a8723e;
}
.bb-product-detail .tp-product-details-action-item-wrapper .tp-product-details-wishlist-btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* Buy now (quick-buy) hidden in this layout — design shows only cart+wishlist.
 * If active, push to its own row with transparent styling. */
.bb-product-detail .tp-product-details-buy-now-btn {
    display: none !important;
}

/* ----- Hide the original "Add Wishlist / Compare" text links below ---- */
/* Target has neither — replaced by the square wishlist button above.    */
.bb-product-detail .tp-product-details-action-sm {
    display: none !important;
}

/* ----- Share row ------------------------------------------------------ */
/* Target: flex row with "Share:" label + 5 circle icons (34x34, border),
 *         border-top 1px #EDEDED, padding 12px 0, no border-bottom.     */
.bb-product-detail .tp-product-details-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin: 0;
    border-top: 1px solid #EDEDED;
    gap: 12px;
}
.bb-product-detail .tp-product-details-social > span {
    font-size: 13px;
    font-weight: 500;
    color: #010F1C;
}
.bb-product-detail .tp-product-details-social .bb-social-sharing {
    display: inline-flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bb-product-detail .tp-product-details-social .bb-social-sharing .bb-social-sharing__item,
.bb-product-detail .tp-product-details-social .bb-social-sharing__link,
.bb-product-detail .tp-product-details-social .bb-social-sharing a {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #CED4DA;
    background: transparent;
    color: #BD844C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.bb-product-detail .tp-product-details-social .bb-social-sharing a:hover {
    border-color: #BD844C;
    background: #FEF9F3;
}
.bb-product-detail .tp-product-details-social .bb-social-sharing svg,
.bb-product-detail .tp-product-details-social .bb-social-sharing img {
    width: 13px;
    height: 13px;
}

/* Galeria produsului - thumbnails pe MOBIL (< 768px):
 * Slick initializeaza cu slidesToShow: 4 la mobile, dar containerul are
 * padding 0 40px rezervat sagetilor de navigare — thumbs-urile ies din
 * latimea imaginii de produs si sagetile pica in afara. User: thumb-uri
 * sub imagine, latime egala cu imaginea, 4-5 vizibile, fara sageti.
 * Restul thumbs accesibile prin swipe (tap-slide slick default). */
@media (max-width: 767.98px) {
    /* Zero padding container: sagetile sunt ascunse, nu mai au nevoie de
     * spatiu rezervat — thumbs incep la marginea imaginii si se termina
     * la celelalta margine (acelasi latime cu imaginea de produs). */
    .bb-product-gallery-thumbnails {
        padding: 0 !important;
    }
    .bb-product-gallery-thumbnails .slick-list {
        padding: 0 !important;
    }
    /* Ascundem sagetile de navigare — slick inca permite swipe touch
     * pentru a vedea thumb-urile care nu incap in viewport. */
    .bb-product-gallery-thumbnails .slick-prev,
    .bb-product-gallery-thumbnails .slick-next {
        display: none !important;
    }
}

/* Sectiunea categorii (slider-square) sub descriere: patrate rotunjite
 * in loc de cercuri. Parent theme (shofy) seteaza `.tp-product-category-thumb a
 * { border-radius: 50% }` (cerc). Aici override cu specificitate mai mare
 * (dublu-clasa) pe varianta square pentru link, imagine si content box. */
.tp-product-category .tp-product-category-thumb.tp-product-category-thumb-square .tp-category-square-link {
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}
.tp-product-category .tp-product-category-thumb.tp-product-category-thumb-square .tp-category-square-image {
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}