/* =========================================================
   GRID LAYOUT
   ========================================================= */
.stock-manager-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .stock-manager-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .stock-manager-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 580px) {
    .stock-manager-container {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CARD BASE
   ========================================================= */
:root {
    --card-closed-h: 480px;
}
@media (max-width: 1200px) {
    :root {
        --card-closed-h: 520px;
    }
}
@media (max-width: 900px) {
    :root {
        --card-closed-h: 600px;
    }
}
@media (max-width: 580px) {
    :root {
        --card-closed-h: auto;
    }
}

.stock-manager-container > form.stock-manager-form {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: var(--card-closed-h);
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    position: relative;
    transition:
        border-color 0.2s ease,
        border-width 0.2s ease;
}
.stock-manager-container > form.stock-manager-form.is-online {
    border: 2px solid #0fcc74;
}
@media (max-width: 580px) {
    .stock-manager-container > form.stock-manager-form {
        height: auto;
        overflow: visible;
    }
}
.stock-manager-container > form.stock-manager-form * {
    min-width: 0;
    max-width: 100%;
}

.stock-manager-form .stock-update-status {
    order: 98;
    margin-top: auto;
}
.stock-manager-form button[type="submit"] {
    order: 99;
    margin-top: 0.5rem;
    align-self: stretch;
}

/* =========================================================
   HEADER
   ========================================================= */
.stock-manager-header--stack {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.stock-product-info {
    min-height: 4.5rem;
}
@media (max-width: 580px) {
    .stock-product-info {
        min-height: 0;
    }
}
.stock-product-title {
    font-size: 1.05rem;
    margin: 0;
    color: #222;
    line-height: 1.3;
}
.stock-product-title a.stock-product-link {
    color: inherit;
    text-decoration: none;
}
.stock-product-title a.stock-product-link:hover {
    text-decoration: underline;
}
.stock-product-sku {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
}
.stock-product-media img,
.stock-product-thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    margin-bottom: -1rem;
}

/* =========================================================
   ACCORDION
   ========================================================= */
.sv-accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    position: relative; /* anchor for badges */
}
.sv-accordion__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
}
.sv-accordion__summary::-webkit-details-marker {
    display: none;
}
.sv-accordion__summary::after {
    content: "\25BE";
    font-size: 0.9rem;
    margin-left: auto;
    transition: transform 0.2s;
}
.sv-accordion[open] .sv-accordion__summary::after {
    transform: rotate(180deg);
}
.sv-accordion__title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sv-accordion__pill {
    flex: 0 0 auto;
    background: #efefef;
    border: 1px solid #e2e2e2;
    color: #333;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
}
.sv-accordion__help {
    padding: 0.4rem 0.75rem 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

/* =========================================================
   VARIATION BLOCKS
   ========================================================= */
.variation-block.variation-block--vertical {
    display: block;
    border-bottom: 1px solid #ccc;
    background: #fff;
    padding: 0.5rem 0.75rem;
}
.variation-block--vertical .variation-head {
    margin-bottom: 0.4rem;
}
.variation-block--vertical .variation-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    line-height: 1.3;
}
.variation-block--vertical .variation-subtitle {
    font-size: 0.8rem;
    color: #777;
    margin: 0.1rem 0 0;
}
.variation-block--vertical .variation-thumb-wrap img {
    width: 80px;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0.25rem 0;
}
@media (max-width: 600px) {
    .variation-block--vertical .variation-thumb-wrap img {
        width: 70px;
    }
}

/* -- Catalog variation: checkbox | thumb | text in one row -- */
.catalog-variation.variation-block--horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
}
.catalog-variation.variation-block--horizontal:last-child {
    border-bottom: none;
}
.catalog-variation__check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.catalog-variation .variation-thumb-wrap {
    flex: 0 0 48px;
    width: 48px;
    overflow: hidden;
}
.catalog-variation .variation-thumb-wrap img.variation-thumb {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.catalog-variation .variation-head {
    flex: 1 1 auto;
    min-width: 0;
}
.catalog-variation .variation-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}
.catalog-variation .variation-subtitle {
    font-size: 0.8rem;
    color: #777;
    margin-top: 0.1rem;
}

