/**
 * SDH Handwerkerclub Styles
 *
 * Nutzt bestehende SDH CSS-Variablen und Widget-Container Standard.
 *
 * @package SDH_Core
 */

/* ==========================================================================
   Widget Container (Standard)
   ========================================================================== */
.sdh-club-widget {
	background: #fff;
	border: 1px solid var(--sdh-gray-200);
	border-radius: var(--sdh-radius-lg);
	overflow: hidden;
}

.sdh-club-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--sdh-gray-200);
}

.sdh-club-header h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
}

.sdh-club-header-sub {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
}

.sdh-club-content {
	padding: 20px 24px;
}

/* ==========================================================================
   Sections (mit Trenner)
   ========================================================================== */
.sdh-club-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sdh-gray-200);
}

.sdh-club-section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.sdh-club-section h4 {
	margin: 0 0 12px 0;
	font-size: 1rem;
	font-weight: 600;
}

/* Canceling / Payment Notices */
.sdh-club-canceling-notice,
.sdh-club-payment-notice {
	background: #fffbeb;
	border-top: none !important;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	padding: 16px 20px !important;
	margin-top: 0 !important;
}

.sdh-club-canceling-notice p,
.sdh-club-payment-notice p {
	margin: 0 0 4px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sdh-gray-600, #6c6d74);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.sdh-club-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--sdh-radius);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	line-height: 1.4;
}

.sdh-club-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sdh-club-btn-primary {
	background: var(--sdh-accent);
	color: #fff;
	border-color: var(--sdh-accent);
}

.sdh-club-btn-primary:hover:not(:disabled) {
	background: var(--sdh-accent-hover);
	border-color: var(--sdh-accent-hover);
	color: #fff;
}

.sdh-club-btn-secondary {
	background: var(--sdh-gray-100);
	color: var(--sdh-gray-800);
	border-color: var(--sdh-gray-300);
}

.sdh-club-btn-secondary:hover:not(:disabled) {
	background: var(--sdh-gray-200);
}

.sdh-club-btn-danger {
	background: var(--sdh-error);
	color: #fff;
	border-color: var(--sdh-error);
}

.sdh-club-btn-danger:hover:not(:disabled) {
	opacity: 0.9;
}

.sdh-club-btn-danger-outline {
	background: transparent;
	color: var(--sdh-error);
	border-color: var(--sdh-error);
}

.sdh-club-btn-danger-outline:hover:not(:disabled) {
	background: var(--sdh-error);
	color: #fff;
}

.sdh-club-btn-lg {
	padding: 14px 28px;
	font-size: 1rem;
	width: 100%;
}

.sdh-club-btn-sm {
	padding: 6px 12px;
	font-size: 0.8rem;
}

/* ==========================================================================
   Tags / Badges
   ========================================================================== */
.sdh-club-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.sdh-club-tag-success {
	background: #d4edda;
	color: #155724;
}

.sdh-club-tag-warning {
	background: #fff3cd;
	color: #856404;
}

.sdh-club-tag-danger {
	background: #f8d7da;
	color: #721c24;
}

.sdh-club-tag-info {
	background: #d1ecf1;
	color: #0c5460;
}

/* ==========================================================================
   Promotion Locked
   ========================================================================== */
.sdh-club-locked {
	text-align: center;
	padding: 20px 0;
}

.sdh-club-locked-icon {
	font-size: 2.5rem;
	margin-bottom: 12px;
}

.sdh-club-locked h4 {
	margin: 0 0 8px 0;
}

.sdh-club-locked p {
	color: var(--sdh-gray-600);
	margin-bottom: 16px;
}

.sdh-club-benefits-preview {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	text-align: left;
}

.sdh-club-benefits-preview li {
	padding: 6px 0;
	color: var(--sdh-gray-800);
}

.sdh-club-benefits-preview li::before {
	content: "✓ ";
	color: var(--sdh-success);
	font-weight: 700;
}

/* ==========================================================================
   Benefits List (Checkout)
   ========================================================================== */
.sdh-club-benefits-list {
	margin-bottom: 20px;
}

