/* =========================================================
   JEWELXY — PRODUCT PAGE CSS
   Integration layer for Motta theme + Dokan single product page.
   Light, clean marketplace look with gold accents.

   STRUCTURE:
     1. Design tokens (colors, spacing, fonts)
     2. Page layout (2-column grid)
     3. Mobile compact header — hide on desktop
     4. Product gallery — 300x300 image + multi-image thumbnails
     5. Product summary — title, meta, price, description
     6. Compare/Wishlist row
     7. Hide duplicate Dokan vendor box in summary
     8. Shipping/Delivery widget
     9. Report Abuse link
    10. Seller card (sidebar) — name, logo, rating, membership
    11. "You May Also Like" (full-width grid below product)
    12. Tabs (Description / Additional Info / Reviews)
    13. Review form
    14. Similar Products (Motta's related carousel)
    15. Responsive
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
    --gold:       #c9a96a;
    --gold-dark:  #b08e4a;
    --gold-soft:  #e9d9b3;
    --bronze:     #c08a4a;

    --text:       #2b2b2b;
    --text-mute:  #6a6a6a;
    --text-light: #8a8a8a;

    --line:       #e6e6e6;
    --line-soft:  #efefef;
    --card:       #ffffff;

    --shadow:     0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .03);

    --radius:     4px;
    --container:  1280px;
}


/* =========================================================
   2. PAGE LAYOUT — single column. Gallery+summary inside
   .jewelxy-product-main is still 2-col via flex (Section 4);
   the seller card and tabs now stack full-width below it.
   ========================================================= */

body .jewelxy-product-layout,
.woocommerce div.product .jewelxy-product-layout {
    display: block;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px 60px;
}

body .jewelxy-product-layout > .jewelxy-product-main,
.woocommerce div.product .jewelxy-product-layout > .jewelxy-product-main {
    width: 100%;
    float: none;
}

/* Breadcrumb — give it room to breathe before the gallery/summary
   below, instead of sitting right on top of it. */
.woocommerce-breadcrumb {
    margin-bottom: 28px !important;
    display: block;
}


/* =========================================================
   3. MOBILE COMPACT HEADER — hide on desktop
   ========================================================= */
@media (min-width: 992px) {
    .jewelxy-product-main .product-header-compact {
        display: none !important;
    }
}


/* =========================================================
   4. PRODUCT GALLERY — 300x300 main image, vertical thumbs
   ========================================================= */

/* Two-column inner layout: gallery on left, summary on right */
.jewelxy-product-main .product-gallery-summary {
    display: flex !important;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

/* Gallery column — 50% of the row */
.jewelxy-product-main .motta-product-gallery {
    flex: 1 1 0%;
    max-width: none;
    width: auto;
    position: relative;
}

/* Summary column — the other 50% */
.jewelxy-product-main .summary.entry-summary {
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    width: auto;
    padding: 0;
}

/* The gallery wrapper */
.jewelxy-product-main .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative;
}

.jewelxy-product-main .woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}

/* Main image cell - strict 1:1 square */
.jewelxy-product-main .woocommerce-product-gallery__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fafafa;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
}

.jewelxy-product-main .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.jewelxy-product-main .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* The actual zoom/fullscreen icon: Motta's own
   .motta-product-images-buttons wrapper (it can hold a 360 button, a
   video button, and/or a lightbox/zoom button — per this product it's
   just the lightbox one). Per Motta's Single_Product class, this is
   hooked between open_motta_product_gallery (priority 19) and
   close_motta_product_gallery (21) on woocommerce_before_single_product_summary,
   so it renders absolutely-positioned INSIDE .motta-product-gallery —
   not the WooCommerce core .woocommerce-product-gallery__trigger I'd
   been editing before (that element isn't even on this page, which is
   why neither previous fix changed anything). Motta's own CSS
   presumably anchors it from the bottom, which used to land correctly
   on the image — but since we restructured .motta-product-gallery to
   stack the thumbnails inside it (making it taller), "bottom" now lands
   in the thumbnail strip. Forcing it to the top instead sidesteps that
   entirely, since the image is always first regardless of height. */
.jewelxy-product-main .motta-product-images-buttons {
    position: absolute !important;
    top: auto !important;
    /* thumbnail strip = 12px top margin + 70px thumb height, then 12px
       of our own breathing room above that, landing this at the actual
       bottom-right corner of the photo instead of past the thumbnails */
    bottom: calc(12px + 70px + 12px) !important;
    left: auto !important;
    right: 12px !important;
    z-index: 5;
}
.jewelxy-gallery-copy-link {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--shadow);
    color: var(--text-mute);
    text-decoration: none !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.jewelxy-gallery-copy-link:hover {
    background: #fff;
    color: var(--gold-dark);
}
.jewelxy-gallery-copy-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.jewelxy-gallery-copy-link__feedback {
    display: none;
    position: absolute;
    top: -34px;
    right: 0;
    white-space: nowrap;
    background: var(--text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--radius);
}
.jewelxy-gallery-copy-link.is-copied .jewelxy-gallery-copy-link__feedback {
    display: block;
}

