/* Shared 1:1 card styles for editor preview and TV runtime */

/* TV runtime */
.section {
  background: var(--cs-card-bg, var(--panel));
  border-radius: var(--cs-card-radius, var(--radius));
  box-shadow: var(--cs-card-shadow, var(--shadow));
  overflow: hidden;
}

.section-header {
  padding: var(--cs-header-pad-v, 12px) var(--cs-card-pad-h, 14px);
  font-family: var(--cs-header-font, inherit);
  color: var(--cs-header-color, #fff);
  font-size: var(--cs-header-size, 20px);
  font-weight: var(--cs-header-weight, 800);
  text-align: var(--cs-header-align, left);
  text-transform: var(--cs-header-upper, uppercase);
  letter-spacing: var(--cs-header-spacing, 0.04em);
}

.section[data-hs="text_only"] .section-header,
.section[data-hs="text_underline"] .section-header,
.section[data-hs="text_line"] .section-header {
  background: transparent !important;
}

.section[data-hs="text_underline"] .section-header {
  border-bottom: 3px solid currentColor;
}

.section[data-hs="text_line"] .section-header {
  border-left: 4px solid currentColor;
  padding-left: 10px;
}

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cs-card-pad-h, 14px);
  padding: var(--cs-card-pad-v, 14px) var(--cs-card-pad-h, 18px);
  border-bottom: var(--cs-item-sep, 1px solid rgba(0,0,0,0.08));
}

.item:last-child { border-bottom: none; }

.name {
  margin: 0 0 6px;
  font-family: var(--cs-name-font, inherit);
  font-size: var(--cs-name-size, 26px);
  font-weight: var(--cs-name-weight, 800);
  color: var(--cs-name-color, #1d1b17);
  line-height: 1.08;
}

.meta {
  margin: 0;
  font-family: var(--cs-meta-font, inherit);
  color: var(--cs-meta-color, rgba(29,27,23,.72));
  font-size: var(--cs-meta-size, 15px);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  align-self: center;
  font-size: var(--cs-price-size, 28px);
  font-weight: var(--cs-price-weight, 900);
  color: var(--cs-price-color, #1d1b17);
  white-space: nowrap;
}

/* Editor preview mirrors TV runtime */
#layout-canvas .pv-section {
  background: var(--cs-card-bg, rgba(255,255,255,0.92));
  border-radius: var(--cs-card-radius, 22px);
  box-shadow: var(--cs-card-shadow, 0 4px 12px rgba(0,0,0,.15));
  overflow: hidden;
  flex-shrink: 0;
}

#layout-canvas .pv-section[data-hs="text_only"] .pv-header,
#layout-canvas .pv-section[data-hs="text_underline"] .pv-header,
#layout-canvas .pv-section[data-hs="text_line"] .pv-header {
  background: transparent !important;
}

#layout-canvas .pv-section[data-hs="text_underline"] .pv-header {
  border-bottom: 3px solid currentColor;
}

#layout-canvas .pv-section[data-hs="text_line"] .pv-header {
  border-left: 4px solid currentColor;
  padding-left: 10px;
}

#layout-canvas .pv-header {
  padding: var(--cs-header-pad-v, 12px) var(--cs-card-pad-h, 14px);
  font-family: var(--cs-header-font, inherit);
  font-size: var(--cs-header-size, 20px);
  font-weight: var(--cs-header-weight, 800);
  text-align: var(--cs-header-align, left);
  text-transform: var(--cs-header-upper, uppercase);
  letter-spacing: var(--cs-header-spacing, 0.04em);
}

#layout-canvas .pv-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cs-card-pad-h, 14px);
  padding: var(--cs-card-pad-v, 14px) var(--cs-card-pad-h, 18px);
  border-bottom: var(--cs-item-sep, 1px solid rgba(0,0,0,0.08));
}

#layout-canvas .pv-item:last-child { border-bottom: none; }

#layout-canvas .pv-name {
  margin: 0 0 6px;
  font-family: var(--cs-name-font, inherit);
  font-size: var(--cs-name-size, 26px);
  font-weight: var(--cs-name-weight, 800);
  color: var(--cs-name-color, #1d1b17);
  line-height: 1.08;
}

#layout-canvas .pv-meta {
  margin: 0;
  font-family: var(--cs-meta-font, inherit);
  font-size: var(--cs-meta-size, 15px);
  color: var(--cs-meta-color, rgba(29,27,23,.72));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#layout-canvas .pv-price {
  font-size: var(--cs-price-size, 28px);
  font-weight: var(--cs-price-weight, 900);
  color: var(--cs-price-color, #1d1b17);
  white-space: nowrap;
  align-self: center;
}
/* Shared card typography/layout for TV and template preview */

/* TV runtime cards */
.section {
  background: var(--cs-card-bg, var(--panel));
  border-radius: var(--cs-card-radius, var(--radius));
  box-shadow: var(--cs-card-shadow, var(--shadow));
  overflow: hidden;
}