.sdh-club-benefits-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sdh-club-benefits-list li {
	padding: 8px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sdh-club-check {
	color: var(--sdh-success);
	font-weight: 700;
	flex-shrink: 0;
}

/* ==========================================================================
   Plan Toggle
   ========================================================================== */
.sdh-club-plan-toggle,
.sdh-club-interval-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.sdh-club-plan-btn,
.sdh-club-interval-btn {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid var(--sdh-gray-300);
	border-radius: var(--sdh-radius);
	background: #fff;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.2s ease;
	text-align: center;
}

.sdh-club-plan-btn.active,
.sdh-club-interval-btn.active {
	border-color: var(--sdh-accent);
	background: #fff5f5;
	color: var(--sdh-accent);
}

.sdh-club-plan-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sdh-club-innung-hint {
	font-size: 0.8rem;
	color: var(--sdh-gray-600);
	margin-top: 4px;
}

.sdh-club-innung-hint a {
	color: var(--sdh-accent);
}

.sdh-club-badge-recommended {
	display: inline-block;
	background: var(--sdh-success);
	color: #fff;
	font-size: 0.65rem;
	padding: 2px 6px;
	border-radius: 8px;
	margin-left: 4px;
	vertical-align: middle;
}

.sdh-club-badge-surcharge {
	display: inline-block;
	background: var(--sdh-gray-200);
	color: var(--sdh-gray-600);
	font-size: 0.65rem;
	padding: 2px 6px;
	border-radius: 8px;
	margin-left: 4px;
	vertical-align: middle;
}

/* ==========================================================================
   Price Display
   ========================================================================== */
.sdh-club-price-display {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sdh-gray-200);
	text-align: center;
}

.sdh-club-price-main {
	margin-bottom: 4px;
}

.sdh-club-price-amount {
	font-size: 2rem;
	font-weight: 700;
	color: var(--sdh-gray-800);
}

.sdh-club-price-interval {
	font-size: 1rem;
	color: var(--sdh-gray-600);
}

.sdh-club-price-monthly {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
	margin-bottom: 8px;
}

.sdh-club-price-tax {
	font-size: 0.75rem;
	color: var(--sdh-gray-500);
	margin-bottom: 8px;
}

.sdh-club-setup-fee {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
	margin-bottom: 4px;
}

.sdh-club-contract-duration {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
	margin-bottom: 20px;
}

/* ==========================================================================
   Terms Checkbox
   ========================================================================== */
.sdh-club-terms {
	margin-bottom: 16px;
}

.sdh-club-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--sdh-gray-800);
	cursor: pointer;
}

.sdh-club-checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.sdh-club-checkbox-label a {
	color: var(--sdh-accent);
}

/* ==========================================================================
   Error / Message
   ========================================================================== */
.sdh-club-error {
	margin-top: 12px;
	padding: 10px 14px;
	background: #f8d7da;
	color: #721c24;
	border-radius: var(--sdh-radius);
	font-size: 0.85rem;
}

.sdh-club-message {
	margin-top: 12px;
	padding: 10px 14px;
	background: #d4edda;
	color: #155724;
	border-radius: var(--sdh-radius);
	font-size: 0.85rem;
}

/* ==========================================================================
   Welcome
   ========================================================================== */
.sdh-club-welcome {
	text-align: center;
	padding: 20px 0;
}

.sdh-club-welcome-icon {
	font-size: 3rem;
	margin-bottom: 12px;
}

.sdh-club-welcome-text {
	font-size: 1rem;
	color: var(--sdh-gray-800);
	margin-bottom: 20px;
}

.sdh-club-welcome-details {
	margin-bottom: 20px;
	text-align: left;
}

.sdh-club-cooling-notice {
	background: var(--sdh-gray-100);
	border-radius: var(--sdh-radius);
	padding: 16px;
	margin-bottom: 20px;
	text-align: left;
}

.sdh-club-cooling-notice strong {
	display: block;
	margin-bottom: 4px;
}

.sdh-club-cooling-notice p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
}

/* ==========================================================================
   Detail Grid (Dashboard)
   ========================================================================== */
.sdh-club-detail-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sdh-club-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
}

.sdh-club-detail-label {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
}

.sdh-club-detail-value {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--sdh-gray-800);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ==========================================================================
   Quick Actions
   ========================================================================== */
.sdh-club-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ==========================================================================
   Voucher Selection
   ========================================================================== */
.sdh-club-voucher-intro {
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
	margin-bottom: 12px;
}

.sdh-club-voucher-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.sdh-club-voucher-card {
	border: 2px solid var(--sdh-gray-200);
	border-radius: var(--sdh-radius);
	padding: 16px;
	text-align: center;
	transition: border-color 0.2s ease;
	cursor: pointer;
}

.sdh-club-voucher-card:hover {
	border-color: var(--sdh-accent);
}

.sdh-club-voucher-card.selected {
	border-color: var(--sdh-accent);
	background: #fff5f5;
}

.sdh-club-voucher-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sdh-accent);
	margin-bottom: 8px;
}

.sdh-club-voucher-card h5 {
	margin: 0 0 6px 0;
	font-size: 0.95rem;
}