/* Old WooCommerce-core-trigger fix, left in place in case it's also
   present — harmless either way since it targets a different element. */
.jewelxy-product-main .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Motta's gallery wrapper — turn into flex column so we can reorder */
.jewelxy-product-main .motta-product-gallery {
    display: flex;
    flex-direction: column;
}

/* Push the woocommerce gallery wrapper to the top */
.jewelxy-product-main .motta-product-gallery > .woocommerce-product-gallery {
    order: 1;
}

/* Thumbnails strip — push below the image with flexbox order */
.jewelxy-product-main .flex-control-nav.flex-control-thumbs {
    order: 2;
    position: static;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
}

.jewelxy-product-main .flex-control-nav.flex-control-thumbs li {
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    flex: 0 0 70px;
}

.jewelxy-product-main .flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    background: #fff;
    opacity: 0.65;
    transition: all .15s ease;
}

.jewelxy-product-main .flex-control-nav.flex-control-thumbs li img:hover,
.jewelxy-product-main .flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--gold);
}

/* =========================================================
   5. PRODUCT SUMMARY — title, meta, price, description
   ========================================================= */

/* Category now renders above the title (moved via PHP hook priority to
   match layout 4's behavior). It's no longer inside .product-meta-wrapper
   (that now only holds SKU + the inline stock badge), so it needs its
   own spacing here. */
.jewelxy-product-main .summary > .meta-cat {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-mute);
}

/* Share button — moved here from next to the breadcrumb, now sits
   between the category and the title. */
.jewelxy-product-main .jewelxy-share-button-wrapper {
    margin: 0 0 8px;
}

.jewelxy-product-main .product_title.entry-title {
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--text);
    line-height: 1.3;
}

/* Category + SKU row */
.jewelxy-product-main .product-meta-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--text-mute);
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}
.jewelxy-product-main .product-meta-wrapper .meta {
    margin: 0;
}
.jewelxy-product-main .meta-cat a,
.jewelxy-product-main .meta-sku .sku {
    color: var(--text);
}

/* Price + stock */
.jewelxy-product-main .motta-price-stock {
    margin: 16px 0;
}
.jewelxy-product-main .motta-price-stock .price {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}
.jewelxy-product-main .motta-price-stock .stock {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}
.jewelxy-product-main .motta-price-stock .stock.in-stock {
    color: #2e9d6e;
}
.jewelxy-product-main .motta-price-stock .stock.out-of-stock {
    color: #c0392b;
}

/* Hide any duplicate stock line outside the price block */
.jewelxy-product-main .summary > p.stock,
.jewelxy-product-main .summary .product-featured-icons + .stock,
.jewelxy-product-main .summary .motta-price-stock ~ p.stock {
    display: none !important;
}

/* Description / short description */
.jewelxy-product-main .summary .woocommerce-product-details__short-description,
.jewelxy-product-main .summary .short-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid var(--line-soft);
}
.jewelxy-product-main .summary .short-description__label {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Product meta (categories, tags at the bottom) */
.jewelxy-product-main .summary .product_meta {
    font-size: 13px;
    color: var(--text-mute);
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.jewelxy-product-main .summary .product_meta > span {
    display: block;
    margin-bottom: 6px;
}
.jewelxy-product-main .summary .product_meta a {
    color: var(--text);
}
.jewelxy-product-main .summary .product_meta a:hover {
    color: var(--gold-dark);
}

/* =========================================================
   6. PRODUCT CTA — Get a Quote / More Info buttons
   ========================================================= */

.jewelxy-product-cta {
    display: flex;
    gap: 12px;
    margin: 20px 0 16px;
}

.jewelxy-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    border-radius: var(--radius);
    border: 1px solid var(--gold);
    transition: all .2s ease;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
}

.jewelxy-btn--primary {
    background: var(--gold);
    color: #fff !important;
}
.jewelxy-btn--primary:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff !important;
}

.jewelxy-btn--secondary {
    background: #fff;
    color: var(--text) !important;
}
.jewelxy-btn--secondary:hover {
    background: #fffdf7;
    color: var(--gold-dark) !important;
}


/* =========================================================
   6b. PRODUCT ACTIONS — Like / Favourite as text+icon links
   ========================================================= */

.jewelxy-product-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.jewelxy-action-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: inherit;
    color: var(--text-mute) !important;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: color .15s ease;
    white-space: nowrap;
}
.jewelxy-action-link:hover,
.jewelxy-action-link:active,
.jewelxy-action-link:focus {
    background: transparent;
}

.jewelxy-action-link:hover {
    color: var(--gold-dark) !important;
}

