/* Tile Widget — style.css
  Consumes inline CSS variables set via selectors and inline repeater styles.
*/

/* ============================================================
  1 — Container / Root
  Main widget container and top-level motion/transition settings.
  ============================================================ */
/* Root widget */
.tw-card {
  position: relative;
  display: block;
  
  width: var(--tw-card-w, 400px);
  max-width: var(--tw-card-max-w, none);
  min-width: var(--tw-card-min-w, 0);
  
  height: var(--tw-card-h, 500px);
  min-height: var(--tw-card-h, 500px);
  background: var(--tw-card-bg, #808080);
  border: var(--tw-card-border, none);
  border-radius: var(--tw-card-radius, 20px);
  padding: var(--tw-card-padding, 1px);
  gap: var(--tw-card-gap, 40px);
  box-shadow: var(--tw-card-shadow, 0 10px 30px rgba(0,0,0,.12));
  overflow: hidden;

  /* Added for transition controls */
  transition-property: height, padding, background-color, color, border-color, transform, width, max-width, min-width;
  transition-duration: var(--tw-transition-duration, 320ms);
  transition-timing-function: var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  transition-delay: 0ms;
  will-change: transform, height, padding, background-color, width;
  isolation: var(--tw-card-isolate, isolate);
}

/* Card hover motion (for transforms) */
.tw-card:hover {
  transform: scale(var(--tw-hover-scale, 1)) translateX(var(--tw-hover-translate-x, 0px)) translateY(var(--tw-hover-translate-y, 0px));
}

/* ============================================================
  2 — Inner Wrapper
  ============================================================ */
/* Inner wrapper */
.tw-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tw-card-gap, 40px);
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================================
  3 — Top / Header Block
  Includes top wrapper, layers, title and related header subparts.
  ============================================================ */

/* Top/header (wrapper) */
.tw-card__top {
  display: flex;
  flex-direction: column;
  position: relative;
  height: var(--tw-top-h, 426px);
  min-height: var(--tw-top-h, 426px);
  padding: var(--tw-top-padding, 40px 20px);
  /* Always use background, not background-color, so color, gradient, or image all work */
  /* background: var(--tw-top-bg, radial-gradient(123.06% 100% at 50% 100%, #382300 0%, #1A1A1A 100%)), var(--tw-top-bg-color, transparent); */
  border-radius: var(--tw-top-radius, 20px);
  transition:
    height var(--tw-transition-duration, 320ms) var(--tw-transition-ease),
    min-height var(--tw-transition-duration, 320ms) var(--tw-transition-ease),
    padding var(--tw-transition-duration, 320ms) var(--tw-transition-ease),
    background var(--tw-transition-duration, 320ms) var(--tw-transition-ease),
    transform var(--tw-transition-duration, 320ms) var(--tw-transition-ease);
  will-change: height, min-height, padding, background, transform;
  overflow: hidden;
}

/* Top hover */
.tw-card:hover .tw-card__top {
  height: var(--tw-top-h-hover, 136px);
  min-height: var(--tw-top-h-hover, 136px);
  padding: var(--tw-top-padding-hover, 40px 20px);
  /* background: var(--tw-top-bg-hover, var(--tw-top-bg, radial-gradient(123.06% 100% at 50% 100%, #382300 0%, #1A1A1A 100%))); */
  /* Optionally add transform/background changes here if needed */
}

/* ------------------------------------------------------------
  3.2 — Layers (visual overlays)
  Container, base layer rules, image fallbacks and per-layer specifics.
  ----------------------------------------------------------- */
