/* =============================================================
   HALO REDESIGN CSS
   =============================================================
   (This file is called generic.css because that's the stylesheet
   slot Tebex gives every template. It holds the Halo Redesign CSS
   and is loaded by head.twig on every page, after any Tebex theme,
   so the redesign looks the same in Preview and when live.)

   Section 0 below switches off the parts of Tebex's original
   generic.css that we don't want (Lato font, the default
   background photo, square corners).
   ============================================================= */

/* -------------------------------------------------------------
   0. SWITCH OFF TEBEX'S DEFAULT GENERIC LOOK
   ------------------------------------------------------------- */
body::before { content: none !important; display: none !important; }

/* =============================================================
   What this stylesheet covers
   =============================================================
   This stylesheet styles the things TEBEX builds itself:
     1. Tebex's colour settings (replacing its black defaults)
     2. Tebex's required legal footer bar
     3. Popups (login box, package popups, gift box)
     4. The basket drawer
     5. The price/buy box from package-actions.twig
     6. Little toast messages ("Added to basket")
   Our own pieces (header, sidebar, cards) are styled in layout.html.

   IMPORTANT: only CSS lives here. There is deliberately NO JavaScript
   that "fixes" Tebex's elements after they appear (no
   MutationObserver). That approach caused endless loading
   spinners before. Everything is done with CSS variables and
   rules that apply the moment Tebex adds its elements.

   Every text colour is checked for WCAG AA contrast.
   ============================================================= */


/* -------------------------------------------------------------
   1. TEBEX COLOUR SETTINGS
   Tebex's shared.css starts everything black (#000) and white
   text. These variables flip it to Halo pastels.
   ------------------------------------------------------------- */
:root {
  --color-bg: #FFFFFF;                /* main background of Tebex panels */
  --color-brighter-bg: #FFF8FA;       /* popups, cards */
  --color-text: #3A2E39;              /* dark plum text (12.9:1) */
  --color-text-darker: #3A2E39;
  --color-text-dark: #3A2E39;
  --color-text-secondary: #6B5A69;    /* softer text (6.4:1) */

  --color-primary: #A8406A;           /* deep pink buttons (white text 5.8:1) */
  --color-primary-hover: #8A3A5C;
  --color-primary-text: #FFFFFF;
  --color-primary-text-hover: #FFFFFF;

  --color-secondary: #FCDCE1;         /* pastel pink */
  --color-secondary-hover: #F8C6D1;
  --color-secondary-text: #3A2E39;
  --color-secondary-text-hover: #3A2E39;

  --color-tertiary: transparent;
  --color-tertiary-hover: #FCDCE1;
  --color-tertiary-text: #A8406A;
  --color-tertiary-text-hover: #8A3A5C;

  --color-removed: #A8406A;
  --color-sale-banner-bg: #A8406A;
  --color-sale-banner-text: #FFFFFF;

  /* 2. Tebex's legal footer (must stay visible, so we just tint it) */
  --tebex-legal-footer-background-color: #FFF8FA;
  --tebex-legal-footer-border-color: #F3D3DC;
  --tebex-legal-footer-text-color: #3A2E39;
  --tebex-legal-footer-logo-color: #3A2E39;
}


/* -------------------------------------------------------------
   3. POPUPS (login box, package popup, gift box, options)
   ------------------------------------------------------------- */