.jewelxy-action-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    transition: fill .15s ease, stroke .15s ease;
}

/* Filled on hover */
.jewelxy-action-link:hover svg {
    fill: var(--gold-soft);
    stroke: var(--gold);
}
.jewelxy-product-actions .jewelxy-share-trigger {
    margin: 0 !important;
    padding: 4px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
/* Force-hide Motta's old compare/wishlist row (in case removal hook missed) */
.jewelxy-product-main .summary .product-featured-icons,
.jewelxy-product-main .summary .wcboost-products-compare-button,
.jewelxy-product-main .summary .wcboost-wishlist-button {
    display: none !important;
}
/* =========================================================
   7. HIDE DOKAN'S DEFAULT VENDOR BOX (we render our own)
   ========================================================= */
.jewelxy-product-main .product_meta .dokan-vendor-info-wrap {
    display: none;
}


/* =========================================================
   8. SHIPPING / DELIVERY WIDGET BLOCK
   ========================================================= */
.jewelxy-product-main .single-product-extra-content {
    margin-top: 16px;
}
.jewelxy-product-main .motta-icon-box-widget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jewelxy-product-main .motta-icon-box-widget__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: var(--radius);
    font-size: 13px;
    flex-wrap: nowrap;
}
.jewelxy-product-main .motta-icon-box-widget__icon svg {
    width: 22px;
    height: 22px;
    fill: var(--text-mute);
}
.jewelxy-product-main .motta-icon-box-widget__text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    white-space: normal;
}
.jewelxy-product-main .motta-icon-box-widget__button {
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
}
.jewelxy-product-main .motta-icon-box-widget__button:hover {
    color: var(--gold-dark);
}


/* =========================================================
   9. REPORT ABUSE LINK
   ========================================================= */
.jewelxy-product-main .dokan-report-abuse-button {
    display: block;
    text-align: right;
    margin-top: -20px;
    color: var(--text-mute);
    font-size: 10px;
}



/* =========================================================
   10. SELLER INFORMATION — now an accordion tab (see
   jewelxy_seller_information_tab_content() in product-page.php),
   not a standalone section. No card chrome here (border/shadow/
   background) since .motta-dropdown already provides that.
   ========================================================= */

.jewelxy-seller-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.jewelxy-seller-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 2px;
    line-height: 1.3;
}
.jewelxy-seller-card__location {
    font-size: 12px;
    color: var(--text-mute);
}

/* Rating row in the seller card head */
.jewelxy-seller-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-mute);
}
.jewelxy-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
}
.jewelxy-stars__bg {
    color: #e0e0e0;
}
.jewelxy-stars__fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--gold);
}
.jewelxy-rating-num {
    font-weight: 600;
    color: var(--text);
}
.jewelxy-rating-count {
    color: var(--text-light);
}

/* Body: logo + membership/business type */
.jewelxy-seller-card__body {
    display: flex;
    align-items: center;
    gap: 10px;
}
.jewelxy-seller-card__logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line-soft);
}
.jewelxy-seller-card__meta {
    font-size: 12px;
    line-height: 1.5;
    min-width: 0;
}
.jewelxy-seller-card__badge {
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 12px;
}
.jewelxy-seller-card__badge--bronze   { color: #b87333; }
.jewelxy-seller-card__badge--silver   { color: #909090; }
.jewelxy-seller-card__badge--gold     { color: var(--gold); }
.jewelxy-seller-card__badge--platinum { color: #4a6b8a; }

.jewelxy-seller-card__type {
    color: var(--text-mute);
}

/* Actions — pill-style buttons, sits below the body */
.jewelxy-seller-card__actions {
    display: flex;
    gap: 8px;
}
.jewelxy-seller-card__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 12px;
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
}
.jewelxy-seller-card__link:hover {
    background: var(--gold-soft);
    color: var(--gold-dark);
}


/* =========================================================
   11. "YOU MAY ALSO LIKE" — full-width grid below product
   ========================================================= */

.jewelxy-ymal-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px 60px;
}

.jewelxy-ymal-inner {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.jewelxy-ymal-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 20px;
    letter-spacing: 0.3px;
}

.jewelxy-ymal-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.jewelxy-ymal-track::-webkit-scrollbar {
    display: none;
}

.jewelxy-ymal-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 4 * 20px) / 5);
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--text);
    transition: transform .15s ease;
}
.jewelxy-ymal-card:hover {
    transform: translateY(-2px);
}
.jewelxy-ymal-card:hover .jewelxy-ymal-card__title {
    color: var(--gold-dark);
}

.jewelxy-ymal-card__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fafafa;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--line-soft);
}
.jewelxy-ymal-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.jewelxy-ymal-card__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #d8d8d8;
}
.jewelxy-ymal-card__fallback span { color: var(--gold-soft); }