.tw-card__layers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Each layer: use the CSS var for z-index but add +1 to avoid negative values causing "behind background" issue */
.tw-card__layer {
  position: absolute;
  left: var(--tw-layer-left, 0);
  top: var(--tw-layer-top, 0);
  width: var(--tw-layer-w, 100%);
  height: var(--tw-layer-h, 100%);
  opacity: var(--tw-layer-opacity, 1);
  mix-blend-mode: var(--tw-layer-blend, var(--tw-layers-default-blend, normal));
  filter: var(--tw-layer-filter, none);
  transform: translate(
    var(--tw-layer-translate-x, var(--tw-layer-1-translate-x, var(--tw-layer-2-translate-x, var(--tw-layer-3-translate-x, 0)))),
    var(--tw-layer-translate-y, var(--tw-layer-1-translate-y, var(--tw-layer-2-translate-y, var(--tw-layer-3-translate-y, 0))) )
  )
  rotate(var(--tw-layer-rotate, 0)) scale(var(--tw-layer-scale, 1));
  transition: transform var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)), opacity var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)), filter var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  /* compute z-index safely: use calc(var(--tw-layer-z,0) + 1) so -1 becomes 0 and won't be behind background */
  z-index: calc( (var(--tw-layer-z, 0) + 1) );
  pointer-events: none;
  will-change: transform, opacity;
}

  /* Explicit per-layer transform rules for instant updates */
  .tw-card__layer.layer-1 {
  background-image: var(--tw-layer-1-bg-image, var(--tw-bg-image, none));
  background-size: var(--tw-layer-1-bg-size, var(--tw-bg-size, cover));
  background-position: var(--tw-layer-1-bg-position, var(--tw-bg-position, center));
  background-repeat: var(--tw-layer-1-bg-repeat, var(--tw-bg-repeat, no-repeat));
    transform: translate(var(--tw-layer-1-translate-x, 0), var(--tw-layer-1-translate-y, 0)) rotate(var(--tw-layer-1-rot, var(--tw-layer-1-rotate, 0))) scale(var(--tw-layer-1-scale, 1));
  }
  .tw-card__layer.layer-2 {
  background-image: var(--tw-layer-2-bg-image, var(--tw-bg-image, none));
  background-size: var(--tw-layer-2-bg-size, var(--tw-bg-size, cover));
  background-position: var(--tw-layer-2-bg-position, var(--tw-bg-position, center));
  background-repeat: var(--tw-layer-2-bg-repeat, var(--tw-bg-repeat, no-repeat));
    transform: translate(var(--tw-layer-2-translate-x, 0), var(--tw-layer-2-translate-y, 0)) rotate(var(--tw-layer-2-rot, var(--tw-layer-2-rotate, 0))) scale(var(--tw-layer-2-scale, 1));
  }
  .tw-card__layer.layer-3 {
  background-image: var(--tw-layer-3-bg-image, var(--tw-bg-image, none));
  background-size: var(--tw-layer-3-bg-size, var(--tw-bg-size, cover));
  background-position: var(--tw-layer-3-bg-position, var(--tw-bg-position, center));
  background-repeat: var(--tw-layer-3-bg-repeat, var(--tw-bg-repeat, no-repeat));
    transform: translate(var(--tw-layer-3-translate-x, 0), var(--tw-layer-3-translate-y, 0)) rotate(var(--tw-layer-3-rot, var(--tw-layer-3-rotate, 0))) scale(var(--tw-layer-3-scale, 1));
  }

/* Utility class to allow overflow on layers if needed (e.g. for content-mode images) */
.tw-card--allow-layer-overflow {
  overflow: visible;
}

/* Background child fills and preserves object-fit behaviour */
.tw-card__layer-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Hover behaviour remains the same (uses hover vars if present) */
.tw-card:hover .tw-card__layer {
  transform: translate(var(--tw-layer-translate-x-hover, var(--tw-layer-translate-x, 0)), var(--tw-layer-translate-y-hover, var(--tw-layer-translate-y, 0))) rotate(var(--tw-layer-rotate-hover, var(--tw-layer-rotate, 0))) scale(var(--tw-layer-scale-hover, var(--tw-layer-scale, 1)));
  opacity: var(--tw-layer-opacity-hover, var(--tw-layer-opacity, 1));
  filter: var(--tw-layer-filter-hover, var(--tw-layer-filter, none));
}


/* Default behaviour when a layer is using background-image (or fallback img):
   make the child image fill the layer box. */
.tw-card__layer:not(.layer-render-img) img,
.tw-card__layer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--tw-layer-bg-position, center);
  pointer-events: none;
}

/* When the layer is explicitly rendered as a real <img> (layer-render-img),
   treat the <img> as the content: allow overflow and move/transform the image
   itself using the same CSS variables the controls write. This prevents the
   layer container from clipping the image. */