/* The see-through layer behind a popup: soft pink blur, not black */
.popup {
  background-color: rgba(253, 240, 245, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.popup.may-close {
  background-color: rgba(253, 240, 245, 0.45);
}

/* The white box itself */
.popup-content {
  background: #FFF8FA;
  color: #3A2E39;
  border: 1px solid #F3D3DC;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(168, 64, 106, 0.18);
  font-family: 'Nunito', system-ui, sans-serif;
}

/* The "X" close button: bigger tap area, visible on light backgrounds */
.popup-close {
  width: 44px;
  height: 44px;
  top: 8px;
  right: 8px;
  z-index: 5;
  border-radius: 50%;
  opacity: 1;
}
.popup-close::before { background-color: #6B5A69; }
.popup-close:hover { background-color: #FCDCE1; }
.popup-close:hover::before { background-color: #8A3A5C; }

/* Loading spinner and drag handle in Halo colours */
.popup.popup-loading .popup-content::before { background-color: #A8406A; }
.drawer-up .popup-content::after, .drawer-down .popup-content::after,
.drawer-left .popup-content::after, .drawer-right .popup-content::after {
  background: #F3D3DC;
}

/* Form fields inside any popup */
.popup .store-form input[type=text],
.popup .store-form input[type=number],
.popup .store-form input[type=email],
.popup .store-form select,
.popup .store-form textarea {
  background: #FFFFFF;
  color: #3A2E39;
  border: 1.5px solid #9C6B84;
  border-radius: 12px;
  min-height: 44px;
}

/* ---- The login box (username.html) ----
   The same card is used in three places: the login popup, inside the
   bag drawer (guests) and as a full page. All three get the same
   width and spacing; only the top gap differs to clear the close button. */
.login-popup-content { max-width: 440px; padding: 0; }
.halo-login {                                         /* when opened as a full page */
  max-width: 440px; margin: 0 auto;
  background: #FFF8FA; border: 1px solid #F3D3DC; border-radius: 24px;
  box-shadow: 0 16px 40px rgba(168, 64, 106, 0.18);
}
.halo-login-card { text-align: center; max-width: 440px; margin: 0 auto; padding: 28px 24px 24px; }
.basket-popup-content > .halo-login-card { padding: 56px 24px 24px; }

/* Alex on a soft pastel circle with three still petals */
.halo-login-stage { position: relative; width: 170px; height: 140px; margin: 0 auto 12px; display: flex; justify-content: center; align-items: flex-end; }
.halo-login-stage::before {
  content: ""; position: absolute; left: 50%; top: 4px; width: 130px; height: 130px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FCDCE1 45%, #E6DDF2 78%, #C4DFE5 100%);
  box-shadow: 0 0 0 6px rgba(252, 220, 225, 0.45);
}
.halo-login-stage::after {   /* little shadow Alex stands on */
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 84px; height: 14px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(168, 64, 106, 0.22), rgba(168, 64, 106, 0) 70%);
}
.halo-login-petal { position: absolute; width: 14px; height: 11px; border-radius: 80% 10% 80% 10%;
  background: linear-gradient(135deg, #FFE4EC, #F4A9BE); box-shadow: inset -1px -1px 0 rgba(222, 127, 156, 0.35); }
.halo-login-petal:nth-child(1) { left: 6px; top: 22px; transform: rotate(-25deg); }
.halo-login-petal:nth-child(2) { right: 4px; top: 48px; width: 11px; height: 9px; transform: rotate(40deg); }
.halo-login-petal:nth-child(3) { left: 22px; bottom: 18px; width: 10px; height: 8px; transform: rotate(120deg); }
/* Skin renders are about 0.42 as wide as they are tall: set the HEIGHT only
   so they keep their real shape (a fixed width made Alex look squashed) */
/* (.halo-login-card in front so it beats Tebex's ".text-content img { height: auto }") */
.halo-login-card .halo-login-skin { position: relative; z-index: 1; display: block; height: 120px; width: auto; max-width: none; object-fit: contain; image-rendering: pixelated; }
.halo-login-title { font-family: var(--halo-display, 'Nunito'), 'Nunito', system-ui, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: #3A2E39; margin: 0 0 6px; }
.halo-login-text { font-size: 15px; color: #6B5A69; margin: 0 0 18px; }
.halo-login-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.halo-login-label { font-weight: 800; font-size: 15px; color: #3A2E39; }
.halo-login-help {
  font-size: 14px; color: #3A2E39; margin: 0 0 8px;
  background: #C4DFE5; border-radius: 12px; padding: 8px 12px;
}
.halo-login-help code {
  font-family: ui-monospace, Consolas, monospace; font-weight: 700;
  background: #FFFFFF; color: #336673; padding: 0 6px; border-radius: 6px;
}
.halo-login-go { width: 100%; }
/* Same text and field sizes in the popup and the drawer (the popup also
   gets Tebex's form styles, which made them smaller) */
.halo-login-card .halo-login-title { margin: 0 0 10px; }
.halo-login-card .halo-login-text { font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.halo-login-card .halo-login-form input[type=text] { font-size: 16px; min-height: 48px; padding: 10px 14px; }
.halo-login-card .halo-login-help { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.halo-login-card .halo-login-go { min-height: 48px; font-size: 16px; }


/* -------------------------------------------------------------
   4. THE BASKET DRAWER (checkout.html slides in from the right)
   ------------------------------------------------------------- */
.basket-popup-content {
  background: #FFF8FA;
  color: #3A2E39;
  border: none;
  border-left: 1px solid #F3D3DC;
  border-radius: 24px 0 0 24px;
  box-shadow: -10px 0 40px rgba(168, 64, 106, 0.15);
}
/* Loading spinner while the basket updates */
.basket-popup-content.updating::before { background-color: #A8406A; }
.basket-popup-content.updating > * { filter: none; opacity: 0.5; }

/* Title row: skin + "[name]'s Bag" */
.halo-basket-head {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 64px 18px 24px;            /* right space leaves room for the X close button */
  background: #FCDCE1;
  border-radius: 24px 0 0 0;
}
.halo-basket-skin { width: 48px; height: 48px; border-radius: 12px; image-rendering: pixelated; background: #FFFFFF; padding: 3px; }
.halo-basket-title { font-size: 22px; font-weight: 800; line-height: 1.2; color: #3A2E39; margin: 0; overflow-wrap: anywhere; }
.halo-basket-count { font-size: 14px; font-weight: 700; color: #6B5A69; margin: 0; }

/* The list of items */
.basket-content { flex: 1; overflow-y: auto; padding: 16px 20px; }
.halo-basket-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.halo-basket-item {
  display: flex; flex-direction: column; gap: 12px;
  background: #FFFFFF; border: 1px solid #F3D3DC; border-radius: 18px; padding: 14px 16px;
}
.halo-basket-name { font-size: 17px; font-weight: 800; margin: 0 0 2px; line-height: 1.25; }
.halo-basket-name a { color: #3A2E39; text-decoration: none; }
.halo-basket-name a:hover { color: #8A3A5C; text-decoration: underline; }
.halo-basket-meta { list-style: none; margin: 0 0 4px; padding: 0; font-size: 14px; color: #6B5A69; }
.halo-basket-meta li { display: block; }
.halo-basket-price { margin: 0; font-size: 18px; font-weight: 800; color: #8A3A5C; }
.halo-basket-price strong { font-weight: 800; }

.halo-basket-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Quantity: one pill with two equal round buttons inside it.
   The pill has 4px of padding, so the 44px circles sit fully inside
   its border instead of overlapping it. (The - and + signs are Tebex's
   own icons, drawn by shared.css.) */
.basket .halo-basket-item .halo-qty.quantity-field {
  --btn-size: 44px;
  --btn-icon-size: 14px;
  box-sizing: content-box;
  height: 44px;
  padding: 4px;
  gap: 4px;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #9C6B84;
  border-radius: 999px;
  overflow: visible;
}
.basket .halo-qty .adjust,
.basket .halo-qty .adjust.decrease,
.basket .halo-qty .adjust.increase {
  --btn-color-text: #8A3A5C; --btn-color-text-hover: #6B3550;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: none; border-radius: 50%; background: #FCDCE1;
}
.basket .halo-qty .adjust:hover { background: #F8C6D1; }
.basket .halo-qty .adjust:disabled { opacity: 0.4; }
.basket .halo-qty input.quantity {
  border: none; background: transparent; min-height: 0; height: 44px; line-height: 44px; width: 40px; min-width: 40px; padding: 0;
  font-weight: 800; font-size: 17px; color: #3A2E39; text-align: center;
}

/* Remove link: a real word, not just an icon */
.halo-remove {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 800; font-size: 14px; color: #A8406A; text-decoration: underline; text-underline-offset: 3px;
  border-radius: 999px;
}
.halo-remove:hover { color: #8A3A5C; background: #FCDCE1; }

/* Empty bag */
.halo-basket-empty { text-align: center; padding: 40px 12px; color: #6B5A69; }
.halo-basket-empty strong { color: #3A2E39; font-size: 18px; }
.halo-basket-empty p { margin: 0 0 6px; }
.halo-basket-empty-icon { display: block; margin: 0 auto 10px; image-rendering: pixelated; }

/* Reassurance line under the items */
.halo-basket-reassure { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: #FFF8FA; text-align: center;
  font-size: 14px; font-weight: 700; color: #3A2E39; }
.halo-basket-reassure span { white-space: nowrap; }  /* each half stays on one line */

/* Footer: total + checkout */
.halo-basket-foot.basket-checkout {
  margin-top: 0;
  padding: 18px 20px 28px;
  background: #FFFFFF;
  border-top: 1px solid #F3D3DC;
}
.halo-basket-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; font-size: 16px; font-weight: 800; color: #3A2E39;
}
.halo-basket-total-price, .halo-basket-total-price strong { font-size: 26px; font-weight: 800; color: #8A3A5C; }
.halo-basket-go.btn-primary {
  width: 100%; min-height: 52px; font-size: 17px; border-radius: 999px;
}
.halo-basket-note { font-size: 14px; color: #6B5A69; text-align: center; margin: 10px 0 0; }
.halo-basket-bedrock { background: #C4DFE5; color: #3A2E39; border-radius: 12px; padding: 8px 12px; text-align: left; }
/* Tebex's shared.css styles ".basket .basket-header" and ".basket .basket-item"
   (two class names), which beats the rules above. These match that
   strength and come later, so the pastel look wins:
   - no grey title bar, skin and name sit together on the left
   - item text left-aligned instead of centred */
.basket .halo-basket-head {
  background: #FCDCE1;
  justify-content: flex-start;
  padding: 22px 64px 18px 24px;
  font-size: inherit;
}
.basket .halo-basket-item { align-items: stretch; text-align: left; }
.basket .halo-basket-info { text-align: left; }
.basket .halo-basket-controls { justify-content: space-between; }

/* Empty bag in the drawer. When the bag is empty, Tebex's script shows its
   own one-line message (".basket-empty", worded in constants.twig) instead
   of checkout.html, so the backpack pixel icon is added here with CSS. */
.basket .basket-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #3A2E39; font-weight: 800; font-size: 18px;
}
.basket .basket-empty::before {
  content: ""; width: 96px; height: 96px; border-radius: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%236B3550' d='M11 1h2v1h-2zM9 2h2v1h-2zM13 2h2v1h-2zM8 3h1v1h-1zM15 3h1v1h-1zM8 4h8v1h-8zM7 5h1v1h-1zM16 5h1v1h-1zM6 6h1v1h-1zM17 6h1v1h-1zM5 7h1v1h-1zM18 7h1v1h-1zM4 8h2v1h-2zM18 8h2v1h-2zM3 9h1v1h-1zM5 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM3 10h1v1h-1zM5 10h1v1h-1zM18 10h1v1h-1zM20 10h1v1h-1zM3 11h1v1h-1zM5 11h1v1h-1zM11 11h2v1h-2zM18 11h1v1h-1zM20 11h1v1h-1zM3 12h1v1h-1zM5 12h3v1h-3zM10 12h1v1h-1zM13 12h1v1h-1zM16 12h3v1h-3zM20 12h1v1h-1zM3 13h1v1h-1zM5 13h1v1h-1zM8 13h3v1h-3zM13 13h3v1h-3zM18 13h1v1h-1zM20 13h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM11 14h2v1h-2zM18 14h1v1h-1zM20 14h1v1h-1zM3 15h1v1h-1zM5 15h1v1h-1zM7 15h10v1h-10zM18 15h1v1h-1zM20 15h1v1h-1zM3 16h1v1h-1zM5 16h2v1h-2zM17 16h2v1h-2zM20 16h1v1h-1zM3 17h1v1h-1zM5 17h2v1h-2zM17 17h2v1h-2zM20 17h1v1h-1zM3 18h1v1h-1zM5 18h2v1h-2zM17 18h2v1h-2zM20 18h1v1h-1zM3 19h1v1h-1zM5 19h2v1h-2zM17 19h2v1h-2zM20 19h1v1h-1zM4 20h16v1h-16zM7 21h1v1h-1zM16 21h1v1h-1zM8 22h8v1h-8z'/%3E%3Cpath fill='%23F4EFFB' d='M11 2h2v1h-2zM9 3h2v1h-2zM13 3h2v1h-2zM4 9h1v1h-1zM19 9h1v1h-1zM4 10h1v1h-1zM4 11h1v1h-1zM4 12h1v1h-1zM4 13h1v1h-1zM6 13h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM4 15h1v1h-1zM6 15h1v1h-1zM4 16h1v1h-1zM7 16h10v1h-10zM4 17h1v1h-1zM7 17h1v1h-1zM4 18h1v1h-1zM7 18h1v1h-1zM4 19h1v1h-1zM7 19h1v1h-1zM8 21h1v1h-1z'/%3E%3Cpath fill='%23BFA9E0' d='M11 3h2v1h-2zM19 10h1v1h-1zM19 11h1v1h-1zM19 12h1v1h-1zM17 13h1v1h-1zM19 13h1v1h-1zM17 14h1v1h-1zM19 14h1v1h-1zM17 15h1v1h-1zM19 15h1v1h-1zM19 16h1v1h-1zM16 17h1v1h-1zM19 17h1v1h-1zM16 18h1v1h-1zM19 18h1v1h-1zM8 19h9v1h-9zM19 19h1v1h-1zM9 21h7v1h-7z'/%3E%3Cpath fill='%23FFF0F3' d='M8 5h8v1h-8zM7 6h1v1h-1zM16 6h1v1h-1zM6 7h1v1h-1zM17 7h1v1h-1zM6 8h1v1h-1zM6 9h1v1h-1zM6 10h1v1h-1zM6 11h1v1h-1zM8 12h1v1h-1z'/%3E%3Cpath fill='%23FCDCE1' d='M8 6h8v1h-8zM7 7h10v1h-10zM7 8h10v1h-10zM7 9h10v1h-10zM7 10h10v1h-10zM8 11h3v1h-3zM13 11h3v1h-3z'/%3E%3Cpath fill='%23F0AABD' d='M17 8h1v1h-1zM17 9h1v1h-1zM17 10h1v1h-1zM7 11h1v1h-1zM16 11h2v1h-2zM9 12h1v1h-1zM14 12h2v1h-2z'/%3E%3Cpath fill='%23FFF2C9' d='M11 12h2v1h-2zM11 13h1v1h-1z'/%3E%3Cpath fill='%23E6DDF2' d='M7 13h1v1h-1zM16 13h1v1h-1zM7 14h4v1h-4zM13 14h4v1h-4zM8 17h8v1h-8zM8 18h8v1h-8z'/%3E%3Cpath fill='%23E2B65E' d='M12 13h1v1h-1z'/%3E%3C/svg%3E") center / 72px no-repeat, linear-gradient(140deg, #E6DDF2, #C4DFE5);
  image-rendering: pixelated; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Hide total + checkout once the last item is removed (no page reload) */
.basket-popup-content:has(.halo-basket-empty) .halo-basket-foot { display: none; }

@media (max-width: 600px) {
  .basket-popup-content { border-radius: 0; max-width: 100%; }
  .basket .halo-basket-head { border-radius: 0; padding: 18px 60px 14px 16px; }
  .basket-content { padding: 12px; }
}


/* -------------------------------------------------------------
   5. PRICE + BUY BOX (package-actions.twig)
   That file has its own inline colours which fail contrast
   (white on #e891b5 = 2.4:1). We can't edit the file, so these
   rules use !important to win over its inline styles.
   ------------------------------------------------------------- */
.product-actions {
  background: #FFFFFF !important;
  border: 1px solid #F3D3DC !important;
  border-radius: 18px !important;
  padding: 16px !important;
  flex-wrap: wrap !important;
}
.product-actions .price {
  color: #8A3A5C !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}
.product-actions .price del,
.product-actions .discount { color: #6B5A69 !important; }
.product-actions .btn-primary,
.product-actions a.add,
.product-actions a.subscribe,
.product-actions .open-basket:not(.btn-secondary) {
  background: #A8406A !important;
  color: #FFFFFF !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}
.product-actions [hidden] { display: none !important; }
.product-actions .btn-primary:hover,
.product-actions a.add:hover,
.product-actions a.subscribe:hover { background: #8A3A5C !important; }
.product-actions .btn-secondary,
.product-actions .gift {
  background: #FFFFFF !important;
  color: #A8406A !important;
  border: 1.5px solid #9C6B84 !important;
  min-height: 44px !important;
}
.product-actions .adjust {
  --btn-size: 44px;
  --btn-icon-size: 14px;
  --btn-color-text: #8A3A5C;
  width: 44px !important;
  height: 44px !important;
  font-size: 0 !important;      /* the file types a - and +; Tebex's icon is shown instead */
  color: transparent !important;
  background: #FCDCE1 !important;
  border: none !important;
  border-radius: 50% !important;
}
.product-actions .quantity-field {
  height: auto !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 1.5px solid #9C6B84 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
}
.product-actions input.quantity {
  color: #3A2E39 !important;
  border-color: #9C6B84 !important;
  min-height: 44px !important;
}


/* -------------------------------------------------------------
   6. TOAST MESSAGES (bottom of the screen)
   ------------------------------------------------------------- */
.toast {
  background: #FFFFFF;
  color: #3A2E39;
  border: 1px solid #F3D3DC;
  border-left: 6px solid #A8406A;
  border-radius: 16px;
  min-height: 52px;
  height: auto;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 10px 24px rgba(168, 64, 106, 0.18);
  font-weight: 700;
}
.toast.toast-success { background: #FFFFFF; border-left-color: #2E7D50; }
.toast.toast-warning { background: #FFFFFF; border-left-color: #B7791F; }
.toast.toast-error   { background: #FFFFFF; border-left-color: #A8406A; }
.toast-close { width: 44px; height: 44px; opacity: 1; border-radius: 50%; }
.toast-close::before { background-color: #6B5A69; }
.toast-close:hover { background-color: #FCDCE1; }


/* -------------------------------------------------------------
   7. SCROLLBAR (purely decorative)
   ------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FFF8FA; }
::-webkit-scrollbar-thumb { background: #E7B3C4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #A8406A; }


/* =========================================
   HALO SMP — WINGS CATEGORY IMAGE OVERRIDE
   ========================================= */

/* Only activate on the Wings category page */
.halo-card:has(#halo-pkg-7799135) .halo-packages > li {
  overflow: visible;
}

.halo-card:has(#halo-pkg-7799135) .halo-pkg {
  position: relative;
  overflow: visible;
  padding-top: 145px;
  margin-top: 65px;
}

/* Remove the original image box and let the image float */
.halo-card:has(#halo-pkg-7799135) .halo-pkg-media {
  position: absolute;
  top: -35px;
  left: 0;
  width: 100%;
  height: 150px;
  aspect-ratio: unset;
  overflow: visible;
  background: transparent;
  z-index: 2;
}

/* Enlarge the actual wing/skin image */
.halo-card:has(#halo-pkg-7799135) .halo-pkg-media img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  padding: 0;
  transform: scale(0.9);
  filter: drop-shadow(0 6px 8px rgba(107, 53, 80, 0.2));
}

/* Keep the image above the card's contents */
.halo-card:has(#halo-pkg-7799135) .halo-pkg-media {
  pointer-events: none;
}

/* Raise Pink Fire slightly */
article.halo-pkg:has(#halo-pkg-7799145) > .halo-pkg-media {
  top: -65px !important;
}

/* Slightly lower Leaf Wings */
article.halo-pkg:has(#halo-pkg-7799138) > .halo-pkg-media {
  top: -50px !important;
}