.jewelxy-ymal-card__cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-mute);
    margin-bottom: 4px;
}
.jewelxy-ymal-card__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    transition: color .15s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   12. ACCORDION TABS (Motta dropdown layout)
   Each "tab" is a collapsible section. JS is added below.
   ========================================================= */

/* "Product Details" heading above the accordion — separates it from the
   gallery/summary above; the accordion's own margin-top is tightened
   right below since this heading now provides that separation instead. */
.jewelxy-product-details-title {
    margin: 32px 0 0;
    font-size: 20px;
    line-height: 1.3;
}

/* Container wrapping all the panels — flex column with a gap so each
   panel reads as its own separated card */
.jewelxy-product-main .woocommerce-tabs:not(.woocommerce-tabs--reviews) {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Each panel — confirmed from the actual rendered HTML: the real
   per-item wrapper is .woocommerce-Tabs-panel (shared class .wc-tab),
   NOT .motta-dropdown. That class never existed anywhere in the DOM,
   which is why every previous card-chrome and padding override built
   on top of it was 100% inert — the selectors required an ancestor
   that was never there. */
.jewelxy-product-main .woocommerce-tabs .wc-tab {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dropdown header (clickable title). Boosted with the real ancestor
   chain (.woocommerce-tabs .wc-tab) so this beats Motta's own native
   rules on specificity instead of relying on !important alone —
   the simpler ".jewelxy-product-main .motta-dropdown__title" selector
   was valid but apparently still lower-specificity than Motta's. */
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-decoration: none !important;
    cursor: pointer;
    background: transparent;
    transition: background .15s ease;
    position: relative;
}
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title:hover {
    background: #fafafa;
    color: var(--gold-dark) !important;
}

/* Plus/minus toggle indicator (our own, replacing Motta's pre-rendered
   SVGs below). The open state lives on the PANEL itself (.wc-tab.is-open
   in the real markup), not on any .motta-dropdown wrapper. */
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title::after {
    content: "+";
    font-size: 24px;
    font-weight: 300;
    color: var(--gold-dark);
    line-height: 1;
    margin-left: 12px;
    flex-shrink: 0;
    transition: color .15s ease;
}
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title:hover::after {
    color: var(--gold);
}
.jewelxy-product-main .woocommerce-tabs .wc-tab.is-open .motta-dropdown__title::after {
    content: "−";
}

/* Hide Motta's existing +/- icons (we use our own ::after above) */
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title .motta-svg-icon,
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__title svg {
    display: none !important;
}

/* Dropdown content. Closed by default — restoring this after dropping it
   last edit (reasoned it was redundant with Motta's own toggle, but it
   wasn't: removing it is what caused all three tabs to render open).
   No !important on display, so click-to-expand JS (which sets inline
   style) can still override it normally. */
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__content {
    display: none;
    padding: 4px 28px 20px !important;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}
.jewelxy-product-main .woocommerce-tabs .wc-tab .motta-dropdown__content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specificity backstop: each panel has a unique ID in the real markup
   (#tab-description, #tab-additional_information, #tab-seller_information).
   ID selectors outrank any class-based rule Motta's own CSS might use,
   so if the rules above still lose to theirs, these guarantee the win. */
#tab-description.wc-tab,
#tab-additional_information.wc-tab,
#tab-seller_information.wc-tab {
    padding: 0 !important;
    margin: 0 !important;
}
#tab-description .motta-dropdown__title,
#tab-additional_information .motta-dropdown__title,
#tab-seller_information .motta-dropdown__title {
    padding: 16px 28px !important;
}
#tab-description .motta-dropdown__content,
#tab-additional_information .motta-dropdown__content,
#tab-seller_information .motta-dropdown__content {
    padding: 4px 28px 20px !important;
}


/* Reset Motta's heading inside dropdown content (it's redundant) */
.jewelxy-product-main .motta-dropdown__content > h3:first-child {
    display: none;
}
.jewelxy-faq-list {
    display: flex;
    flex-direction: column;
}
.jewelxy-faq-item {
    border-bottom: 1px solid var(--line-soft);
}
.jewelxy-faq-item:last-child {
    border-bottom: 0;
}

.jewelxy-faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease;
}
.jewelxy-faq-item__q:hover,
.jewelxy-faq-item__q:active,
.jewelxy-faq-item__q:focus {
    background: transparent;
}
.jewelxy-faq-item__q:hover {
    color: var(--gold-dark);
}
.jewelxy-faq-item__q::after {
    content: "+";
    font-size: 18px;
    font-weight: 300;
        line-height: 1;
    margin-left: 12px;
    flex-shrink: 0;
    transition: color .15s ease;
}
.jewelxy-faq-item.is-open .jewelxy-faq-item__q::after {
    content: "−";
}