.tw-card__layer.layer-render-img {
  /* stop moving the container — we'll move the image instead */
  transform: none !important;
  overflow: visible; /* allow image to overflow parent */
}

/* Inline SVG color control for layers */
.tw-card__layer.layer-render-img svg.tw-card__layer-img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Ensure all SVG children also inherit the color variable for fill */
.tw-card__layer.layer-render-img svg.tw-card__layer-img,
.tw-card__layer.layer-render-img svg.tw-card__layer-img * {
  fill: var(--tw-layer-svg-color, currentColor) !important;
}

/* img as content: don't force width/height 100% — keep native/aspect and allow transforms.
   Use the CSS variables (set on the container) to position and transform the image. */
.tw-card__layer.layer-render-img img.tw-card__layer-img {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: var(--tw-layer-object-fit, cover);
  object-position: var(--tw-layer-bg-position, center);
  pointer-events: none;
  display: block;
  /* content-level positioning uses the same variables your controls already set */
  left: var(--tw-layer-left, 0);
  top: var(--tw-layer-top, 0);
  transform: translate(var(--tw-layer-translate-x, 0), var(--tw-layer-translate-y, 0))
             rotate(var(--tw-layer-rotate, 0))
             scale(var(--tw-layer-scale, 1));
  transition: transform var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
              opacity var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
              filter var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  opacity: var(--tw-layer-opacity, 1);
}

/* Hover version for content-mode images */
.tw-card:hover .tw-card__layer.layer-render-img img.tw-card__layer-img {
  transform: translate(var(--tw-layer-translate-x-hover, var(--tw-layer-translate-x, 0)), var(--tw-layer-translate-y-hover, var(--tw-layer-translate-y, 0)))
             rotate(var(--tw-layer-rotate-hover, var(--tw-layer-rotate, 0)))
             scale(var(--tw-layer-scale-hover, var(--tw-layer-scale, 1)));
  opacity: var(--tw-layer-opacity-hover, var(--tw-layer-opacity, 1));
  filter: var(--tw-layer-filter-hover, var(--tw-layer-filter, none));
}


/* Wrapper for img inside content-mode layer, to allow absolute fill if needed */
.tw-card__layer-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ------------------------------------------------------------
  3.3 — Title & Header Content
  Title, subtitle, price and small header layout helpers.
  ----------------------------------------------------------- */

/* Ensure content sits above layers */
.tw-card__title,
.tw-card__bottom,
.tw-card__content {
  position: relative;
  z-index: 3; /* content above .tw-card__layers which is z-index:1 */
}  


