/* ── Notica Bought Together — B&W theme-aligned ─────────────── */

.nbt-widget {
	--nbt-fg:           #111;
	--nbt-muted:        #666;
	--nbt-border:       #e2e2e2;
	--nbt-border-hover: #111;
	--nbt-btn-bg:       #000;
	--nbt-btn-fg:       #fff;
	--nbt-btn-hover:    #333;

	background:    #fff;
	border:        1px solid var(--nbt-border);
	padding:       22px 24px;
	margin:        36px 0 36px;
	font-size:     14px;
	color:         var(--nbt-fg);
	box-sizing:    border-box;
}

/* ── Title ──────────────────────────────────────────────────── */

.nbt-title {
	text-align:     center;
	font-size:      13px !important;
	font-weight:    700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin:         0 0 16px !important;
	padding:        0 !important;
	border:         0 !important;
	color:          var(--nbt-fg) !important;
}

/* ── Product rows ───────────────────────────────────────────── */

.nbt-products {
	border-top: 1px solid var(--nbt-border);
}

.nbt-product-row {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       13px 0;
	border-bottom: 1px solid var(--nbt-border);
}

/* Thumbnail */

.nbt-thumb {
	flex-shrink: 0;
}

.nbt-thumb-img,
.nbt-thumb img {
	display:       block;
	width:         68px !important;
	height:        68px !important;
	object-fit:    cover;
	border-radius: 0;
}

/* Info */

.nbt-info {
	flex:      1;
	min-width: 0;
}

.nbt-name {
	font-size:     13px;
	font-weight:   600;
	color:         var(--nbt-fg);
	line-height:   1.35;
	margin-bottom: 5px;
}

/* ── Variation / IVPA select ────────────────────────────────── */

.nbt-attr {
	margin-top: 6px;
}

.nbt-select,
.nbt-ivpa-select {
	appearance:         none;
	-webkit-appearance: none;
	display:            block;
	width:              220px;
	max-width:          100%;
	height:             36px;
	padding:            0 32px 0 12px;
	border:             1px solid var(--nbt-border);
	border-radius:      0;
	font-size:          12px;
	font-family:        inherit;
	color:              var(--nbt-fg);
	background:         #fff
	                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E")
	                    no-repeat right 12px center;
	cursor:             pointer;
	box-shadow:         none;
	text-transform:     uppercase;
	letter-spacing:     .04em;
	box-sizing:         border-box;
}

.nbt-select:focus,
.nbt-ivpa-select:focus {
	outline:      none;
	border-color: var(--nbt-border-hover);
}

/* ── IVPA pill selectors ────────────────────────────────────── */

.nbt-pills {
	display:    flex;
	flex-wrap:  wrap;
	gap:        5px;
	margin-top: 4px;
}

.nbt-pill {
	cursor:      pointer;
	user-select: none;
	transition:  background .15s linear, color .15s linear, border-color .15s linear;
}

.nbt-pill--text {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       30px;
	height:          26px;
	padding:         0 8px;
	border:          1px solid var(--nbt-border);
	border-radius:   0;
	font-size:       11px;
	font-weight:     600;
	letter-spacing:  .04em;
	color:           var(--nbt-fg);
	text-transform:  uppercase;
	line-height:     1;
	background:      #fff;
}

.nbt-pill--text:hover {
	border-color: var(--nbt-fg);
}

.nbt-pill--text.is-active {
	border-color: var(--nbt-fg);
	background:   var(--nbt-fg);
	color:        #fff;
}

.nbt-pill--color {
	display:       inline-block;
	width:         22px;
	height:        22px;
	border-radius: 50%;
	border:        2px solid #fff;
	box-shadow:    0 0 0 1px var(--nbt-border);
	flex-shrink:   0;
}

.nbt-pill--color:hover {
	box-shadow: 0 0 0 1px var(--nbt-fg);
}

.nbt-pill--color.is-active {
	box-shadow: 0 0 0 2px var(--nbt-fg);
}

/* ── Price ──────────────────────────────────────────────────── */

.nbt-price {
	flex-shrink:    0;
	min-width:      82px;
	text-align:     right;
	font-size:      14px;
	font-weight:    700;
	color:          var(--nbt-fg);
	display:        inline-flex;
	flex-wrap:      wrap;
	justify-content:flex-end;
	align-items:    baseline;
	gap:            6px;
	line-height:    1.3;
}

.nbt-price .woocommerce-Price-amount {
	font-size:   inherit;
	font-weight: inherit;
	color:       inherit;
}