.jewelxy-faq-item__a {
    display: none;
    padding: 0 0 16px;
}
.jewelxy-faq-item__a p {
    margin: 0;
    font-size: 14px;
    color: var(--text-mute);
    line-height: 1.6;
}


/* =========================================================
   13. REVIEWS SECTION — separate card below tabs
   ========================================================= */


.jewelxy-product-main .woocommerce-tabs--reviews-title,
.jewelxy-product-main #reviews .woocommerce-Reviews-title,
.jewelxy-product-main #tab-reviews h2,
.jewelxy-product-main #tab-reviews h3,
.jewelxy-product-main #tab-reviews h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text);
}

/* Hide the duplicate standalone "Reviews" h2 below the rating breakdown */
.jewelxy-product-main .woocommerce-Reviews + h2,
.jewelxy-product-main h2.woocommerce-Reviews-title ~ h2 {
    display: none;
}

/* Rating summary block (the "0.0  5★ 0  4★ 0..." bars) */
.jewelxy-product-main .dokan-rating-wrap,
.jewelxy-product-main .ratings-summary,
.jewelxy-product-main .woocommerce-Reviews-summary {
    background: #fafafa;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}


/* =========================================================
   14. REVIEW FORM — styled input area
   ========================================================= */
.jewelxy-product-main #review_form_wrapper,
.jewelxy-product-main .comment-respond {
    background: #fafafa;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 16px;
}

.jewelxy-product-main #review_form_wrapper .comment-reply-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    display: block;
}

.jewelxy-product-main #review_form_wrapper p label,
.jewelxy-product-main #review_form_wrapper p.comment-form-rating label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.jewelxy-product-main #review_form_wrapper input[type="text"],
.jewelxy-product-main #review_form_wrapper input[type="email"],
.jewelxy-product-main #review_form_wrapper textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
}
.jewelxy-product-main #review_form_wrapper input:focus,
.jewelxy-product-main #review_form_wrapper textarea:focus {
    outline: none;
    border-color: var(--gold);
}
.jewelxy-product-main #review_form_wrapper textarea {
    min-height: 100px;
    resize: vertical;
}

.jewelxy-product-main #review_form_wrapper .submit,
.jewelxy-product-main #review_form_wrapper input[type="submit"],
.jewelxy-product-main button.dokan-btn-theme {
    background: var(--gold) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 10px 24px !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease;
}
.jewelxy-product-main #review_form_wrapper .submit:hover,
.jewelxy-product-main button.dokan-btn-theme:hover {
    background: var(--gold-dark) !important;
}

.jewelxy-product-main p.stars a {
    color: var(--gold) !important;
}

.jewelxy-product-main .commentlist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.jewelxy-product-main .commentlist li {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.jewelxy-product-main .commentlist li:last-child {
    border-bottom: 0;
}
/* =========================================================
   13. REVIEW FORM — clean styled form for "Write a review"
   ========================================================= */

.jewelxy-product-main #review_form_wrapper,
.jewelxy-product-main .comment-respond {
    background: #fafafa;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 20px;
}

.jewelxy-product-main #review_form_wrapper .comment-reply-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    display: block;
}

.jewelxy-product-main #review_form_wrapper p label,
.jewelxy-product-main #review_form_wrapper p.comment-form-rating label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.jewelxy-product-main #review_form_wrapper input[type="text"],
.jewelxy-product-main #review_form_wrapper input[type="email"],
.jewelxy-product-main #review_form_wrapper textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
}
.jewelxy-product-main #review_form_wrapper input:focus,
.jewelxy-product-main #review_form_wrapper textarea:focus {
    outline: none;
    border-color: var(--gold);
}
.jewelxy-product-main #review_form_wrapper textarea {
    min-height: 100px;
    resize: vertical;
}

.jewelxy-product-main #review_form_wrapper .submit,
.jewelxy-product-main #review_form_wrapper input[type="submit"] {
    background: var(--gold);
    color: #fff;
    border: 0;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease;
}
.jewelxy-product-main #review_form_wrapper .submit:hover,
.jewelxy-product-main #review_form_wrapper input[type="submit"]:hover {
    background: var(--gold-dark);
}

.jewelxy-product-main p.stars a {
    color: var(--gold) !important;
}

.jewelxy-product-main .commentlist,
.jewelxy-product-main #comments ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.jewelxy-product-main .commentlist li {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}
.jewelxy-product-main .commentlist li:last-child {
    border-bottom: 0;
}


/* =========================================================
   14. SIMILAR PRODUCTS — Motta's related carousel
   ========================================================= */

.jewelxy-product-main .related.products {
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.jewelxy-product-main .related.products > h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text);
}
.jewelxy-product-main .related.products .product .product-thumbnail {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fafafa;
    margin-bottom: 10px;
    border: 1px solid var(--line-soft);
}
.jewelxy-product-main .related.products .product .product-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.jewelxy-product-main .related.products .product .meta-cat {
    font-size: 11px;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jewelxy-product-main .related.products .product .woocommerce-loop-product__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
    margin: 4px 0 0;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .jewelxy-ymal-card { flex: 0 0 calc((100% - 3 * 20px) / 4); }
}