/* Title */
.tw-card__title {
  margin: 0 0 0 0;
  color: var(--tw-title-color, #E6E6E6);
  font-size: var(--tw-title-font-size, 36px);
  line-height: var(--tw-title-line-height, 48px);
  font-weight: var(--tw-title-font-weight, 500);
  font-family: var(--tw-title-font-family, Inter, system-ui, sans-serif);
  /* Make title follow global transition vars */
  transition-property: color;
  transition-duration: var(--tw-transition-duration, 320ms);
  transition-timing-function: var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  transition-delay: var(--tw-transition-delay, 0ms);
  transition:
    color var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    font-size var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    transform var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    letter-spacing var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
}
/* When the card is hovered (or in-editor preview .is-hover), switch to the hover color var.
   This ensures card-hover (not only title-hover) triggers the color change. */
.tw-card:hover .tw-card__title,
.tw-card.is-hover .tw-card__title {
  color: var(--tw-title-color-hover, var(--tw-title-color, #E6E6E6));
}
/* Make sure motion-enabled widgets use the same timing (defensive) */
.tw-card[data-tw-motion="on"] .tw-card__title {
  transition-duration: var(--tw-transition-duration);
  transition-timing-function: var(--tw-transition-ease);
}
/* When motion explicitly enabled, ensure the sub-row uses the global vars (defensive) */
.tw-card[data-tw-motion="on"] .tw-card__sub-row {
  transition-duration: var(--tw-transition-duration);
  transition-timing-function: var(--tw-transition-ease);
}


/* Sub-row layout */
.tw-card__sub-row {
  display: flex;
  width: 100%;
  align-items: var(--tw-subrow-align, center);
  gap: var(--tw-subrow-gap, 16px);
  flex-direction: var(--tw-subrow-flow, row);
  justify-content: var(--tw-subrow-justify, var(--tw-subrow-alignment, space-between));
  padding: var(--tw-subrow-padding, 0);
  /* Height controlled by CSS variable emitted by the control (default auto) */
  height: var(--tw-subrow-h, auto);
  min-height: var(--tw-subrow-h, auto);

  /* Animate using global transition vars */
  transition-property: height, min-height, padding, gap;
  transition-duration: var(--tw-transition-duration, 320ms);
  transition-timing-function: var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  transition-delay: var(--tw-transition-delay, 0ms);

  will-change: height, min-height, padding, gap;
}  

/* Subtitle */
.tw-card__subtitle {
  color: var(--tw-subtitle-color, #333333);
  font-size: var(--tw-subtitle-font-size, 14px);
  /* text-transform: uppercase; */
  margin: 0;
}

/* Price: separate currency and number for correct prefix/suffix positioning */
.tw-card__price {
  display: flex;
  flex-direction: var(--tw-price-flow, row);
  justify-content: var(--tw-price-justify, flex-start);
  align-items: var(--tw-price-align, baseline);
  gap: var(--tw-price-gap, 0.5rem); /* your existing gap control can keep writing to the selector or you can change it to write --tw-price-gap */
}
/* Hover support (editor preview via .is-hover as well) */
.tw-card:hover .tw-card__price,
.tw-card.is-hover .tw-card__price {
  flex-direction: var(--tw-price-flow-hover, var(--tw-price-flow, row));
  justify-content: var(--tw-price-justify-hover, var(--tw-price-justify, flex-start));
  align-items: var(--tw-price-align-hover, var(--tw-price-align, baseline));
}

.tw-card__price-label {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  color: var(--tw-price-label-color, #333333);
}

.tw-card__price-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-size: var(--tw-price-font-size, 24px);
  font-weight: 600;
  color: var(--tw-price-value-color, #1A1A1A);
}

.tw-card__currency {
  display: inline-block;
  font-weight: 600;
  margin-left: 0;
  margin-right: 0;
}
.tw-card__currency--prefix {
  margin-right: 0rem;
}
.tw-card__currency--suffix {
  margin-left: 0rem;
}

.tw-card__price-number {
  display: inline-block;
}

/* Media fallback container */
.tw-card__media { display: none; }

/* ============================================================
  4 — Media & Bottom / Details Block
  Media placeholder, bottom area, brief/content, separator, price.
  ============================================================ */

/* Bottom / details */
.tw-card__bottom {
  position: relative;
  align-items: center;
  height: var(--tw-bottom-h, 72px);
  max-height: var(--tw-bottom-max-h, 9999px);
  padding: var(--tw-bottom-padding, 20px);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--tw-bottom-gap, 40px);

  transition:
    height var(--tw-transition-duration) var(--tw-transition-ease),
    max-height var(--tw-transition-duration) var(--tw-transition-ease),
    padding var(--tw-transition-duration) var(--tw-transition-ease),
    transform var(--tw-transition-duration) var(--tw-transition-ease),
    opacity var(--tw-transition-duration) var(--tw-transition-ease);
  will-change: height, max-height, padding, transform, opacity;
  transform: translateY(0);
  opacity: var(--tw-bottom-opacity, 1);
}

.tw-card__brief {
  max-width: var(--tw-brief-max-w, 100%);
  min-width: var(--tw-brief-min-w, 0);

  transition-property: max-width, min-width, color;
  transition-duration: var(--tw-transition-duration, 320ms);
  transition-timing-function: var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
}

.tw-card:hover .tw-card__bottom {
  height: var(--tw-bottom-h-hover, 362px);
  max-height: var(--tw-bottom-max-h-hover, 9999px);
  padding: var(--tw-bottom-padding-hover, 20px);
  transform: translateY(var(--tw-bottom-translate-y-hover, 0));
  opacity: var(--tw-bottom-opacity-hover, var(--tw-bottom-opacity, 1));
}

/* Brief/content */
.tw-card__content {
  width: 100%;
  color: var(--tw-brief-color, #1A1A1A);
  font-size: var(--tw-brief-font-size, 24px);
  line-height: 1.4;
  /* consume the wrapper vars for layout */
  display: var(--tw-brief-display, block);
  flex-direction: var(--tw-brief-flow, column);
  justify-content: var(--tw-brief-justify, flex-start);
  align-items: var(--tw-brief-align-items, stretch);
  gap: var(--tw-brief-gap, 16px);
  padding: var(--tw-brief-padding, 0);
  /* height uses var (default auto) */
  height: var(--tw-brief-h, auto);
  transition:
    height var(--tw-transition-duration) var(--tw-transition-ease),
    padding var(--tw-transition-duration) var(--tw-transition-ease),
    gap var(--tw-transition-duration) var(--tw-transition-ease);
  box-sizing: border-box;
  overflow: visible;
}

/* Hover consumes hover vars, with fallbacks to base vars */
.tw-card:hover .tw-card__content {
  height: var(--tw-brief-h-hover, var(--tw-brief-h, auto));
  flex-direction: var(--tw-brief-flow-hover, var(--tw-brief-flow, column));
  justify-content: var(--tw-brief-justify-hover, var(--tw-brief-justify, flex-start));
  align-items: var(--tw-brief-align-items-hover, var(--tw-brief-align-items, stretch));
  gap: var(--tw-brief-gap-hover, var(--tw-brief-gap, 16px));
  padding: var(--tw-brief-padding-hover, var(--tw-brief-padding, 0));
}

/* Separator */
.tw-card__separator {
  display: none;
  background: none;
  width: 100%;
  margin: var(--tw-sep-margin, 20px 0);
  border-bottom-width: var(--tw-sep-thickness, 1px);
  border-bottom-style: var(--tw-sep-style, solid);
  border-bottom-color: var(--tw-sep-color, #1A1A1A);
  opacity: 1;
  
  /* animate separator using the global transition settings */
  transition:
    margin var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    padding var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    border-bottom-width var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    border-bottom-color var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)),
    opacity var(--tw-transition-duration, 320ms) var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1));
  will-change: margin, padding, border-bottom-width, border-bottom-color, opacity;
  transition-delay: var(--tw-transition-delay, 0ms);
}

/* CTA wrap */
.tw-card__buttons {
  display: flex;
  gap: var(--tw-cta-gap, 40px);
  flex-wrap: wrap;
}

/* Ensure button icon is visible and spaced */
.tw-card__button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tw-btn-icon-size, 1.2em);
  height: var(--tw-btn-icon-size, 1.2em);
  margin-right: var(--tw-btn-icon-gap, 0.5em);
  font-size: var(--tw-btn-icon-font-size, 1em);
  line-height: 1;
  vertical-align: middle;
  color: var(--tw-btn-icon-color, currentColor);
  fill: var(--tw-btn-icon-color, currentColor);
  /* For SVG icons - use button-specific timing so icon follows button controls */
  transition-property: color, fill;
  transition-duration: var(--tw-btn-transition-duration, var(--tw-transition-duration, 320ms));
  transition-timing-function: var(--tw-btn-transition-ease, var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)));
  transition-delay: var(--tw-btn-transition-delay, 0ms);
}

