/* Global styles removed to prevent conflicts */

.brand-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  width: 98%;
  padding: 0 20px;
  z-index: 100;
  position: relative;
}

.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
}

.pill:hover {
  background-color: #e5e7eb;
  transform: translateY(-1px);
}

.pill.pill-active {
  background-color: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
}

.pill-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CANVAS CONTAINER */
#canvasContainer {
  width: 95%;
  max-width: 1400px;
  height: 580px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  /* Default */
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.brand-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  /* Hidden by default */
}

.brand-content.active {
  display: block;
}

/* Common Scatter Item Base */
.scatter-item {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.4s;
  cursor: pointer;
  z-index: 10;
}

.scatter-item:hover {
  z-index: 100 !important;
}

/* CSS for apple */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='apple'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Clean, premium tech background */
  background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
}

/* Subtle mesh gradients for depth */
.brand-content[data-brand='apple'] .mesh-gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.4;
}

.brand-content[data-brand='apple'] .mesh-1 {
  top: -10%;
  left: 20%;
  width: 600px;
  height: 580px;
  background: #e0e5ec;
}

.brand-content[data-brand='apple'] .mesh-2 {
  bottom: -10%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: #d1d1d6;
}

.brand-content[data-brand='apple'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='apple'] .scatter-item {
  position: absolute;
  background: var(--apple-card);
  border-radius: 24px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='apple'] .scatter-item:hover {
  transform: scale(1.03) translateY(-10px) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  z-index: 50;
}

/* 1. iOS Widget (Calendar) */
.brand-content[data-brand='apple'] .card-widget {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 18%;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #ffffff;
}