.availability-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}
.variation-block input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    transform: translateY(-1px);
    cursor: pointer;
}
.catalog-price {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}
.stock-field-group {
    display: block;
    margin-top: 0.75rem;
}
.stock-field-group label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
}
.stock-field-group input[type="text"],
.stock-field-group input[type="number"] {
    width: 160px;
    max-width: 100%;
    padding: 6px 8px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}
.stock-field-group .field-note {
    display: block;
    margin: 0.35rem 0 1rem;
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    font-weight: 300;
}

.available-variation-notice {
    margin-top:2rem;
}

/* Draft notice on single product page (visible to dealers/admins only) */
.ydcpm-draft-notice {
    background: #fef9e7;
    border: 1px solid #f0d78c;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #6b5a00;
    line-height: 1.5;
}
.ydcpm-draft-badge {
    display: inline-block;
    background: #e2c843;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* =========================================================
   FLEX EXPANSION BEHAVIOR
   ========================================================= */
.stock-manager-container:has(details.sv-accordion[open]) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
.stock-manager-container:has(details.sv-accordion[open])
    > form.stock-manager-form {
    flex: 0 0 calc((100% - 3 * 20px) / 4);
}
@media (max-width: 1200px) {
    .stock-manager-container:has(details.sv-accordion[open])
        > form.stock-manager-form {
        flex-basis: calc((100% - 2 * 20px) / 3);
    }
}
@media (max-width: 900px) {
    .stock-manager-container:has(details.sv-accordion[open])
        > form.stock-manager-form {
        flex-basis: calc((100% - 1 * 20px) / 2);
    }
}
@media (max-width: 580px) {
    .stock-manager-container:has(details.sv-accordion[open])
        > form.stock-manager-form {
        flex-basis: 100%;
    }
}
.stock-manager-container:has(details.sv-accordion[open])
    > form.stock-manager-form:has(details[open]) {
    height: auto;
    overflow: visible;
}
.stock-manager-container:has(details.sv-accordion[open])
    > form.stock-manager-form:not(:has(details[open])) {
    height: var(--card-closed-h);
    overflow: hidden;
}

/* =========================================================
   STATE BADGES (AFTER AJAX SAVE)
   ========================================================= */
.stock-manager-form.is-online::after,
.stock-manager-form.is-offline::after {
    content: none !important; /* disable top-right badge */
}

.stock-manager-form.is-online .sv-accordion::before {
    content: "Online";
    position: absolute;
    bottom: 100%;
    margin-bottom: 8px;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 999px;
    background: #0fcc74;
    color: #fff;
    border: 1px solid #0fcc74;
    pointer-events: none;
    z-index: 2;
}

/* =========================================================
   MISC: THUMBS, PRICE MARKUP, AVAILABLE VARIATIONS
   ========================================================= */
.discontinued-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}
.dealer-price-old {
    text-decoration: line-through;
    color: #777;
    margin-right: 4px;
}
.dealer-price-new {
    font-weight: 600;
    color: #000;
}
.available-variation-list {
    display: grid;
    gap: 0.75rem;
    margin: 0.5rem 0 2rem;
}
.available-variation-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
}