.section-header {
  padding: var(--cs-header-pad-v, 12px) var(--cs-card-pad-h, 14px);
  font-family: var(--cs-header-font, inherit);
  color: var(--cs-header-color, #fff);
  font-size: var(--cs-header-size, 20px);
  font-weight: var(--cs-header-weight, 800);
  text-align: var(--cs-header-align, left);
  text-transform: var(--cs-header-upper, uppercase);
  letter-spacing: var(--cs-header-spacing, 0.04em);
}

.canvas[data-header-equal-item="1"] .section-header {
  height: var(--cs-equal-header-h, auto);
  min-height: var(--cs-equal-header-h, auto);
  max-height: var(--cs-equal-header-h, none);
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  box-sizing: border-box;
}

.section[data-hs="text_only"] .section-header,
.section[data-hs="text_underline"] .section-header,
.section[data-hs="text_line"] .section-header {
  background: transparent !important;
}

.section[data-hs="text_underline"] .section-header {
  border-bottom: 3px solid currentColor;
}

.section[data-hs="text_line"] .section-header {
  border-left: 4px solid currentColor;
  padding-left: 10px;
}

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cs-card-pad-h, 14px);
  padding: var(--cs-card-pad-v, 14px) var(--cs-card-pad-h, 18px);
  border-bottom: var(--cs-item-sep, 1px solid rgba(0,0,0,0.08));
}

.item:last-child { border-bottom: none; }

.name {
  margin: 0 0 6px;
  font-family: var(--cs-name-font,inherit);
  font-size: var(--cs-name-size,26px);
  font-weight: var(--cs-name-weight,800);
  color: var(--cs-name-color,#1d1b17);
  line-height: 1.08;
}

.meta {
  margin: 0;
  font-family: var(--cs-meta-font,inherit);
  color: var(--cs-meta-color,rgba(29,27,23,.72));
  font-size: var(--cs-meta-size,15px);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  align-self: center;
  font-size: var(--cs-price-size,28px);
  font-weight: var(--cs-price-weight,900);
  color: var(--cs-price-color,#1d1b17);
  white-space: nowrap;
}

/* Editor preview cards */
#layout-canvas .pv-section {
  background: var(--cs-card-bg, rgba(255,255,255,0.92));
  border-radius: var(--cs-card-radius, 22px);
  box-shadow: var(--cs-card-shadow, 0 4px 12px rgba(0,0,0,.15));
  overflow: hidden;
  flex-shrink: 0;
  width: calc(100% - (var(--cs-col-pad-h, 0px) * 2));
  margin-left: var(--cs-col-pad-h, 0px);
  margin-right: var(--cs-col-pad-h, 0px);
}

#layout-canvas .pv-section[data-hs="text_only"] .pv-header,
#layout-canvas .pv-section[data-hs="text_underline"] .pv-header,
#layout-canvas .pv-section[data-hs="text_line"] .pv-header {
  background: transparent !important;
}

#layout-canvas .pv-section[data-hs="text_underline"] .pv-header {
  border-bottom: 3px solid currentColor;
}

#layout-canvas .pv-section[data-hs="text_line"] .pv-header {
  border-left: 4px solid currentColor;
  padding-left: 10px;
}

#layout-canvas .pv-header {
  padding: var(--cs-header-pad-v, 12px) var(--cs-card-pad-h, 14px);
  font-family: var(--cs-header-font, inherit);
  font-size: var(--cs-header-size, 20px);
  font-weight: var(--cs-header-weight, 800);
  text-align: var(--cs-header-align, left);
  text-transform: var(--cs-header-upper, uppercase);
  letter-spacing: var(--cs-header-spacing, 0.04em);
}

#layout-canvas[data-header-equal-item="1"] .pv-header {
  height: var(--cs-equal-header-h, auto);
  min-height: var(--cs-equal-header-h, auto);
  max-height: var(--cs-equal-header-h, none);
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  box-sizing: border-box;
}

#layout-canvas .pv-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cs-card-pad-h, 14px);
  padding: var(--cs-card-pad-v, 14px) var(--cs-card-pad-h, 18px);
  border-bottom: var(--cs-item-sep, 1px solid rgba(0,0,0,0.08));
}

#layout-canvas .pv-item:last-child { border-bottom: none; }

#layout-canvas .pv-name {
  margin: 0 0 6px;
  font-family: var(--cs-name-font, inherit);
  font-size: var(--cs-name-size, 26px);
  font-weight: var(--cs-name-weight, 800);
  color: var(--cs-name-color, #1d1b17);
  line-height: 1.08;
}

#layout-canvas .pv-meta {
  margin: 0;
  font-family: var(--cs-meta-font, inherit);
  font-size: var(--cs-meta-size, 15px);
  color: var(--cs-meta-color, rgba(29,27,23,.72));
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#layout-canvas .pv-price {
  font-size: var(--cs-price-size, 28px);
  font-weight: var(--cs-price-weight, 900);
  color: var(--cs-price-color, #1d1b17);
  white-space: nowrap;
  align-self: center;
}