@media (max-width: 760px)  {
    body .jewelxy-product-layout,
    .woocommerce div.product .jewelxy-product-layout {
        padding-left: 16px;
        padding-right: 16px;
    }
    .jewelxy-product-main .product-gallery-summary {
        flex-direction: column;
    }
    .jewelxy-product-main .motta-product-gallery {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .jewelxy-product-main .summary.entry-summary {
        width: 100%;
    }
    .jewelxy-product-main .flex-control-nav.flex-control-thumbs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 10px;
    }
    .jewelxy-product-main .product-thumbnails-vertical .woocommerce-product-gallery__wrapper {
        margin-left: 0 !important;
    }
    .jewelxy-product-main .flex-control-nav.flex-control-thumbs li {
        width: 60px;
        height: 60px;
    }
    .jewelxy-ymal-track { gap: 14px; }
    .jewelxy-ymal-card { flex: 0 0 calc((100% - 14px) / 2); }
    .jewelxy-ymal-inner { padding: 18px; }
}
/* =========================================================
   TAB / REVIEWS SPACING
   (No breakout hack needed anymore — without the sidebar
   there's nothing stealing width, so these are already
   full width inside .jewelxy-product-main.)
   ========================================================= */

.jewelxy-product-main .related.products,
.jewelxy-product-main .motta-tabs-wrapper,
.jewelxy-product-main .woocommerce-tabs,
.jewelxy-product-main > .product-tabs {
    margin-top: 32px !important;
}
/* Strip Motta's native borders/dividers from inside the Reviews panel
   now that it lives in our accordion — form fields and the submit
   button are excluded so they still look like a field/button rather
   than invisible. */
.jewelxy-reviews-wrapped .motta-dropdown__content *:not(input):not(textarea):not(button) {
    border: 0 !important;
    box-shadow: none !important;
}
/* Hide the horizontal tab strip but keep panels visible */
.jewelxy-product-main .woocommerce-tabs > ul.tabs,
.jewelxy-product-main .woocommerce-tabs > ul.wc-tabs {
    display: none !important;
}

/* CRITICAL: keep the panels visible! */
.jewelxy-product-main .woocommerce-Tabs-panel {
    display: block !important;
}
/* =========================================================
   FIX: Move thumbnail carousel BELOW the main image
   ========================================================= */

/* The thumbs carousel wrapper that Motta uses */
.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel {
    order: 2;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 0;
    position: static;
    overflow: hidden;
}

/* The main image's wrapper goes first */
.jewelxy-product-main .woocommerce-product-gallery > .flex-viewport,
.jewelxy-product-main .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    order: 1;
    width: 100%;
}

/* Turn the parent into a flex column so order works */
.jewelxy-product-main .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Hide Motta's left thumbnail strip class if it's still showing */
.jewelxy-product-main.product-thumbnails-vertical .woocommerce-product-gallery,
.jewelxy-product-main .product-thumbnails-vertical .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
}

/* Thumbs container inside the carousel — horizontal row */
.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel .flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto !important;
}

.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel .flex-control-nav.flex-control-thumbs li {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    margin: 0;
    padding: 0;
}

.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel .flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    opacity: 0.65;
    transition: all .15s ease;
}

.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel .flex-control-nav.flex-control-thumbs li img.flex-active,
.jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel .flex-control-nav.flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--gold);
}

/* Hide the swiper prev/next arrows if not needed */
.jewelxy-product-main .motta-thumbs-button-prev,
.jewelxy-product-main .motta-thumbs-button-next {
    display: none !important;
}
/* Related products: fit cards to available count instead of forcing 5 */
.jewelxy-product-main .related.products .products,
.jewelxy-product-main .related.products .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.jewelxy-product-main .related.products .product,
.jewelxy-product-main .related.products .swiper-slide {
    flex: 0 0 calc(20% - 16px) !important;
    max-width: calc(20% - 16px) !important;
    width: auto !important;
    margin-right: 0 !important;
}

/* When carousel has fewer items than columns, items stay left-aligned */
.jewelxy-product-main .related.products .swiper-container,
.jewelxy-product-main .related.products .swiper {
    overflow: hidden;
}
/* Force header back to visible position */
body .site-header,
body header.site-header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    visibility: visible !important;
    display: block !important;
}
/* =========================================================
   NUCLEAR: Force gallery thumbnails BELOW the main image
   ========================================================= */

body .jewelxy-product-main .woocommerce-product-gallery,
body.woocommerce div.product .jewelxy-product-main .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