/* ===== Stock label only ===== */
/* Archive / listing */
.custom-stock-label {
    position: absolute;
    z-index: 11;
    top: 0.15rem;
    left: 0.75rem;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    color: #fff;
    background: #d52b1e;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Single product */
.custom-stock-label-single {
    position: absolute;
    z-index: 11;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    background: #d52b1e;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* === Place the red label RIGHT NEXT to the cpwc badge (CSS-only) === */
.products .product:has(.cpwc-badge) .custom-stock-label,
.woocommerce-LoopProduct-link:has(.cpwc-badge) .custom-stock-label {
    --gap: 0.4rem;
    --cpwc-w: 4rem;
    transform: translateX(calc(var(--cpwc-w) + var(--gap)));
}
.products .product:has(.cpwc-badge--year) .custom-stock-label,
.woocommerce-LoopProduct-link:has(.cpwc-badge--year) .custom-stock-label {
    --cpwc-w: 3rem;
}
.products .product:has(.cpwc-badge--new) .custom-stock-label,
.woocommerce-LoopProduct-link:has(.cpwc-badge--new) .custom-stock-label {
    --cpwc-w: 4rem;
}

/* Single: shift by wider cpwc width */
.single-product .product:has(.cpwc-badge) .custom-stock-label-single {
    --gap: 0.8rem;
    --cpwc-w: 5rem;
    transform: translateX(calc(var(--cpwc-w) + var(--gap)));
}
.single-product .product:has(.cpwc-badge--year) .custom-stock-label-single {
    --cpwc-w: 4.5rem;
}
.single-product .product:has(.cpwc-badge--new) .custom-stock-label-single {
    --cpwc-w: 7rem;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
    .products .product .custom-stock-label {
        transform: translateX(4.2rem);
    }
    .single-product .custom-stock-label-single {
        transform: translateX(5rem);
    }
}

/* Archive / shop badge — same size as cpwc-badge ("Nieuw") */
/* Position is set to left:.75rem by default; JS offsets it past other badges at runtime */
.dealer-showroom-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-block;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 300;
    background-color: #0fcc74;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
    width: fit-content;
    z-index: 9;
}

/* Single product badge — green pill over image, next to other badges */
/* JS offsets it past cpwc-badge + yamaha-demo-badge at runtime */
.dealer-showroom-badge-single {
    position: absolute;
    z-index: 11;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    font-weight: 300;
    background: #0fcc74;
    color: #fff;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.catalog-showroom-list {
    display: grid;
    gap: 0.75rem;
    margin: 0.5rem 0 2rem;
}
.catalog-showroom-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
}
.catalog-showroom-thumb-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
}
.catalog-showroom-attrs {
    margin-bottom: 0.15rem;
    font-size: 0.9em;
    color: #666;
}
.catalog-showroom-price {
    font-weight: 600;
}


/* =========================================================
   SUMMARY CARD (before tabs)
   ========================================================= */
.ydcpm-summary-card {
    margin: 2rem 0 0;
    border-left: 4px solid #0fcc74;
    border-radius: 8px;
    background: #f8fdf9;
    padding: 0;
}
.ydcpm-summary-card--empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    border-left-color: #ccc;
    background: #fafafa;
    color: #888;
    font-size: 0.95rem;
}
.ydcpm-summary-card__details {
    border: none;
}
.ydcpm-summary-card__summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.ydcpm-summary-card__summary::-webkit-details-marker {
    display: none;
}
.ydcpm-summary-card__summary::after {
    content: "\25BE";
    font-size: 0.85rem;
    color: #999;
    margin-left: auto;
    transition: transform 0.2s;
}
.ydcpm-summary-card__details[open] .ydcpm-summary-card__summary::after {
    transform: rotate(180deg);
}
.ydcpm-summary-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0fcc74;
    flex-shrink: 0;
}
.ydcpm-summary-card__dot--grey {
    background: #ccc;
}
.ydcpm-summary-card__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ydcpm-summary-card__main strong {
    font-size: 1rem;
    color: #222;
}
.ydcpm-summary-card__sub {
    font-size: 0.8rem;
    color: #777;
    font-weight: 400;
}
.ydcpm-summary-card__body {
    padding: 0 1.25rem 1rem 2.2rem;
}
.ydcpm-summary-card__group {
    margin-bottom: 0.75rem;
}
.ydcpm-summary-card__group:last-child {
    margin-bottom: 0;
}
.ydcpm-summary-card__group-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}
.ydcpm-summary-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ydcpm-summary-card__list li {
    font-size: 0.9rem;
    color: #444;
    padding: 0.2rem 0;
}
.ydcpm-summary-card__link {
    color: #444;
    text-decoration: none;
    transition: color 0.15s;
}
.ydcpm-summary-card__link:hover {
    color: #1a73e8;
    text-decoration: underline;
}
.stock-manager-form:target {
    animation: ydcpm-highlight 1.5s ease;
}
@keyframes ydcpm-highlight {
    0%   { box-shadow: 0 0 0 3px rgba(72,199,142,0.6); }
    100% { box-shadow: none; }
}