.nbt-price del {
	color:        var(--nbt-muted);
	opacity:      .85;
	font-weight:  400;
	text-decoration: line-through;
}

.nbt-price ins {
	text-decoration: none;
	background:      transparent;
	color:           var(--nbt-fg);
}

/* ── Footer ─────────────────────────────────────────────────── */

.nbt-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             12px;
	padding-top:     16px;
}

.nbt-total-label {
	font-size: 14px;
	color:     var(--nbt-fg);
}

.nbt-total-price {
	font-size:   15px;
	font-weight: 700;
	color:       var(--nbt-fg);
	margin-left: 4px;
}

.nbt-total-price .woocommerce-Price-amount {
	font-size:   inherit;
	font-weight: inherit;
	color:       inherit;
}

/* ── Add-all button (matches theme single_add_to_cart_button) ── */

.nbt-add-all.button {
	flex:            1;
	min-width:       160px;
	max-width:       260px;
	min-height:      46px;
	padding:         10px 22px !important;
	background:      var(--nbt-btn-bg) !important;
	color:           var(--nbt-btn-fg) !important;
	border:          2px solid var(--nbt-btn-bg) !important;
	border-radius:   0 !important;
	font-size:       14px;
	font-weight:     600;
	letter-spacing:  .06em;
	text-transform:  uppercase;
	cursor:          pointer;
	transition:      background .2s, border-color .2s, color .2s;
	display:         inline-flex !important;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	text-decoration: none;
	box-shadow:      none !important;
	outline:         none;
}

.nbt-add-all.button:hover,
.nbt-add-all.button:focus {
	background:   var(--nbt-btn-hover) !important;
	border-color: var(--nbt-btn-hover) !important;
	color:        var(--nbt-btn-fg) !important;
}

.nbt-add-all.button:disabled {
	opacity: .5;
	cursor:  not-allowed;
}

/* Spinner inside button */

.nbt-spin {
	display:          inline-block;
	width:            14px;
	height:           14px;
	border:           2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius:    50%;
	animation:        nbt-spin .65s linear infinite;
	flex-shrink:      0;
}

@keyframes nbt-spin {
	to { transform: rotate(360deg); }
}

/* ── Notices ────────────────────────────────────────────────── */

.nbt-notice {
	margin-top:     10px;
	padding:        10px 14px;
	border-radius:  0;
	font-size:      13px;
	line-height:    1.4;
	background:     #fff;
	color:          var(--nbt-fg);
	border:         1px solid var(--nbt-border);
}

.nbt-notice.is-success {
	background: #fafafa;
	color:      var(--nbt-fg);
	border:     1px solid var(--nbt-fg);
}

.nbt-notice.is-error {
	background: #fff;
	color:      var(--nbt-fg);
	border:     1px solid var(--nbt-fg);
	font-weight: 600;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.nbt-widget {
		padding: 16px;
		margin:  24px 0 24px;
	}

	/* Row layout — compact flex with wrap:
	 *   ┌──────┬───────────────────┐
	 *   │      │ Product name      │
	 *   │Thumb │ Size dropdown     │
	 *   │      │ Color dropdown    │
	 *   ├──────┴───────────────────┤
	 *   │                    Price │
	 *   └──────────────────────────┘
	 */
	.nbt-product-row {
		flex-wrap:   wrap;
		align-items: flex-start;
		column-gap:  12px;
		row-gap:     4px;
		padding:     14px 0;
		gap:         0;
	}

	.nbt-thumb {
		order: 1;
		flex:  0 0 68px;
	}

	.nbt-info {
		order:          2;
		flex:           1 1 calc(100% - 80px);
		min-width:      0;
		display:        flex;
		flex-direction: column;
		gap:            6px;
		margin-left:    12px;
	}

	.nbt-info .nbt-name {
		font-size:   14px;
		font-weight: 600;
		line-height: 1.3;
		margin:      0;
	}

	.nbt-info .nbt-attr {
		margin: 0;
	}

	.nbt-select,
	.nbt-ivpa-select {
		width:     100%;
		max-width: 100%;
	}

	.nbt-price {
		order:           3;
		flex:            0 0 100%;
		text-align:      right;
		justify-content: flex-end;
		min-width:       0;
		font-size:       14px;
		margin-top:      6px;
	}

	.nbt-add-all.button {
		max-width: 100%;
		flex:      1 1 100%;
	}

	.nbt-footer {
		padding-top: 18px;
	}
}