body .jewelxy-product-main .woocommerce-product-gallery > .flex-viewport,
body .jewelxy-product-main .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
body .jewelxy-product-main .woocommerce-product-gallery > .woocommerce-product-gallery__image {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

body .jewelxy-product-main .woocommerce-product-gallery > .woocommerce-product-gallery__thumbs-carousel {
    order: 99 !important;
    width: 100% !important;
    margin-top: 12px !important;
    margin-left: 0 !important;
    position: static !important;
}

/* Kill any inline-style width on the thumbs */
body .jewelxy-product-main .woocommerce-product-gallery__thumbs-carousel,
body .jewelxy-product-main .flex-control-nav.flex-control-thumbs {
    position: static !important;
    left: auto !important;
    top: auto !important;
}

/* Disable any vertical-thumbs body class adding left padding to wrapper */
body .jewelxy-product-main .product-thumbnails-vertical .woocommerce-product-gallery__wrapper,
body .jewelxy-product-main .woocommerce-product-gallery__wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* =========================================================
   FIX: Related Products — handle missing 5th slot
   When vendor has only 4 products, don't leave empty space
   ========================================================= */

.jewelxy-product-main .related.products .swiper-wrapper,
.jewelxy-product-main .related.products .related-product__carousel,
.jewelxy-product-main .related.products ul.products {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start !important;
}

.jewelxy-product-main .related.products .swiper-slide,
.jewelxy-product-main .related.products .product {
    flex: 1 1 0 !important;
    min-width: 0;
    max-width: calc((100% - 80px) / 5);   /* 5 cols, 4 gaps of 20px */
    margin-right: 0 !important;
}

/* Hide swiper nav arrows when not needed */
.jewelxy-product-main .related.products .swiper-button-disabled {
    display: none !important;
}

/* =========================================================
   NOTIFICATION TOAST — all wcboost / Woo notices
   Show as floating toast top-right, not pushing layout
   ========================================================= */

.wcboost-products-compare-notice,
.wcboost-wishlist-notice,
.wcboost-products-compare-notice--success,
.wcboost-wishlist-notice--success,
.wcboost-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-notices-wrapper > .woocommerce-info,
[class*="wcboost"][class*="notice"],
[class*="wcboost"][class*="message"] {
    position: fixed !important;
    top: 70px;
    right: 24px;
    left: auto !important;
    z-index: 9999;
    max-width: 360px;
    min-width: 280px;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-radius: var(--radius);
    background: #fff !important;
    border: 1px solid var(--gold-soft) !important;
    border-left: 4px solid var(--gold) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    color: var(--text) !important;
    font-size: 14px;
    list-style: none !important;
    animation: jewelxyToastIn .3s ease-out, jewelxyToastOut .3s ease-in 3s forwards;
}

/* Reset any inner formatting */
.wcboost-products-compare-notice a,
.wcboost-wishlist-notice a,
.woocommerce-message a {
    color: var(--gold-dark) !important;
    text-decoration: underline;
}

@keyframes jewelxyToastIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes jewelxyToastOut {
    to { transform: translateX(20px); opacity: 0; visibility: hidden; }
}
/* =========================================================
   FORCED HEADER on product pages
   Sits at very top, full-width, hides the empty site-header
   ========================================================= */

.jewelxy-forced-header {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 100;
}

.jewelxy-forced-header > .site-header,
.jewelxy-forced-header header {
    display: block !important;
    width: 100%;
    visibility: visible !important;
}

/* Hide the empty original site-header */
body.single-product > #page > .site-header:empty,
body.single-product > .site > .site-header:empty {
    display: none !important;
}

/* Also hide the buried compact header now that we have the real one */
body.single-product .jewelxy-product-main > .product-header-compact,
body.single-product .jewelxy-product-layout .product-header-compact {
    display: none !important;
}
/* Hide the empty original site-header, show our fallback */
body.single-product #site-header:empty {
    display: none !important;
}
/* =========================================================
   ENQUIRY MODAL — full overlay with centered dialog
   ========================================================= */

.jewelxy-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.jewelxy-modal.is-open {
    display: flex;
    animation: jewelxyModalFadeIn .2s ease-out;
}

@keyframes jewelxyModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Dark overlay behind dialog */
.jewelxy-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    cursor: pointer;
}

/* The dialog box */
.jewelxy-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: jewelxyDialogSlideIn .25s ease-out;
}

@keyframes jewelxyDialogSlideIn {
    from { transform: translateY(20px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Close button (top right) */
.jewelxy-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-mute);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    z-index: 2;
}

.jewelxy-modal__close:hover {
    background: #f5f5f5;
    color: var(--text);
}

/* Header */
.jewelxy-modal__header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.jewelxy-modal__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.jewelxy-modal__subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
}