/* Buttons */
.tw-card__button.tw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  color: var(--tw-btn-color, #E6E6E6);
  background: var(--tw-btn-bg, #1A1A1A);
  border: 2px solid var(--tw-btn-border-color, var(--tw-btn-bg, #1A1A1A));
  border-radius: var(--tw-btn-radius, 500px);
  padding: var(--tw-btn-padding, 16px 24px);
  font-weight: var(--tw-btn-font-weight, 700);
  font-size: var(--tw-btn-font-size, 24px);

  /* Use button-specific transition props/duration/ease/delay.
     Fallback order:
      - button var
      - global var
      - hardcoded sensible default
  */
  transition-property: var(--tw-btn-transition-props, color, background-color, border-color, transform);
  transition-duration: var(--tw-btn-transition-duration, var(--tw-transition-duration, 320ms));
  transition-timing-function: var(--tw-btn-transition-ease, var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)));
  transition-delay: var(--tw-btn-transition-delay, 0ms);
}
.tw-card__button.tw-button:hover,
.tw-card__button.tw-button:focus-visible {
  color: var(--tw-btn-hover-color, var(--tw-btn-color, #FFFFFF));
  background: var(--tw-btn-hover-bg, var(--tw-btn-bg, #333333));
  border-color: var(--tw-btn-hover-border-color, var(--tw-btn-border-color, var(--tw-btn-bg, #333333)));
  outline: none;
}
/* Use a subtle active scale so the button doesn't collapse */
.tw-card__button.tw-button:active {
  transform: scale(var(--tw-btn-active-scale, 0.98));
}

/* Focus visible ring */
.tw-card__button:focus-visible {
  box-shadow: 0 0 0 3px var(--tw-focus-ring-color, #005fcc);
  outline: none;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tw-card:not([data-tw-motion="on"]) .tw-card__layer,
  .tw-card:not([data-tw-motion="on"]) .tw-card__top,
  .tw-card:not([data-tw-motion="on"]) .tw-card__title,
  .tw-card:not([data-tw-motion="on"]) .tw-card__bottom,
  .tw-card:not([data-tw-motion="on"]) .tw-card__separator { 
    transition-duration: 0ms !important; 
    transition-delay: 0ms !important;
  }
  .tw-card:not([data-tw-motion="on"]) .tw-card__sub-row {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
  .tw-card:not([data-tw-motion="on"]) .tw-card__button {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* If motion explicitly enabled on the widget, ensure other elements use global vars (buttons handled separately) */
.tw-card[data-tw-motion="on"] .tw-card__layer,
.tw-card[data-tw-motion="on"] .tw-card__title,
.tw-card[data-tw-motion="on"] .tw-card__bottom,
.tw-card[data-tw-motion="on"] .tw-card__top {
  transition-duration: var(--tw-transition-duration);
  transition-timing-function: var(--tw-transition-ease);
}

/* Responsive */
@media (max-width: 600px) {
  .tw-card { width: 100%; height: auto; min-height: 300px; }
  .tw-card__title { font-size: 24px; line-height: 32px; }
  .tw-card__content { font-size: 16px; }
  .tw-card__button { font-size: 16px; padding: 12px 16px; }
  .tw-card__top { height: auto; min-height: 200px; }
  .tw-card:hover .tw-card__top { height: auto; min-height: 100px; }
  .tw-card__bottom { height: auto; max-height: 9999px; }
  .tw-card:hover .tw-card__bottom { height: auto; max-height: 9999px; }
}

/* ============================================================
  5 — CTA / Buttons
  Button styles, icons, hover/focus/active states, and authoritative transition rules.
  ============================================================ */

.tw-card__button-icon {
  /* Reinforce icon transition with button vars (defensive, same as top) */
  transition-property: color, fill;
  transition-duration: var(--tw-btn-transition-duration, var(--tw-transition-duration, 320ms));
  transition-timing-function: var(--tw-btn-transition-ease, var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)));
  transition-delay: var(--tw-btn-transition-delay, 0ms);
}

.tw-card__button.tw-button {
  transition-property: var(--tw-btn-transition-props, color, background-color, border-color, transform);
  transition-duration: var(--tw-btn-transition-duration, var(--tw-transition-duration, 320ms));
  transition-timing-function: var(--tw-btn-transition-ease, var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)));
  transition-delay: var(--tw-btn-transition-delay, 0ms);
}

/* When motion enabled, ensure buttons still use their own vars (defensive) */
.tw-card[data-tw-motion="on"] .tw-card__button {
  transition-property: var(--tw-btn-transition-props, color, background-color, border-color, transform);
  transition-duration: var(--tw-btn-transition-duration, var(--tw-transition-duration, 320ms));
  transition-timing-function: var(--tw-btn-transition-ease, var(--tw-transition-ease, cubic-bezier(.2,.7,.2,1)));
  transition-delay: var(--tw-btn-transition-delay, 0ms);
}

/* ============================================================
  6 — Utilities / Motion / Responsive
  Reduced-motion media query, motion-enabled fallbacks and responsive overrides.
  ============================================================ */

/* End Tile Widget CSS */