/*
 * Bridge styles for legacy fabric card shortcode integration.
 * Provides light-weight styling for the fabric summary card rendered by
 * the [ssc_product_fabric] shortcode so it matches the design system
 * used inside the configurator.
 */

:root {
  --ssc-bridge-border: var(--ssc-border, #e5e7eb);
  --ssc-bridge-surface: var(--ssc-surface, #ffffff);
  --ssc-bridge-radius: var(--ssc-radius-xl, 18px);
  --ssc-bridge-shadow: var(--ssc-shadow, 0 10px 30px rgba(15, 23, 42, 0.08));
  --ssc-bridge-text: var(--ssc-gray-900, #1f2937);
  --ssc-bridge-muted: var(--ssc-gray-500, #6b7280);
  --ssc-bridge-accent: var(--ssc-primary, #0b5d3b);
}

.ssc-fabric-card {
  display: flex;
  gap: 0;
  border: 1px solid var(--ssc-bridge-border);
  border-radius: var(--ssc-bridge-radius);
  background: var(--ssc-bridge-surface);
  box-shadow: var(--ssc-bridge-shadow);
  overflow: hidden;
  color: var(--ssc-bridge-text);
  max-width: 720px;
  margin: 0 auto;
}

.ssc-fabric-card__media {
  position: relative;
  flex: 0 0 220px;
  background: var(--ssc-gray-100, #f3f4f6);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.ssc-fabric-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ssc-fabric-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  font-size: 0.875rem;
  color: var(--ssc-bridge-muted);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.ssc-fabric-card__body {
  flex: 1 1 auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ssc-fabric-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.ssc-fabric-card__name {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.ssc-fabric-card__name:hover,
.ssc-fabric-card__name:focus {
  color: var(--ssc-bridge-accent);
  border-bottom-color: currentColor;
  outline: none;
}

.ssc-fabric-card__code {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ssc-bridge-muted);
}

.ssc-fabric-card__attributes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.875rem;
  color: var(--ssc-bridge-muted);
}

.ssc-fabric-card__attribute::before {
  content: '\2022';
  margin-right: 8px;
  color: var(--ssc-bridge-accent);
}

.ssc-fabric-card__more[hidden] {
  display: none !important;
}

.ssc-fabric-card__cta {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ssc-bridge-border);
  background: transparent;
  color: var(--ssc-bridge-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}

.ssc-fabric-card__cta:hover,
.ssc-fabric-card__cta:focus {
  background: rgba(11, 93, 59, 0.08);
  border-color: var(--ssc-bridge-accent);
  outline: none;
}

.ssc-fabric-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.ssc-fabric-card__details {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--ssc-bridge-accent);
  background: var(--ssc-bridge-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
  box-shadow: 0 8px 20px rgba(11, 93, 59, 0.15);
}

.ssc-fabric-card__details:hover,
.ssc-fabric-card__details:focus {
  background: color-mix(in srgb, var(--ssc-bridge-accent) 90%, #ffffff 10%);
  border-color: var(--ssc-bridge-accent);
  outline: none;
  box-shadow: 0 10px 24px rgba(11, 93, 59, 0.18);
}

@media (max-width: 768px) {
  .ssc-fabric-card {
    flex-direction: column;
  }

  .ssc-fabric-card__media {
    width: 100%;
    min-height: 200px;
  }

  .ssc-fabric-card__body {
    padding: 20px;
  }
}

/* WooCommerce Sale Badge Fix */
.woocommerce span.onsale {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 10 !important;
  
  min-height: 50px !important;
  min-width: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  
  border-radius: 50% !important;
  background-color: #e63946 !important;
  color: #ffffff !important;
  
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce ul.products li.product .onsale {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}

.woocommerce .product .images .onsale {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}