.sdh-club-voucher-card p {
	font-size: 0.8rem;
	color: var(--sdh-gray-600);
	margin: 0 0 12px 0;
}

.sdh-club-voucher-chosen {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: #d4edda;
	border-radius: var(--sdh-radius);
	font-weight: 500;
}

/* ==========================================================================
   Inclusive Benefits
   ========================================================================== */
.sdh-club-inclusive-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sdh-club-inclusive-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--sdh-gray-100);
	border-radius: var(--sdh-radius);
}

.sdh-club-inclusive-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.sdh-club-inclusive-title {
	flex: 1;
	font-size: 0.9rem;
	font-weight: 500;
}

/* ==========================================================================
   Benefits Grid (Vorteilswelt)
   ========================================================================== */
.sdh-club-benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.sdh-club-benefit-card {
	background-color: var(--e-global-color-d87ead2, #f9fafb);
	border: 1px solid var(--sdh-gray-200);
	border-radius: var(--sdh-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.sdh-club-benefit-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sdh-club-benefit-image {
	padding: 16px;
}

.sdh-club-benefit-image img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: var(--sdh-radius);
}

.sdh-club-benefit-body {
	padding: 12px;
}

.sdh-club-benefit-title {
	margin: 0 0 6px 0;
	font-size: 0.9rem;
}

.sdh-club-benefit-excerpt {
	font-size: 0.8rem;
	color: var(--sdh-gray-600);
	margin: 0 0 10px 0;
	line-height: 1.3rem;
}

.sdh-club-empty {
	color: var(--sdh-gray-500);
	font-size: 0.85rem;
	text-align: center;
	padding: 20px;
}

/* ==========================================================================
   Vorteilswelt: Breadcrumb
   ========================================================================== */
.sdh-club-breadcrumb {
	padding: 12px 24px;
	font-size: 0.85rem;
	color: var(--sdh-gray-500);
	border-bottom: 1px solid var(--sdh-gray-200);
}

.sdh-club-breadcrumb-link {
	color: var(--sdh-accent, #2563eb);
	cursor: pointer;
	transition: color 0.15s ease;
}

.sdh-club-breadcrumb-link:hover {
	color: var(--sdh-accent-hover, #1d4ed8);
	text-decoration: underline;
}

.sdh-club-breadcrumb-active {
	color: var(--sdh-gray-700);
	font-weight: 500;
}

.sdh-club-breadcrumb-sep {
	margin: 0 6px;
	color: var(--sdh-gray-400);
}

/* ==========================================================================
   Vorteilswelt: Sektionen
   ========================================================================== */
.sdh-club-vw-section {
	margin-top: 20px;
	padding-top: 20px;
}

.sdh-club-vw-section:first-child {
	margin-top: 0;
	padding-top: 0;
}

.sdh-club-vw-section + .sdh-club-vw-section {
	border-top: 1px solid var(--sdh-gray-200);
}

.sdh-club-vw-section h4 {
	margin: 0 0 16px 0;
	font-size: 1rem;
	font-weight: 600;
}

/* ==========================================================================
   Vorteilswelt: Kategorie-Grid
   ========================================================================== */
.sdh-club-category-grid {
	display: grid;
	gap: 16px;
}

.sdh-club-category-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sdh-gray-200);
	border-radius: 7px;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	text-align: left;
}

.sdh-club-category-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-color: var(--sdh-accent, #2563eb);
}

/* Obere Zeile: Icon + Count-Badge */
.sdh-club-category-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 16px;
}

.sdh-club-category-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 12px 6px 12px;
	background: var(--sdh-accent, #2563eb);
	border-radius: 7px;
	color: #fff;
	font-size: 24px;
	line-height: 1;
}

.sdh-club-category-icon-wrap i {
	font-size: 24px;
	color: #fff;
}

.sdh-club-category-count {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--sdh-gray-200);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sdh-gray-600);
	line-height: 14px;
	align-self: center;
}

/* Titel */
.sdh-club-category-name {
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--sdh-gray-800);
	margin: 0 0 8px 0;
}

/* Beschreibung */
.sdh-club-category-desc {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--sdh-gray-500);
	margin: 0;
}

/* ==========================================================================
   Vorteilswelt: Benefit-Card Erweiterungen
   ========================================================================== */
.sdh-club-benefit-card {
	cursor: pointer;
}

.sdh-club-benefit-image {
	position: relative;
}

.sdh-club-benefit-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--sdh-accent, #2563eb);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--sdh-radius);
}

.sdh-club-benefit-partner {
	margin-bottom: 8px;
}