/* === YDCPM Model Management Tabs === */

.gb-tabs-c4e1f331 {
  padding-top: 4rem;
}

.gb-tabs__menu-58527de9 {
  display: inline-flex;
}
@media (max-width: 767px) {
  .gb-tabs__menu-58527de9 {
    max-width: 100%;
    overflow-x: auto;
  }
}

.gb-tabs__menu-item-e559fd35 {
  background-color: var(--global-color-7);
  border-bottom-color: #ddd;
  color: var(--global-color-8);
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  padding: 1em;
}
.gb-tabs__menu-item-e559fd35:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {
  background-color: var(--global-color-1);
  color: var(--global-color-5);
}
.gb-tabs__menu-item-e559fd35:is(:hover, :focus) {
  background-color: var(--global-color-9);
}
@media (max-width: 767px) {
  .gb-tabs__menu-item-e559fd35 {
    flex-grow: 1;
    flex-shrink: 0;
  }
}

.gb-tabs__menu-item-38040e87, .gb-tabs__menu-item-e559fd35 {
  background-color: var(--global-color-9);
  border-bottom-color: #ddd;
  color: var(--global-color-8);
  font-weight: 900;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  padding: 1em;
}
.gb-tabs__menu-item-38040e87:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {
  background-color: var(--global-color-1);
  color: var(--global-color-5);
}
.gb-tabs__menu-item-38040e87:is(:hover, :focus) {
  background-color: var(--global-color-9);
}
@media (max-width: 767px) {
  .gb-tabs__menu-item-38040e87 {
    flex-grow: 1;
    flex-shrink: 0;
  }
}

.gb-tabs__items-c4c6eb81 {
  background-color: var(--global-color-5);
  border: 1px solid #ddd !important;
  border-radius: 0 8px 8px 8px !important;
}

.gb-tabs__item-945df9c2,
.gb-tabs__item-b81a7baa {
  padding: 1em;
}

/* =========================================================
   PER-CARD BUTTON -- secondary / outline style
   ========================================================= */
.stock-manager-form button[type="submit"] {
    background: transparent;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.stock-manager-form button[type="submit"]:hover {
    background: #f5f5f5;
    border-color: #999;
}
.stock-manager-form button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================
   GLOBAL SAVE-ALL STICKY BAR
   ========================================================= */
#ydcpm-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a1a2e;
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
#ydcpm-save-bar.is-visible {
    transform: translateY(0);
}
.ydcpm-save-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    gap: 1rem;
}
.ydcpm-save-bar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ydcpm-save-bar__count {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
.ydcpm-save-bar__toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ydcpm-save-bar__toggle:hover {
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}
.ydcpm-save-bar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ydcpm-save-bar__status {
    font-size: 0.85rem;
}
.ydcpm-save-bar__btn {
    background: #0fcc74;
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.ydcpm-save-bar__btn:hover {
    background: #0db864;
}
.ydcpm-save-bar__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Recap list */
.ydcpm-save-bar__list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 1.5rem 0.75rem;
    max-width: 1400px;
    margin: 0 auto;
}
.ydcpm-save-bar__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}
.ydcpm-save-bar__item:last-child {
    border-bottom: none;
}
.ydcpm-save-bar__item-x {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}
.ydcpm-save-bar__item-x:hover {
    color: #ff6b6b;
}
.ydcpm-save-bar__vars {
    color: rgba(255,255,255,0.55);
    font-weight: 400;
    font-size: 0.85em;
}

/* Success/error inside bar */
#ydcpm-save-bar .stock-success { color: #0fcc74; }
#ydcpm-save-bar .stock-error { color: #ff6b6b; }

@media (max-width: 580px) {
    .ydcpm-save-bar__inner {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .ydcpm-save-bar__left,
    .ydcpm-save-bar__right {
        width: 100%;
        justify-content: space-between;
    }
}