.brand-content[data-brand='apple'] .widget-day {
  color: #ff3b30;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

.brand-content[data-brand='apple'] .widget-date {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1;
  margin: 4px 0;
}

.brand-content[data-brand='apple'] .widget-event {
  font-size: 12px;
  color: #86868b;
  text-align: center;
  margin-top: 8px;
}

/* 2. Product Shot (iPhone) */
.brand-content[data-brand='apple'] .card-product {
  width: 280px;
  height: auto;
  top: 12%;
  right: 20%;
  transform: rotate(8deg);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.brand-content[data-brand='apple'] .card-product img {
  width: 100%;
  height: auto;
  drop-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  border-radius: 40px;
}

.brand-content[data-brand='apple'] .card-product:hover {
  transform: rotate(8deg) scale(1.05) !important;
  box-shadow: none;
}

/* 3. Typography Card */
.brand-content[data-brand='apple'] .card-type {
  width: 340px;
  top: 45%;
  left: 35%;
  transform: rotate(3deg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-content[data-brand='apple'] .card-type h2 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.1;
  background: linear-gradient(90deg, #1d1d1f 0%, #434344 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-content[data-brand='apple'] .card-type p {
  margin-top: 12px;
  color: #86868b;
  font-size: 15px;
}

/* 4. Music Card (Glassmorphism) */
.brand-content[data-brand='apple'] .card-music {
  width: 300px;
  bottom: 15%;
  right: 15%;
  transform: rotate(-5deg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.brand-content[data-brand='apple'] .album-art {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg,
      #ff9a9e 0%,
      #fecfef 99%,
      #fecfef 100%);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='apple'] .music-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-content[data-brand='apple'] .music-title {
  font-weight: 600;
  font-size: 16px;
}

.brand-content[data-brand='apple'] .music-artist {
  font-size: 14px;
  color: #86868b;
}

/* 5. Activity Rings */
.brand-content[data-brand='apple'] .card-activity {
  width: 220px;
  bottom: 20%;
  left: 15%;
  transform: rotate(10deg);
  background: #000000;
  color: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='apple'] .rings-container {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.brand-content[data-brand='apple'] .ring-svg {
  width: 100%;
  height: 100%;
}

.brand-content[data-brand='apple'] .activity-label {
  font-size: 18px;
  font-weight: 600;
}

.brand-content[data-brand='apple'] .activity-sub {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

/* 6. Ecosystem Chip */
.brand-content[data-brand='apple'] .card-chip {
  width: 140px;
  height: 140px;
  top: 40%;
  right: 10%;
  transform: rotate(-12deg);
  background: #f5f5f7;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.brand-content[data-brand='apple'] .chip-graphic {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 8px;
  position: relative;
}

.brand-content[data-brand='apple'] .chip-graphic::after {
  content: "M3";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 700;
  font-size: 14px;
}


/* CSS for airbnb */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas / Pile Area */
.brand-content[data-brand='airbnb'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Light grid texture */
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Background Words */
.brand-content[data-brand='airbnb'] .bg-word {
  position: absolute;
  font-size: 180px;
  font-weight: 900;
  color: #111827;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
  font-family: sans-serif;
}

/* The Container (Full Size) */
.brand-content[data-brand='airbnb'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* General Item Styles */
.brand-content[data-brand='airbnb'] .pile-item {
  position: absolute;
  background: white;
  border-radius: 4px;
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.15),
    0 4px 10px -2px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
  cursor: pointer;
}

.brand-content[data-brand='airbnb'] .pile-item:hover {
  z-index: 100 !important;
  transform: scale(1.05) rotate(0deg) !important;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.25);
}

/* --- PRIMARY ITEMS --- */

/* 1. Hero Photo (Top Left) */
.brand-content[data-brand='airbnb'] .item-photo {
  width: 380px;
  height: 460px;
  padding: 16px 16px 48px 16px;
  background: #fff;
  top: 40px;
  left: 40px;
  transform: rotate(-3deg);
  z-index: 5;
  border-radius: 2px;
}

.brand-content[data-brand='airbnb'] .item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: contrast(1.05) saturate(1.1);
}

/* 2. Risograph Poster - UPDATED */
.brand-content[data-brand='airbnb'] .item-poster {
  width: 320px;
  height: 440px;
  background: #fdfbf7;
  /* Noise texture */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnPgo8cmVjdCB3aWR0aD0nNCcgaGVpZ2h0PSc0JyBmaWxsPScjRkRGQkY3Jy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNkMWQ1ZGInLz4KPC9zdmc+");
  bottom: 30px;
  left: 40px;
  transform: rotate(2deg);
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-content[data-brand='airbnb'] .poster-frame {
  flex: 1;
  border: 3px solid #1f2937;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.brand-content[data-brand='airbnb'] .poster-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(1deg);
  width: 80px;
  height: 24px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.brand-content[data-brand='airbnb'] .poster-header-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #1f2937;
  border-bottom: 2px solid #1f2937;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.brand-content[data-brand='airbnb'] .poster-graphic {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.brand-content[data-brand='airbnb'] .graphic-circle {
  width: 140px;
  height: 140px;
  background: #ff385c;
  border-radius: 50%;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.brand-content[data-brand='airbnb'] .graphic-triangle {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 120px solid #0284c7;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.brand-content[data-brand='airbnb'] .poster-main-text {
  font-family: "Arial Black", sans-serif;
  font-size: 64px;
  line-height: 0.8;
  color: #1f2937;
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: 80px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.brand-content[data-brand='airbnb'] .poster-sub-text {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.1em;
  color: #4b5563;
}

.brand-content[data-brand='airbnb'] .poster-footer-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid #1f2937;
  padding-top: 12px;
}

.brand-content[data-brand='airbnb'] .poster-barcode {
  height: 24px;
  width: 80px;
  background-image: linear-gradient(90deg,
      #000 0%,
      #000 4%,
      transparent 4%,
      transparent 8%,
      #000 8%,
      #000 10%,
      transparent 10%,
      transparent 16%,
      #000 16%,
      #000 24%,
      transparent 24%,
      transparent 28%,
      #000 28%,
      #000 36%,
      transparent 36%,
      transparent 40%,
      #000 40%,
      #000 44%,
      transparent 44%,
      transparent 50%,
      #000 50%,
      #000 60%,
      transparent 60%,
      transparent 64%,
      #000 64%,
      #000 70%,
      transparent 70%,
      transparent 80%,
      #000 80%,
      #000 90%,
      transparent 90%,
      transparent 92%,
      #000 92%,
      #000 100%);
}

/* 3. Booking Widget (Top Right) */
.brand-content[data-brand='airbnb'] .item-booking {
  width: 280px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  top: 40px;
  right: 40px;
  transform: rotate(4deg);
  z-index: 20;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #f3f4f6;
}

/* 4. Host Profile (Top Center) */
.brand-content[data-brand='airbnb'] .item-host {
  width: auto;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 12px;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 25;
  border: 1px solid #e5e7eb;
}

/* 5. Moka Pot (Center Left) */
.brand-content[data-brand='airbnb'] .item-moka {
  width: 200px;
  height: 240px;
  background: #fff;
  padding: 12px;
  top: 250px;
  left: 35%;
  transform: rotate(-5deg);
  z-index: 15;
  border-radius: 4px;
}

/* 6. Insta Card (Bottom Right) */
.brand-content[data-brand='airbnb'] .item-insta {
  width: 280px;
  background: #050505;
  color: white;
  border-radius: 24px;
  padding: 16px;
  bottom: 40px;
  right: 40px;
  transform: rotate(-2deg);
  z-index: 35;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid #1f2937;
}

/* --- MICRO COMPONENTS --- */

/* 7. Review Bubble (Top Right-ish) */
.brand-content[data-brand='airbnb'] .item-review {
  width: auto;
  max-width: 200px;
  background: #ff385c;
  color: white;
  padding: 12px 16px;
  border-radius: 12px 12px 12px 0px;
  font-size: 13px;
  font-weight: 500;
  top: 200px;
  right: 25%;
  transform: rotate(8deg);
  z-index: 40;
  box-shadow: 0 8px 16px rgba(255, 56, 92, 0.25);
}

/* 8. Map Snippet (Bottom Center Left) */
.brand-content[data-brand='airbnb'] .item-map {
  width: 140px;
  height: 140px;
  background: #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid white;
  bottom: 80px;
  left: 35%;
  transform: rotate(5deg);
  z-index: 12;
}

/* 9. Amenities Strip (Center Left) */
.brand-content[data-brand='airbnb'] .item-amenities {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border-radius: 100px;
  border: 1px solid #f3f4f6;
  top: 550px;
  left: 380px;
  transform: rotate(-10deg);
  z-index: 22;
  color: #4b5563;
}

/* 10. Sound Pill (Bottom Center) */
.brand-content[data-brand='airbnb'] .item-sound {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #111827;
  color: white;
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  bottom: 40px;
  left: 55%;
  transform: rotate(3deg);
  z-index: 28;
}

/* --- STICKERS --- */

.brand-content[data-brand='airbnb'] .item-sticker-1 {
  /* Wanderlust - Center */
  position: absolute;
  width: 140px;
  height: 60px;
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 30;
  border: 3px solid white;
  font-family: "Brush Script MT", cursive;
  font-size: 28px;
  color: #92400e;
}

.brand-content[data-brand='airbnb'] .item-sticker-2 {
  /* Off Grid - Right Middle */
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #064e3b;
  border: 3px solid #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecfdf5;
  top: 45%;
  right: 10%;
  transform: rotate(10deg);
  z-index: 8;
}

.brand-content[data-brand='airbnb'] .item-sticker-3 {
  /* Logo - Bottom Right area */
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff385c 0%, #bd1e59 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid white;
  bottom: 250px;
  right: 35%;
  transform: rotate(-15deg);
  z-index: 22;
}

/* Lines */
.brand-content[data-brand='airbnb'] .lines-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.brand-content[data-brand='airbnb'] .connection-line {
  stroke: #9ca3af;
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.3;
  fill: none;
}

/* Floating Avatars (Peripheral) */
.brand-content[data-brand='airbnb'] .avatar-float {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}


/* CSS for uber */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='uber'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Sharp, tech grid for Uber */
  background-image:
    linear-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: #fafafa;
}

.brand-content[data-brand='uber'] .bg-word {
  position: absolute;
  font-size: 180px;
  font-weight: 900;
  color: #000000;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
  font-family: sans-serif;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.brand-content[data-brand='uber'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='uber'] .scatter-item {
  position: absolute;
  background: white;
  border-radius: 16px;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='uber'] .scatter-item:hover {
  transform: scale(1.02) translateY(-5px) !important;
  box-shadow:
    0 20px 35px -5px rgba(0, 0, 0, 0.15),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 50;
}

/* Specific Cards */

/* 1. Typography Card (Poster) */
.brand-content[data-brand='uber'] .card-poster {
  width: 280px;
  height: 360px;
  top: 10%;
  left: 15%;
  transform: rotate(-3deg);
  background: #000000;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
}

/* 2. UI Card (Ride Selector) */
.brand-content[data-brand='uber'] .card-ui {
  width: 320px;
  padding: 24px;
  top: 15%;
  right: 18%;
  transform: rotate(2deg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 3. Photo Card (Motion) */
.brand-content[data-brand='uber'] .card-photo {
  width: 300px;
  height: 340px;
  top: 50%;
  left: 35%;
  transform: rotate(4deg);
  padding: 12px 12px 40px 12px;
  background: white;
}

.brand-content[data-brand='uber'] .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.brand-content[data-brand='uber'] .card-photo span {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 4. Map Snippet */
.brand-content[data-brand='uber'] .card-map {
  width: 240px;
  height: 240px;
  bottom: 10%;
  left: 10%;
  transform: rotate(-5deg);
  padding: 0;
  border: 4px solid white;
}

.brand-content[data-brand='uber'] .card-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. Micro Info (Rating) */
.brand-content[data-brand='uber'] .card-rating {
  width: 200px;
  padding: 16px;
  background: #000000;
  color: white;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  top: 45%;
  left: 10%;
  transform: rotate(-8deg);
}

/* 6. Sticker (Safety Shield) */
.brand-content[data-brand='uber'] .card-sticker {
  width: 140px;
  height: 140px;
  bottom: 15%;
  right: 25%;
  transform: rotate(12deg);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='uber'] .card-sticker:hover {
  transform: rotate(12deg) scale(1.1) !important;
  box-shadow: none;
}

/* 7. Object (Keys/Phone) */
.brand-content[data-brand='uber'] .card-object {
  width: 260px;
  padding: 20px;
  background: white;
  bottom: 25%;
  right: 8%;
  transform: rotate(-4deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Internal UI Elements */
.brand-content[data-brand='uber'] .ride-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #f3f4f6;
}

.brand-content[data-brand='uber'] .ride-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-content[data-brand='uber'] .ride-name {
  font-weight: 600;
  font-size: 14px;
}

.brand-content[data-brand='uber'] .ride-price {
  font-weight: 600;
  font-size: 14px;
}

.brand-content[data-brand='uber'] .ride-sub {
  font-size: 12px;
  color: #6b7280;
}

.brand-content[data-brand='uber'] .poster-text-lg {
  font-size: 42px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.brand-content[data-brand='uber'] .poster-text-sm {
  font-size: 14px;
  opacity: 0.8;
  font-family: monospace;
}

.brand-content[data-brand='uber'] .badge-pill {
  padding: 4px 12px;
  background: #2563eb;
  color: white;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}


/* CSS for spotify */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='spotify'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Dark Gradient Background */
  background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
}

/* Abstract background blobs */
.brand-content[data-brand='spotify'] .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.4;
}

.brand-content[data-brand='spotify'] .blob-1 {
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: #509bf5;
}

.brand-content[data-brand='spotify'] .blob-2 {
  bottom: -10%;
  right: -10%;
  width: 600px;
  height: 580px;
  background: #1db954;
}

.brand-content[data-brand='spotify'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='spotify'] .scatter-item {
  position: absolute;
  background: #282828;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='spotify'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  z-index: 50;
}

/* 1. Typography Poster (Wrapped style) */
.brand-content[data-brand='spotify'] .card-poster {
  width: 300px;
  height: 400px;
  top: 8%;
  left: 12%;
  transform: rotate(-4deg);
  background: linear-gradient(45deg, #ff6437, #ffc864);
  color: #191414;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  text-align: center;
}

/* 2. UI Card (Now Playing) */
.brand-content[data-brand='spotify'] .card-ui {
  width: 340px;
  padding: 24px;
  top: 15%;
  right: 15%;
  transform: rotate(3deg);
  background: #181818;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid #333;
}

/* 3. Photo Card (Artist) */
.brand-content[data-brand='spotify'] .card-photo {
  width: 280px;
  height: 320px;
  top: 45%;
  left: 35%;
  transform: rotate(6deg);
  background: #000000;
  padding: 0;
  border-radius: 12px;
}

.brand-content[data-brand='spotify'] .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.brand-content[data-brand='spotify'] .card-photo .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* 4. Playlist Grid */
.brand-content[data-brand='spotify'] .card-playlist {
  width: 260px;
  bottom: 12%;
  left: 10%;
  transform: rotate(-6deg);
  background: #282828;
  padding: 20px;
  border-radius: 8px;
}

/* 5. Lyrics Card */
.brand-content[data-brand='spotify'] .card-lyrics {
  width: 240px;
  height: 200px;
  top: 50%;
  right: 10%;
  transform: rotate(-3deg);
  background: #b02897;
  color: white;
  padding: 24px;
  font-family: "Georgia", serif;
  font-size: 20px;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

/* 6. Sticker (Green Circle) */
.brand-content[data-brand='spotify'] .card-sticker {
  width: 120px;
  height: 120px;
  bottom: 20%;
  right: 30%;
  transform: rotate(15deg);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='spotify'] .card-sticker:hover {
  transform: rotate(15deg) scale(1.1) !important;
  box-shadow: none;
}

/* UI Elements */
.brand-content[data-brand='spotify'] .progress-bar {
  width: 100%;
  height: 4px;
  background: #404040;
  border-radius: 2px;
  position: relative;
}

.brand-content[data-brand='spotify'] .progress-fill {
  width: 65%;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
}

.brand-content[data-brand='spotify'] .control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  margin-top: 8px;
}

.brand-content[data-brand='spotify'] .poster-text {
  font-size: 56px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-family: sans-serif;
}


/* CSS for starbucks */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='starbucks'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Warm Coffee Shop Vibe Background */
  background: linear-gradient(180deg, #f2f0eb 0%, #e6e2d8 100%);
}

/* Abstract background stains */
.brand-content[data-brand='starbucks'] .stain {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  opacity: 0.6;
}

.brand-content[data-brand='starbucks'] .stain-1 {
  top: -5%;
  left: -5%;
  width: 600px;
  height: 580px;
  background: #d4e9e2;
}

/* Light Green */
.brand-content[data-brand='starbucks'] .stain-2 {
  bottom: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: #c8b09b;
}

/* Coffee Foam color */

.brand-content[data-brand='starbucks'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='starbucks'] .scatter-item {
  position: absolute;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='starbucks'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 50;
}

/* 1. App Reward Card */
.brand-content[data-brand='starbucks'] .card-app {
  width: 320px;
  top: 15%;
  right: 18%;
  transform: rotate(5deg);
  background: white;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e5e7eb;
}

/* 2. The Order Label (Sticker style) */
.brand-content[data-brand='starbucks'] .card-label {
  width: 240px;
  top: 45%;
  left: 38%;
  transform: rotate(-3deg);
  background: #ffffff;
  padding: 20px;
  font-family: "Courier New", Courier, monospace;
  border: 1px solid #e5e7eb;
  border-left: 6px solid var(--starbucks-green);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* 3. Vibe Photo (Interior) */
.brand-content[data-brand='starbucks'] .card-photo {
  width: 300px;
  height: 380px;
  top: 10%;
  left: 15%;
  transform: rotate(-6deg);
  background: white;
  padding: 12px;
  padding-bottom: 40px;
}

.brand-content[data-brand='starbucks'] .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 4. Menu Board (Chalkboard) */
.brand-content[data-brand='starbucks'] .card-menu {
  width: 260px;
  bottom: 15%;
  left: 12%;
  transform: rotate(4deg);
  background: #1f2937;
  color: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 4px solid #8b5e3c;
}

/* 5. Coffee Cup (Cutout vibe via card) */
.brand-content[data-brand='starbucks'] .card-cup-view {
  width: 280px;
  height: 340px;
  bottom: 18%;
  right: 20%;
  transform: rotate(-8deg);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.brand-content[data-brand='starbucks'] .card-cup-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  drop-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

.brand-content[data-brand='starbucks'] .card-cup-view:hover {
  transform: rotate(-8deg) scale(1.05) !important;
  box-shadow: none;
}

/* 6. Stamp/Logo */
.brand-content[data-brand='starbucks'] .card-stamp {
  width: 140px;
  height: 140px;
  top: 50%;
  right: 8%;
  transform: rotate(15deg);
  background: var(--starbucks-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 20px rgba(0, 112, 74, 0.3);
  border: 4px solid white;
}

/* UI Helpers */
.brand-content[data-brand='starbucks'] .star-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.brand-content[data-brand='starbucks'] .progress-track {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin: 12px 0;
  overflow: hidden;
}

.brand-content[data-brand='starbucks'] .progress-fill {
  width: 80%;
  height: 100%;
  background: #cba258;
}

.brand-content[data-brand='starbucks'] .btn-green {
  background: var(--starbucks-green);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 20px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  text-align: center;
}


/* CSS for zara */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='zara'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  background-color: #f3f3f3;
  background-image:
    linear-gradient(#e5e5e5 1px, transparent 1px),
    linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
  background-size: 100px 100px;
}

.brand-content[data-brand='zara'] .canvas-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, #f3f3f3, transparent);
  pointer-events: none;
}

.brand-content[data-brand='zara'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Scatter Items Common Styles */
.brand-content[data-brand='zara'] .scatter-item {
  position: absolute;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
}

.brand-content[data-brand='zara'] .scatter-item:hover {
  transform: scale(1.02) translateY(-5px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  z-index: 50;
}

/* 1. Main Campaign Image */
.brand-content[data-brand='zara'] .card-campaign {
  width: 300px;
  height: 450px;
  top: 5%;
  left: 15%;
  transform: rotate(-2deg);
  padding: 12px;
  background: white;
}

.brand-content[data-brand='zara'] .card-campaign img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.2);
}

/* 2. Editorial Text Block */
.brand-content[data-brand='zara'] .card-editorial {
  width: 240px;
  top: 15%;
  right: 25%;
  transform: rotate(3deg);
  padding: 24px;
  background: #fff;
  font-family: var(--font-serif);
}

.brand-content[data-brand='zara'] .card-editorial h3 {
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.brand-content[data-brand='zara'] .card-editorial p {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  text-align: justify;
}

/* 3. The Lookbook Stack */
.brand-content[data-brand='zara'] .card-lookbook {
  width: 200px;
  height: 260px;
  bottom: 15%;
  left: 10%;
  transform: rotate(5deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-content[data-brand='zara'] .lookbook-img {
  flex: 1;
  width: 100%;
  background: #eee;
  overflow: hidden;
}

.brand-content[data-brand='zara'] .lookbook-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-content[data-brand='zara'] .lookbook-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
}

/* 4. Abstract Texture/Vibe */
.brand-content[data-brand='zara'] .card-texture {
  width: 180px;
  height: 180px;
  bottom: 25%;
  right: 35%;
  transform: rotate(-8deg);
  padding: 0;
  border: 8px solid #fff;
}

.brand-content[data-brand='zara'] .card-texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. Typography Element */
.brand-content[data-brand='zara'] .card-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.brand-content[data-brand='zara'] .card-headline h2 {
  font-family: var(--font-serif);
  font-size: 120px;
  margin: 0;
  color: #000;
  letter-spacing: -0.06em;
  line-height: 0.8;
  mix-blend-mode: multiply;
}

.brand-content[data-brand='zara'] .card-headline span {
  display: block;
  font-size: 24px;
  font-family: var(--font-sans);
  letter-spacing: 8px;
  margin-left: 10px;
  font-weight: 300;
  text-transform: uppercase;
}

/* 6. Fashion Week Pass */
.brand-content[data-brand='zara'] .card-pass {
  width: 160px;
  height: 240px;
  top: 40%;
  right: 10%;
  transform: rotate(8deg);
  background: #000;
  color: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-content[data-brand='zara'] .pass-header {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
}

.brand-content[data-brand='zara'] .pass-main {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  text-align: center;
}

.brand-content[data-brand='zara'] .pass-footer {
  font-size: 9px;
  text-align: center;
  opacity: 0.6;
}

.brand-content[data-brand='zara'] .hole-punch {
  width: 12px;
  height: 12px;
  background: #f3f3f3;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

/* 7. Stylist Note */
.brand-content[data-brand='zara'] .card-note {
  width: 200px;
  bottom: 40%;
  left: 40%;
  transform: rotate(12deg);
  background: #feff9c;
  color: #000;
  padding: 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='zara'] .pin {
  width: 12px;
  height: 12px;
  background: #e62e2e;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 8. Collection Cities */
.brand-content[data-brand='zara'] .card-cities {
  position: absolute;
  bottom: 10%;
  right: 10%;
  transform: rotate(-3deg);
  background: transparent;
  box-shadow: none;
  text-align: right;
}

.brand-content[data-brand='zara'] .city-name {
  font-family: var(--font-serif);
  font-size: 32px;
  margin: 0;
  line-height: 1;
  font-style: italic;
  color: #999;
  transition: color 0.3s;
}

.brand-content[data-brand='zara'] .city-name:hover {
  color: #000;
}

/* 9. Minimal Tag */
.brand-content[data-brand='zara'] .card-minimal-tag {
  width: 80px;
  height: 120px;
  top: 35%;
  left: 5%;
  transform: rotate(15deg);
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  position: relative;
}

.brand-content[data-brand='zara'] .card-minimal-tag::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 10px;
}

.brand-content[data-brand='zara'] .size-circle {
  font-weight: bold;
  font-size: 14px;
}


/* CSS for vs */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='vs'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Silk Sheet Texture Effect */
  background: linear-gradient(135deg,
      #fdf2f8 0%,
      #fce7f3 50%,
      #fdf2f8 100%);
}

.brand-content[data-brand='vs'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Scatter Items */
.brand-content[data-brand='vs'] .scatter-item {
  position: absolute;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
}

.brand-content[data-brand='vs'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  z-index: 50;
}

/* 1. The Iconic Bag */
.brand-content[data-brand='vs'] .card-bag {
  width: 220px;
  height: 280px;
  top: 15%;
  left: 20%;
  transform: rotate(-8deg);
  background: repeating-linear-gradient(90deg,
      #fbcfe8,
      #fbcfe8 20px,
      #ec4899 20px,
      #ec4899 40px);
  border-radius: 4px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.brand-content[data-brand='vs'] .bag-handles {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 40px;
  border: 4px solid #111;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
}

.brand-content[data-brand='vs'] .bag-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  color: white;
  padding: 4px 12px;
  font-size: 14px;
  font-family: "Times New Roman", serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 2. Runway Invite */
.brand-content[data-brand='vs'] .card-invite {
  width: 320px;
  height: 200px;
  top: 45%;
  right: 25%;
  transform: rotate(12deg);
  background: #000;
  color: #d4af37;
  padding: 30px;
  border: 2px solid #d4af37;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Didot", serif;
}

.brand-content[data-brand='vs'] .invite-title {
  font-size: 24px;
  letter-spacing: 4px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.brand-content[data-brand='vs'] .invite-sub {
  font-size: 12px;
  font-family: sans-serif;
  color: #ccc;
  letter-spacing: 2px;
}

/* 3. Backstage Polaroid */
.brand-content[data-brand='vs'] .card-polaroid {
  width: 220px;
  height: 260px;
  bottom: 15%;
  left: 30%;
  transform: rotate(-5deg);
  background: white;
  padding: 12px 12px 60px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='vs'] .polaroid-img {
  width: 100%;
  height: 100%;
  background: #eee;
  overflow: hidden;
  position: relative;
}

.brand-content[data-brand='vs'] .polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.1);
}

.brand-content[data-brand='vs'] .handwritten {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Brush Script MT", cursive;
  font-size: 20px;
  color: #333;
  transform: rotate(-2deg);
}

/* 4. Perfume Bottle */
.brand-content[data-brand='vs'] .card-perfume {
  width: 140px;
  height: 180px;
  top: 20%;
  right: 20%;
  transform: rotate(8deg);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #fbcfe8;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
  backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 20px rgba(236, 72, 153, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
}

.brand-content[data-brand='vs'] .perfume-cap {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #e0e0e0, #fff, #999);
  position: absolute;
  top: -20px;
  border-radius: 4px;
}

.brand-content[data-brand='vs'] .perfume-bow {
  width: 120px;
  height: 20px;
  background: black;
  position: absolute;
  top: 20px;
  border-radius: 99px;
  transform: rotate(-5deg);
}

/* 5. Measuring Tape */
.brand-content[data-brand='vs'] .card-tape {
  width: 400px;
  height: 30px;
  top: 60%;
  left: 10%;
  transform: rotate(-25deg);
  background: #facc15;
  border: 1px solid #eab308;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-family: monospace;
  font-size: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='vs'] .tape-mark {
  flex: 1;
  height: 100%;
  border-right: 1px solid #333;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
  justify-content: center;
}

/* 6. Lace Swatch */
.brand-content[data-brand='vs'] .card-lace {
  width: 200px;
  height: 200px;
  bottom: 20%;
  right: 40%;
  transform: rotate(15deg);
  background-color: #111;
  background-image:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2.5px),
    radial-gradient(circle at 0% 0%,
      rgba(255, 255, 255, 0.1) 2px,
      transparent 2.5px);
  background-size: 10px 10px;
  border-radius: 8px;
  border: 4px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 7. Lipstick Stain */
.brand-content[data-brand='vs'] .card-kiss {
  width: 120px;
  height: 80px;
  top: 10%;
  left: 55%;
  transform: rotate(20deg);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}


/* CSS for dsc */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='dsc'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Bathroom Tile / Clean Slate Vibe */
  background-color: #182335;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px);
  background-size: 120px 120px;
}

.brand-content[data-brand='dsc'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='dsc'] .scatter-item {
  position: absolute;
  border-radius: 4px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 5px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='dsc'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
  z-index: 50;
}

/* 1. The Razor (Hero Product - Vector) */
.brand-content[data-brand='dsc'] .card-razor {
  width: auto;
  height: auto;
  top: 12%;
  right: 25%;
  transform: rotate(25deg);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='dsc'] .card-razor iconify-icon {
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.5));
  color: #e2e8f0;
}

.brand-content[data-brand='dsc'] .card-razor:hover {
  transform: rotate(25deg) scale(1.1) !important;
  box-shadow: none;
}

/* 2. The Box (Cardboard Texture) */
.brand-content[data-brand='dsc'] .card-box {
  width: 320px;
  height: 240px;
  top: 25%;
  left: 15%;
  transform: rotate(-8deg);
  background-color: var(--dsc-cardboard);
  background-image: url("https://www.transparenttextures.com/patterns/cardboard.png");
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed rgba(0, 0, 0, 0.2);
}

.brand-content[data-brand='dsc'] .box-label {
  background: white;
  padding: 12px 24px;
  border: 2px solid #000;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='dsc'] .box-sub {
  margin-top: 12px;
  font-family: monospace;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}

/* 3. Typography (Direct Copy) */
.brand-content[data-brand='dsc'] .card-copy {
  width: 360px;
  bottom: 20%;
  left: 20%;
  transform: rotate(4deg);
  background: var(--dsc-orange);
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-content[data-brand='dsc'] .card-copy h2 {
  font-size: 56px;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}

.brand-content[data-brand='dsc'] .card-copy p {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.9;
}

/* 4. Price Tag */
.brand-content[data-brand='dsc'] .card-price {
  width: 140px;
  height: 140px;
  top: 10%;
  left: 45%;
  transform: rotate(-15deg);
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--dsc-navy);
  color: var(--dsc-navy);
}

.brand-content[data-brand='dsc'] .price-val {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.brand-content[data-brand='dsc'] .price-sub {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

/* 5. Bathroom Humor (The Note) */
.brand-content[data-brand='dsc'] .card-note {
  width: 260px;
  bottom: 30%;
  right: 15%;
  transform: rotate(-6deg);
  background: #fffae0;
  padding: 24px;
  font-family: "Courier New", Courier, monospace;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='dsc'] .note-tape {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 30px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='dsc'] .note-text {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.brand-content[data-brand='dsc'] .note-sig {
  margin-top: 12px;
  text-align: right;
  font-style: italic;
  color: #666;
}

/* 6. Tube Product (Vector) */
.brand-content[data-brand='dsc'] .card-tube {
  width: auto;
  height: auto;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: transparent;
  box-shadow: none;
  z-index: 5;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='dsc'] .card-tube iconify-icon {
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
  color: #ffffff;
}

.brand-content[data-brand='dsc'] .card-tube:hover {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.05) !important;
  box-shadow: none;
}


/* CSS for lehman */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='lehman'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Office Desk Texture */
  background-color: #d1d5db;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.2) 2px,
      transparent 2px);
  background-size: 100px 100px;
}

.brand-content[data-brand='lehman'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Scatter Items */
.brand-content[data-brand='lehman'] .scatter-item {
  position: absolute;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
}

.brand-content[data-brand='lehman'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  z-index: 50;
}

/* 1. The Crashed Ticker */
.brand-content[data-brand='lehman'] .card-ticker {
  width: 280px;
  top: 10%;
  left: 10%;
  transform: rotate(-3deg);
  background: #000;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  padding: 16px;
  border-radius: 8px;
  border: 4px solid #333;
}

.brand-content[data-brand='lehman'] .ticker-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
}

.brand-content[data-brand='lehman'] .ticker-red {
  color: #ff3333;
  font-weight: bold;
}

/* 2. The Blackberry */
.brand-content[data-brand='lehman'] .card-phone {
  width: 140px;
  height: 240px;
  top: 40%;
  left: 38%;
  transform: rotate(8deg);
  background: #111;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  border: 2px solid #444;
}

.brand-content[data-brand='lehman'] .phone-screen {
  background: #c3d9e8;
  height: 100px;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 8px;
  font-family: sans-serif;
  font-size: 10px;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid #555;
}

.brand-content[data-brand='lehman'] .phone-keyboard {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.brand-content[data-brand='lehman'] .key {
  background: #333;
  border-radius: 2px;
  width: 100%;
  height: 12px;
}

/* 3. The Risk Report */
.brand-content[data-brand='lehman'] .card-report {
  width: 260px;
  height: 340px;
  bottom: 10%;
  left: 15%;
  transform: rotate(2deg);
  background: white;
  padding: 30px;
  font-family: "Times New Roman", serif;
  color: #000;
  border: 1px solid #ccc;
  position: relative;
}

.brand-content[data-brand='lehman'] .stamp {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  border: 4px solid #dc2626;
  color: #dc2626;
  font-size: 32px;
  font-weight: 900;
  padding: 10px 20px;
  text-transform: uppercase;
  opacity: 0.8;
  mix-blend-mode: multiply;
  font-family: sans-serif;
}

/* 4. Excel Error */
.brand-content[data-brand='lehman'] .card-excel {
  width: 320px;
  bottom: 20%;
  right: 10%;
  transform: rotate(-6deg);
  background: #fff;
  border: 1px solid #ccc;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.brand-content[data-brand='lehman'] .excel-header {
  background: #e6f0e8;
  padding: 8px;
  color: #004f39;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}

.brand-content[data-brand='lehman'] .excel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.brand-content[data-brand='lehman'] .cell {
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 6px;
  text-align: right;
}

.brand-content[data-brand='lehman'] .cell-err {
  color: red;
  font-weight: bold;
  background: #fff0f0;
}

/* 6. Sticky Note */
.brand-content[data-brand='lehman'] .card-sticky {
  width: 180px;
  height: 180px;
  top: 40%;
  left: 5%;
  transform: rotate(-10deg);
  background: #fef08a;
  padding: 20px;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 16px;
  color: #333;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 7. Cardboard Box Icon */
.brand-content[data-brand='lehman'] .card-box {
  width: 200px;
  height: 160px;
  bottom: 15%;
  left: 45%;
  transform: rotate(4deg);
  background: #d4a373;
  border: 4px solid #b08968;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #5d4037;
  font-weight: bold;
  font-family: sans-serif;
}

.brand-content[data-brand='lehman'] .box-flap {
  width: 100%;
  height: 40px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

/* 8. Repo Widget (New) */
.brand-content[data-brand='lehman'] .card-repo {
  width: 260px;
  top: 10%;
  left: 40%;
  transform: rotate(2deg);
  background: #f3f4f6;
  border: 1px solid #9ca3af;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  z-index: 20;
}

.brand-content[data-brand='lehman'] .repo-header {
  background: #374151;
  color: white;
  padding: 8px 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.repo- .brand-content[data-brand='lehman'] .repo-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 12px;
}

.brand-content[data-brand='lehman'] .repo-val {
  font-family: monospace;
  font-weight: bold;
}

.brand-content[data-brand='lehman'] .negative {
  color: #dc2626;
}

.brand-content[data-brand='lehman'] .repo-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
}

.brand-content[data-brand='lehman'] .fake-toggle {
  width: 40px;
  height: 20px;
  background: #10b981;
  border-radius: 10px;
  position: relative;
}

.brand-content[data-brand='lehman'] .toggle-knob {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.brand-content[data-brand='lehman'] .repo-status {
  font-size: 10px;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  font-weight: 600;
}

/* 9. Resume (New) */
.brand-content[data-brand='lehman'] .card-resume {
  width: 240px;
  height: 300px;
  top: 15%;
  right: 10%;
  transform: rotate(6deg);
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 24px;
  font-family: "Times New Roman", serif;
  font-size: 12px;
  color: #333;
}

.brand-content[data-brand='lehman'] .resume-header {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 16px;
  font-size: 14px;
}

.brand-content[data-brand='lehman'] .resume-body ul {
  padding-left: 20px;
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.5;
}

.brand-content[data-brand='lehman'] .resume-scribble {
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #2563eb;
  transform: rotate(-12deg);
  font-size: 16px;
  font-weight: bold;
  margin-top: 40px;
  text-align: center;
  border: 2px solid #2563eb;
  padding: 4px;
  border-radius: 4px;
}

/* 10. Fire Sale (New) */
.brand-content[data-brand='lehman'] .card-sale {
  width: 200px;
  top: 35%;
  right: 20%;
  transform: rotate(-8deg);
  background: #fff;
  border: 4px solid #fcd34d;
  padding: 12px;
  text-align: center;
  font-family: sans-serif;
}

.brand-content[data-brand='lehman'] .sale-tag {
  background: #ef4444;
  color: white;
  display: inline-block;
  padding: 2px 8px;
  font-weight: bold;
  font-size: 10px;
  margin-bottom: 8px;
}

.brand-content[data-brand='lehman'] .sale-image {
  background: #eff6ff;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #1e40af;
}

.brand-content[data-brand='lehman'] .sale-details h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.brand-content[data-brand='lehman'] .sale-price {
  color: #9ca3af;
  font-size: 12px;
  text-decoration: line-through;
}

.brand-content[data-brand='lehman'] .sale-now {
  color: #ef4444;
  font-weight: 900;
  font-size: 16px;
  margin-top: 4px;
}


/* CSS for ryan */









/* STANDARDIZED HEADER SECTION */


/* STANDARDIZED BRAND PILLS */










/* Canvas */
.brand-content[data-brand='ryan'] .canvas-wrapper {
  width: 100%;
  height: 950px;
  position: relative;
  overflow: hidden;
  /* Sky Vibe */
  background-color: #0b46b9;
  background-image:
    radial-gradient(circle at 20% 30%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 10%),
    radial-gradient(circle at 80% 10%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 20%);
}

.brand-content[data-brand='ryan'] .pile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Generic Item Styles */
.brand-content[data-brand='ryan'] .scatter-item {
  position: absolute;
  border-radius: 2px;
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s;
  cursor: pointer;
  overflow: hidden;
}

.brand-content[data-brand='ryan'] .scatter-item:hover {
  transform: scale(1.05) translateY(-10px) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
  z-index: 50;
}

/* 1. The Boarding Pass (Utilitarian) */
.brand-content[data-brand='ryan'] .card-pass {
  width: 320px;
  top: 15%;
  left: 20%;
  transform: rotate(-5deg);
  background: white;
  color: black;
  display: flex;
  flex-direction: column;
  font-family: monospace;
}

.brand-content[data-brand='ryan'] .pass-header {
  background: var(--ryanair-blue);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.pass- .brand-content[data-brand='ryan'] .pass-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.brand-content[data-brand='ryan'] .pass-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
}

.brand-content[data-brand='ryan'] .pass-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ryanair-blue);
}

.brand-content[data-brand='ryan'] .pass-footer {
  padding: 15px;
  text-align: center;
}

.brand-content[data-brand='ryan'] .barcode {
  height: 40px;
  background: repeating-linear-gradient(90deg,
      #000,
      #000 2px,
      #fff 2px,
      #fff 4px);
  width: 80%;
  margin: 0 auto;
}

/* 2. The Deal Sticker (Loud) */
.brand-content[data-brand='ryan'] .card-deal {
  width: 220px;
  height: 220px;
  top: 20%;
  right: 20%;
  transform: rotate(15deg);
  background: var(--ryanair-yellow);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ryanair-blue);
  border: 8px solid white;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.brand-content[data-brand='ryan'] .deal-text {
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}

.brand-content[data-brand='ryan'] .deal-price {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}

.brand-content[data-brand='ryan'] .deal-sub {
  font-size: 14px;
  font-weight: 700;
  background: var(--ryanair-blue);
  color: white;
  padding: 4px 8px;
  margin-top: 10px;
  transform: rotate(-5deg);
}

/* 3. The Sassy Social Card */
.brand-content[data-brand='ryan'] .card-social {
  width: 300px;
  bottom: 25%;
  left: 35%;
  transform: rotate(2deg);
  background: white;
  padding: 24px;
  border: 1px solid #e1e8ed;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.brand-content[data-brand='ryan'] .social-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.brand-content[data-brand='ryan'] .social-avatar {
  width: 48px;
  height: 48px;
  background: var(--ryanair-blue);
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.brand-content[data-brand='ryan'] .social-names h4 {
  margin: 0;
  font-size: 15px;
  color: #14171a;
}

.brand-content[data-brand='ryan'] .social-names span {
  color: #657786;
  font-size: 13px;
}

.brand-content[data-brand='ryan'] .social-content {
  font-size: 18px;
  line-height: 1.4;
  color: #14171a;
  margin-bottom: 15px;
}

.brand-content[data-brand='ryan'] .social-image {
  width: 100%;
  height: 160px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  overflow: hidden;
  position: relative;
}

.brand-content[data-brand='ryan'] .social-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. The Plane Window (Icon) */
.brand-content[data-brand='ryan'] .card-window {
  width: auto;
  height: auto;
  bottom: 15%;
  right: 15%;
  transform: rotate(-10deg);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-content[data-brand='ryan'] .card-window:hover {
  transform: rotate(-10deg) scale(1.1) !important;
  box-shadow: none;
}

/* 5. Luggage Tag */
.brand-content[data-brand='ryan'] .card-tag {
  width: 100px;
  height: 180px;
  top: 45%;
  left: 10%;
  transform: rotate(30deg);
  background: var(--ryanair-yellow);
  border-top: 20px solid var(--ryanair-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  clip-path: polygon(20% 0%,
      80% 0%,
      100% 15%,
      100% 100%,
      0% 100%,
      0% 15%);
}

.brand-content[data-brand='ryan'] .tag-hole {
  width: 12px;
  height: 12px;
  background: #0b46b9;
  border-radius: 50%;
  margin-bottom: 10px;
}

.brand-content[data-brand='ryan'] .tag-text {
  font-size: 24px;
  font-weight: 900;
  color: var(--ryanair-blue);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
}

/* 6. Scratch Card */
.brand-content[data-brand='ryan'] .card-scratch {
  width: 240px;
  height: 140px;
  top: 55%;
  right: 40%;
  transform: rotate(-25deg);
  background: linear-gradient(135deg, #ffd700, #ffa500);
  border: 2px solid white;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-content[data-brand='ryan'] .scratch-title {
  font-size: 16px;
  font-weight: 900;
  color: red;
  text-transform: uppercase;
  background: white;
  padding: 4px;
}

.brand-content[data-brand='ryan'] .scratch-area {
  background: #ccc;
  flex: 1;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  font-family: monospace;
}

/* 7. Receipt (New) */
.brand-content[data-brand='ryan'] .card-receipt {
  width: 140px;
  top: 5%;
  left: 55%;
  transform: rotate(4deg);
  background: #fff;
  padding: 15px;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-top: 1px dashed #ccc;
  clip-path: polygon(0 0,
      100% 0,
      100% 98%,
      95% 100%,
      90% 98%,
      85% 100%,
      80% 98%,
      75% 100%,
      70% 98%,
      65% 100%,
      60% 98%,
      55% 100%,
      50% 98%,
      45% 100%,
      40% 98%,
      35% 100%,
      30% 98%,
      25% 100%,
      20% 98%,
      15% 100%,
      10% 98%,
      5% 100%,
      0 98%);
  color: #333;
}

.brand-content[data-brand='ryan'] .receipt-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* 8. Trumpet Sticker (New) */
.brand-content[data-brand='ryan'] .card-trumpet {
  width: 100px;
  height: 100px;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%) rotate(10deg);
  background: #fff;
  border-radius: 50%;
  border: 4px solid var(--ryanair-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 9. Measuring Tape (New) */
.brand-content[data-brand='ryan'] .card-tape {
  width: 400px;
  height: 40px;
  top: 35%;
  right: -80px;
  transform: rotate(45deg);
  background: #f1c933;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #000;
  letter-spacing: 1px;
  z-index: 5;
  background-image: repeating-linear-gradient(90deg,
      transparent,
      transparent 19px,
      #000 19px,
      #000 20px);
}

/* 10. Duty Free Mag (New) */
.brand-content[data-brand='ryan'] .card-mag {
  width: 130px;
  height: 170px;
  top: 65%;
  left: 5%;
  transform: rotate(-8deg);
  background: linear-gradient(135deg, #ff00cc, #333399);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-content[data-brand='ryan'] .mag-title {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}