.sdh-club-benefit-partner-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: var(--sdh-radius);
}

/* ==========================================================================
   Vorteilswelt: Benefit-Detail (Inline-Ansicht)
   ========================================================================== */
.sdh-club-benefit-detail {
	padding: 0;
}

.sdh-club-benefit-detail-banner img {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: var(--sdh-radius);
}

.sdh-club-benefit-detail-content {
	padding: 20px 0;
}

.sdh-club-benefit-detail-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.sdh-club-benefit-detail-partner-logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--sdh-radius);
	border: 1px solid var(--sdh-gray-200);
}

.sdh-club-benefit-detail-title {
	margin: 0;
	font-size: 1.1rem;
}

.sdh-club-benefit-detail-partner-name {
	font-size: 0.85rem;
	color: var(--sdh-gray-500);
}

.sdh-club-benefit-detail-rabatt {
	margin-bottom: 16px;
}

.sdh-club-benefit-detail-text {
	margin-bottom: 20px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sdh-gray-700);
}

.sdh-club-benefit-detail-text p:last-child {
	margin-bottom: 0;
}

.sdh-club-benefit-detail-locked {
	background: var(--sdh-gray-100);
	border-radius: var(--sdh-radius);
	padding: 16px;
	margin-bottom: 20px;
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
}

.sdh-club-benefit-detail-locked p {
	margin: 0;
}

/* Code-Box */
.sdh-club-benefit-detail-action {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sdh-gray-200);
}

.sdh-club-benefit-code-box {
	margin-bottom: 16px;
}

.sdh-club-benefit-code-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--sdh-gray-500);
	margin-bottom: 8px;
}

.sdh-club-benefit-code-value {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sdh-club-benefit-code-value code {
	flex: 1;
	padding: 10px 16px;
	background: var(--sdh-gray-100);
	border: 1px dashed var(--sdh-gray-300);
	border-radius: var(--sdh-radius);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
}

/* Gueltigkeit */
.sdh-club-benefit-detail-validity {
	margin-top: 16px;
	font-size: 0.8rem;
	color: var(--sdh-gray-500);
}

/* Partner-Kontakt */
.sdh-club-benefit-detail-contact {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sdh-gray-200);
}

.sdh-club-benefit-detail-contact h5 {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	font-weight: 600;
}

.sdh-club-benefit-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 0.85rem;
}

.sdh-club-benefit-contact-row a {
	color: var(--sdh-accent, #2563eb);
	text-decoration: none;
}

.sdh-club-benefit-contact-row a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Modal
   ========================================================================== */
.sdh-club-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sdh-club-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.sdh-club-modal-content {
	position: relative;
	background: #fff;
	border-radius: var(--sdh-radius-lg);
	padding: 24px;
	max-width: 480px;
	width: 90%;
	z-index: 1;
}

.sdh-club-modal-content h4 {
	margin: 0 0 12px 0;
}

.sdh-club-cancel-reason {
	margin: 16px 0;
}

.sdh-club-cancel-reason label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 6px;
}

.sdh-club-cancel-reason select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--sdh-gray-300);
	border-radius: var(--sdh-radius);
	font-size: 0.9rem;
}

.sdh-club-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
}

/* ==========================================================================
   Cooling Info
   ========================================================================== */
.sdh-club-cooling-info {
	background: var(--sdh-gray-100);
	border-radius: var(--sdh-radius);
	padding: 16px;
}

.sdh-club-cooling-info p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sdh-gray-600);
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.sdh-club-btn.loading {
	position: relative;
	color: transparent;
}

.sdh-club-btn.loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sdh-club-spin 0.6s linear infinite;
}

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.sdh-club-header {
		padding: 16px;
	}

	.sdh-club-content {
		padding: 16px;
	}

	.sdh-club-plan-toggle,
	.sdh-club-interval-toggle {
		flex-direction: column;
	}

	.sdh-club-action-buttons {
		flex-direction: column;
	}

	.sdh-club-action-buttons .sdh-club-btn {
		width: 100%;
	}

	.sdh-club-voucher-grid {
		grid-template-columns: 1fr;
	}

	.sdh-club-benefits-grid {
		grid-template-columns: 1fr;
	}

	.sdh-club-category-grid {
		grid-template-columns: 1fr !important;
	}

	.sdh-club-benefit-detail-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.sdh-club-benefit-code-value {
		flex-direction: column;
	}

	.sdh-club-benefit-code-value code {
		width: 100%;
	}

	.sdh-club-breadcrumb {
		padding: 10px 16px;
	}

	.sdh-club-detail-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
}