/* Body (scrollable if content overflows) */
.jewelxy-modal__body {
    padding: 20px 28px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Style the enquiry form inside the modal */
.jewelxy-modal__body form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.jewelxy-modal__body label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.jewelxy-modal__body input[type="text"],
.jewelxy-modal__body input[type="email"],
.jewelxy-modal__body input[type="tel"],
.jewelxy-modal__body textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
}

.jewelxy-modal__body input:focus,
.jewelxy-modal__body textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.15);
}

.jewelxy-modal__body textarea {
    min-height: 110px;
    resize: vertical;
}

/* Submit button */
.jewelxy-modal__body button[type="submit"],
.jewelxy-modal__body input[type="submit"],
.jewelxy-modal__body .dokan-btn,
.jewelxy-modal__body .dokan-btn-theme {
    background: var(--gold) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 28px !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease;
    align-self: flex-start;
}

.jewelxy-modal__body button[type="submit"]:hover,
.jewelxy-modal__body .dokan-btn:hover {
    background: var(--gold-dark) !important;
}

/* Hide Motta's default h3 inside the enquiry form (we have our own title) */
.jewelxy-modal__body > h3:first-child {
    display: none;
}

/* Bootstrap-style rows that the Dokan enquiry form uses */
.jewelxy-modal__body .row {
    margin: 0;
}
.jewelxy-modal__body .row .col-md-10,
.jewelxy-modal__body .row [class*="col-"] {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Responsive — small screens get nearly full-width modal */
@media (max-width: 600px) {
    .jewelxy-modal {
        padding: 12px;
    }
    .jewelxy-modal__dialog {
        max-height: 95vh;
    }
    .jewelxy-modal__header {
        padding: 18px 20px 12px;
    }
    .jewelxy-modal__body {
        padding: 16px 20px 20px;
    }
}
/* =========================================================
   PRODUCT SPECS — inline attribute table in summary
   ========================================================= */

.jewelxy-product-specs {
    margin: 16px 0;
    padding: 16px 0;
}

.jewelxy-product-specs__title {
    display: none;
}

/* Two-column grid: label | value */
.jewelxy-product-specs__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 24px;
}

.jewelxy-product-specs__row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 4px 0;
}

.jewelxy-product-specs__label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mute);
}

.jewelxy-product-specs__value {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

/* On narrow main column, stack into 2 columns */
@media (min-width: 768px) {
    .jewelxy-product-specs__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On very narrow screens, single column */
@media (max-width: 480px) {
    .jewelxy-product-specs__list {
        grid-template-columns: 1fr;
    }
    .jewelxy-product-specs__row {
        grid-template-columns: 110px 1fr;
    }
}
/* Tighten the gap between price/stock and product specs */
.jewelxy-product-main .summary .motta-price-stock {
    margin-bottom: 0 !important;
}

.jewelxy-product-main .summary .jewelxy-product-specs {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.jewelxy-product-specs__row:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* =========================================================
   INLINE STOCK STATUS — next to rating in product meta row
   ========================================================= */

/* Push stock to the right side of the row */
.jewelxy-product-main .product-meta-wrapper {
    flex-wrap: wrap;
}

.jewelxy-product-main .product-meta-wrapper .jewelxy-inline-stock {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(46, 157, 110, 0.1);
    color: #2e9d6e;
}

.jewelxy-product-main .product-meta-wrapper .jewelxy-inline-stock.out-of-stock {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

/* Strip any of Motta's default stock badge styles */
.jewelxy-product-main .jewelxy-inline-stock {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Tighten the price-stock area being hidden — no gap above specs */
.jewelxy-product-main .summary .motta-price-stock {
    display: none !important;
}
/* Remove the duplicate divider — let product-specs draw the only line */
.jewelxy-product-main .product-meta-wrapper {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* And tighten the spacing above product-specs since it's now the only divider */
.jewelxy-product-main .summary .jewelxy-product-specs {
    margin-top: 16px !important;
}

/* =========================================================
   SKU — push onto its own line below the category
   ========================================================= */
.jewelxy-product-main .product-meta-wrapper .meta-sku {
    flex: 0 0 100%;
}

.jewelxy-product-actions .jewelxy-share-trigger {
    margin: 0 !important;
    padding: 4px 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.jewelxy-share-wrapper {
    position: relative;
}

.jewelxy-share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 220px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
}
.jewelxy-share-wrapper.is-open .jewelxy-share-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 10px;
}

.jewelxy-share-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 56px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.jewelxy-share-icon__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-mute);
    font-size: 15px;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.jewelxy-share-icon__circle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}
.jewelxy-share-icon:hover .jewelxy-share-icon__circle,
.jewelxy-share-icon:focus .jewelxy-share-icon__circle {
    background: var(--gold-soft);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.jewelxy-share-icon__label {
    font-size: 11px;
    color: var(--text-mute);
    text-align: center;
    line-height: 1.2;
}
.jewelxy-share-icon:hover .jewelxy-share-icon__label {
    color: var(--gold-dark);
}