/* ==========================================================================
   VNA Texas - Light Up A Life 2026
   Upload to: /convio_cors/templates/newwebsite/css/lul-2026.css
   Linked from the Luminate "Page Wrapper Meta" field.

   Everything is scoped under .lul-2026 so nothing here can leak into other
   Convio pages that share these stylesheets.
   ========================================================================== */

.lul-2026 {
  /* Winter-dusk palette. Deep VNA teal for night, candlelight amber for the
     one accent, pale blue-white paper. */
  --lul-night:   #07303B;
  --lul-night-2: #0C4453;
  --lul-teal:    #12819B;
  --lul-teal-dk: #0D6579;
  --lul-amber:   #D98A2B;
  --lul-glow:    #F2B95C;
  --lul-frost:   #F2F7F8;
  --lul-paper:   #FFFFFF;
  --lul-line:    #DCE7EA;
  --lul-text:    #1E3038;
  --lul-muted:   #5C7079;

  --lul-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --lul-sans:  "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --lul-r:    14px;
  --lul-r-lg: 22px;
  --lul-shadow:    0 8px 26px rgba(7, 48, 59, .07);
  --lul-shadow-up: 0 20px 50px rgba(7, 48, 59, .14);

  font-family: var(--lul-sans);
  color: var(--lul-text);
  background: var(--lul-frost);
}

.lul-2026 main { background: var(--lul-frost); }

.lul-2026 ::selection { background: var(--lul-glow); color: var(--lul-night); }

.lul-2026 *:focus-visible {
  outline: 3px solid var(--lul-glow);
  outline-offset: 2px;
  border-radius: 4px;
}

.lul-hide { display: none !important; }


/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.lul-2026 .lul-hero {
  position: relative;
  overflow: hidden;
  background: var(--lul-night);
  padding: 0;
}

.lul-hero__media { position: relative; line-height: 0; }

.lul-hero__img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 540px);
  object-fit: cover;
  object-position: center 40%;
}

/* Top scrim keeps the fixed site nav legible; bottom scrim carries the type. */
.lul-hero__media::before,
.lul-hero__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.lul-hero__media::before {
  top: 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(7, 48, 59, .55), rgba(7, 48, 59, 0));
}
.lul-hero__media::after {
  bottom: 0;
  height: 85%;
  background: linear-gradient(to top,
    rgba(7, 48, 59, .92) 0%,
    rgba(7, 48, 59, .72) 32%,
    rgba(7, 48, 59, .18) 70%,
    rgba(7, 48, 59, 0) 100%);
}

.lul-hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px clamp(28px, 4vw, 54px);
  text-align: center;
}

.lul-hero__copy {
  max-width: 760px;
  margin: 0 auto;
}

/* The single amber hairline - a candle wick above the title. */
.lul-hero__rule {
  display: block;
  width: 1px;
  height: clamp(28px, 4vw, 48px);
  margin: 0 auto 18px;
  background: linear-gradient(to bottom, rgba(242, 185, 92, 0), var(--lul-glow));
}
.lul-hero__rule::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 0 0 -3px;
  border-radius: 50%;
  background: var(--lul-glow);
  box-shadow: 0 0 18px 4px rgba(242, 185, 92, .65);
}

.lul-hero__eyebrow {
  margin: 0 0 10px;
  font-family: var(--lul-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lul-glow);
}

.lul-2026 .lul_title,
.lul-2026 h1.lul_title {
  margin: 0;
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(7, 48, 59, .6);
}

.lul-hero__sub {
  margin: 14px auto 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.lul-hero__sub:empty { display: none; }

@media (max-width: 575.98px) {
  .lul-hero__img { height: 340px; object-position: center 35%; }
  .lul-hero__inner { position: static; padding: 0 20px 34px; background: var(--lul-night); margin-top: -1px; }
  .lul-hero__media::after { height: 55%; }
}


/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */

.lul-2026 .lul-shell {
  padding: clamp(38px, 5vw, 70px) 20px clamp(52px, 6vw, 88px);
}
.lul-2026 .lul-shell__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.lul-2026 .lul-section-title {
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--lul-night);
  margin: 0 0 6px;
}
.lul-2026 .lul-section-lede {
  margin: 0 0 30px;
  color: var(--lul-muted);
  font-size: 15.5px;
}


/* --------------------------------------------------------------------------
   3. Intro (catalog page only - lives in the Luminate store header)
   -------------------------------------------------------------------------- */

/* The store has one HTML template shared by every page in the flow, so the
   intro block renders on the detail and cart pages too. Hide it by default and
   let the JS reveal it by adding .lul-page--catalog to the root. Hiding first
   avoids the intro flashing in and then vanishing on the inner pages. */
.lul-2026 .lul-intro { display: none; }
.lul-2026.lul-page--catalog .lul-intro { display: block; }

.lul-2026 .lul-intro {
  max-width: 700px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.lul-2026 .lul-intro h2 {
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.28;
  color: var(--lul-night);
  margin: 0 0 18px;
}

.lul-2026 .lul-intro p {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--lul-text);
  margin: 0 0 16px;
}
.lul-2026 .lul-intro p:last-child { margin-bottom: 0; }

.lul-2026 .lul-intro strong { font-weight: 600; color: var(--lul-night); }

/* Ordered, because the flow really is a sequence. */
.lul-2026 .lul-steps {
  list-style: none;
  counter-reset: lulstep;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 760px;
  margin: 34px auto 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--lul-line);
}

.lul-2026 .lul-steps li {
  counter-increment: lulstep;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lul-muted);
}

.lul-2026 .lul-steps li::before {
  content: counter(lulstep);
  display: block;
  margin: 0 auto 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--lul-glow);
  color: var(--lul-amber);
  font-family: var(--lul-serif);
  font-size: 13px;
  line-height: 28px;
  text-align: center;
}

.lul-2026 .lul-steps b {
  display: block;
  font-family: var(--lul-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--lul-night);
  margin-bottom: 2px;
}

@media (max-width: 575.98px) {
  .lul-2026 .lul-steps { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .lul-2026 .lul-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 0; }
  .lul-2026 .lul-steps li::before { margin: 0; }
}


/* --------------------------------------------------------------------------
   4. Progress rail (inner pages)
   -------------------------------------------------------------------------- */

.lul-2026 .lul-rail {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 20px;
  background: var(--lul-paper);
  border-bottom: 1px solid var(--lul-line);
  list-style: none;
}

.lul-2026 .lul-rail li {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9BAAB1;
}
.lul-2026 .lul-rail li + li::before {
  content: "";
  width: 26px;
  height: 1px;
  margin: 0 12px;
  background: var(--lul-line);
}
.lul-2026 .lul-rail li.is-current { color: var(--lul-night); }
.lul-2026 .lul-rail li.is-done { color: var(--lul-teal); }

@media (max-width: 575.98px) {
  .lul-2026 .lul-rail li { font-size: 10.5px; letter-spacing: .08em; }
  .lul-2026 .lul-rail li + li::before { width: 12px; margin: 0 7px; }
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.lul-2026 .lul-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--lul-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--lul-teal);
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.lul-2026 .lul-btn:hover,
.lul-2026 .lul-btn:focus {
  background: var(--lul-teal-dk);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(18, 129, 155, .28);
}
.lul-2026 .lul-btn:active { transform: translateY(0); }

.lul-2026 .lul-btn--primary { background: var(--lul-teal); }

.lul-2026 .lul-btn--ghost {
  background: transparent;
  color: var(--lul-teal-dk);
  border-color: #BFD6DC;
}
.lul-2026 .lul-btn--ghost:hover,
.lul-2026 .lul-btn--ghost:focus {
  background: rgba(18, 129, 155, .07);
  color: var(--lul-teal-dk);
  border-color: var(--lul-teal);
  box-shadow: none;
}

.lul-2026 .lul-btn--link {
  background: none;
  border: 0;
  min-height: 0;
  padding: 10px 8px;
  color: var(--lul-muted);
  font-weight: 400;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lul-2026 .lul-btn--link:hover,
.lul-2026 .lul-btn--link:focus {
  background: none;
  color: var(--lul-night);
  transform: none;
  box-shadow: none;
}

.lul-2026 .lul-btn--block { width: 100%; }


/* --------------------------------------------------------------------------
   6. Product grid (catalog)
   -------------------------------------------------------------------------- */

.lul-2026 .lul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}

.lul-2026 .lul-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  overflow: hidden;
  box-shadow: var(--lul-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lul-2026 .lul-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lul-shadow-up);
  border-color: #C9DDE2;
}

/* Every card's media is the same 4:3 box, whatever kind of image is in it, so
   the titles start on the same line and the cards end up the same height.
   4:3 is slightly narrower than the ornament photos, which means cover crops a
   little off the sides and keeps the full height - the crystal's point stays
   in frame. */
.lul-2026 .lul-card__media {
  position: relative;
  padding: 14px 14px 0;
  background: var(--lul-paper);
  text-align: center;
  overflow: hidden;
}

.lul-2026 .lul-card__media a { display: block; line-height: 0; }
.lul-2026 .lul-card__media br { display: none; }

.lul-2026 .lul-card__img {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  background: var(--lul-frost);
}

/* Products with no cover photo (logo art, transparent PNGs) get contained so
   nothing is cropped, on the same size box. */
.lul-2026 .lul-card__media:not(.lul-card__media--cover) .lul-card__img {
  object-fit: contain;
  background:
    radial-gradient(115% 90% at 50% 8%, rgba(242, 185, 92, .18) 0%, rgba(242, 185, 92, 0) 62%),
    var(--lul-frost);
}

.lul-2026 .lul-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px 0;
}

.lul-2026 .lul-card__title { margin: 0; }
.lul-2026 .lul-card__title a { text-decoration: none; }
.lul-2026 .lul-card__title a:hover .lul-card__heading { color: var(--lul-teal-dk); }

.lul-2026 .lul-card__heading {
  margin: 0;
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--lul-night);
  transition: color .18s ease;
}

.lul-2026 .lul-card__desc {
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--lul-muted);
}

.lul-2026 .lul-card__foot {
  margin-top: auto;
  padding: 20px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lul-2026 .lul-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--lul-line);
}

.lul-2026 .lul-price-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lul-muted);
}

.lul-2026 .lul-price,
.lul-2026 .ShoppingPrice {
  font-family: var(--lul-serif);
  font-size: 1.28rem;
  color: var(--lul-amber);
}

.lul-2026 .lul-card__buy { margin: 0; }
.lul-2026 .lul-card__buy .lul-btn { width: 100%; }
.lul-2026 .lul-card__buy .catalog-product-quantity { display: none; }


/* Photographic covers get a slow zoom on hover; contained logo art does not. */
.lul-2026 .lul-card__media--cover .lul-card__img {
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.lul-2026 .lul-card:hover .lul-card__media--cover .lul-card__img { transform: scale(1.045); }


/* Full-width cover band on the product detail page */
.lul-2026 .lul-cover {
  margin: 0 0 clamp(26px, 3.5vw, 44px);
  border-radius: var(--lul-r-lg);
  overflow: hidden;
  background: var(--lul-night);
  line-height: 0;
  box-shadow: var(--lul-shadow);
}
.lul-2026 .lul-cover img {
  display: block;
  width: 100%;
  height: clamp(190px, 25vw, 340px);
  object-fit: cover;
  object-position: center;
}


/* --------------------------------------------------------------------------
   7. Catalog footer actions
   -------------------------------------------------------------------------- */

.lul-2026 .lul-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--lul-line);
}


/* --------------------------------------------------------------------------
   8. Product detail
   -------------------------------------------------------------------------- */

.lul-2026 .lul-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
}

@media (max-width: 861.98px) {
  .lul-2026 .lul-detail { grid-template-columns: 1fr; }
}

/* No product photo in the long description - the cover band carries the image,
   so the panel gets the full width instead of sitting next to an empty box. */
.lul-2026 .lul-detail--nomedia {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
.lul-2026 .lul-detail--nomedia .lul-detail__media { display: none; }

.lul-2026 .lul-detail__media {
  position: sticky;
  top: 108px;
  padding: clamp(26px, 4vw, 44px);
  background:
    radial-gradient(110% 80% at 50% 6%, rgba(242, 185, 92, .22) 0%, rgba(242, 185, 92, 0) 60%),
    var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
  text-align: center;
}
@media (max-width: 861.98px) {
  .lul-2026 .lul-detail__media { position: static; }
}

.lul-2026 .lul-detail__media img,
.lul-2026 .main_lul_product {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--lul-r);
}

.lul-2026 .lul-detail__panel { min-width: 0; }

.lul-2026 .lul-detail__panel .lul-product__title,
.lul-2026 .lul-detail__panel h4 {
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.24;
  color: var(--lul-night);
  margin: 0 0 14px;
}

.lul-2026 .lul-detail__panel .lul-product__lede,
.lul-2026 .lul-detail__panel .lul-product__copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--lul-text);
  margin: 0 0 16px;
}

.lul-2026 .lul-product__facts {
  list-style: none;
  margin: 0 0 26px;
  padding: 18px 0 0;
  border-top: 1px solid var(--lul-line);
  display: grid;
  gap: 10px;
}
.lul-2026 .lul-product__facts li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lul-text);
}
.lul-2026 .lul-product__facts b {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lul-muted);
  padding-top: 3px;
}
@media (max-width: 480px) {
  .lul-2026 .lul-product__facts li { grid-template-columns: 1fr; gap: 2px; }
}


/* --------------------------------------------------------------------------
   9. Configure form
   -------------------------------------------------------------------------- */

.lul-2026 .lul-form {
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
}

.lul-2026 .lul-price-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lul-line);
}
.lul-2026 .lul-price-block__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lul-muted);
}
.lul-2026 .lul-price-block__amt {
  font-family: var(--lul-serif);
  font-size: 1.75rem;
  color: var(--lul-amber);
}

.lul-2026 .lul-form__section {
  display: block;
  margin: 26px 0 14px;
  font-family: var(--lul-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lul-night);
}
.lul-2026 .lul-form__section:first-child { margin-top: 0; }

/* Convio wraps each field in <div class="row">, which is a Bootstrap flex
   container - that is what was putting the label and the select side by side
   and squeezing both. Force it back to a plain stacked block and cancel
   Bootstrap's negative gutters. */
.lul-2026 .lul-field {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
}
.lul-2026 .lul-field::before,
.lul-2026 .lul-field::after { content: none; }

.lul-2026 .lul-field__control { width: 100%; }

.lul-2026 .lul-field__label,
.lul-2026 .lul-form label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--lul-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lul-night);
}
.lul-2026 .lul-form label h5 { font: inherit; margin: 0; }

/* The asterisk is moved inside its <label> by the JS so it sits on the same
   line as the field name instead of stranded above it. */
.lul-2026 .lul-req {
  color: var(--lul-amber);
  margin-right: 4px;
  font-weight: 600;
}

.lul-2026 .lul-input,
.lul-2026 .lul-select,
.lul-2026 .lul-form input[type="text"],
.lul-2026 .lul-form input[type="email"],
.lul-2026 .lul-form input[type="tel"],
.lul-2026 .lul-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  background: var(--lul-paper);
  border: 1px solid #C7D7DC;
  border-radius: 10px;
  font-family: var(--lul-sans);
  font-size: 16px;
  color: var(--lul-text);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.lul-2026 .lul-form select,
.lul-2026 .lul-select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C7079' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.lul-2026 .lul-input:focus,
.lul-2026 .lul-select:focus,
.lul-2026 .lul-form input:focus,
.lul-2026 .lul-form select:focus {
  border-color: var(--lul-teal);
  box-shadow: 0 0 0 3px rgba(18, 129, 155, .14);
  outline: none;
}

.lul-2026 .lul-hint,
.lul-2026 .Hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lul-muted);
}

.lul-2026 .lul-note,
.lul-2026 #us_shipping_only {
  margin: 18px 0 0;
  padding: 12px 15px;
  background: var(--lul-frost);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lul-muted);
}
.lul-2026 #us_shipping_only label { font-weight: 400; font-size: 13px; color: var(--lul-muted); margin: 0; }

/* Signature element: a live preview of the engraved dove. */
.lul-2026 .lul-plate {
  margin: 14px 0 0;
  padding: 20px 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(242, 185, 92, .20) 0%, rgba(242, 185, 92, 0) 70%),
    var(--lul-night);
  border-radius: 14px;
  text-align: center;
}
.lul-2026 .lul-plate__label {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 185, 92, .85);
}
.lul-2026 .lul-plate__name {
  display: block;
  min-height: 1.5em;
  font-family: var(--lul-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
  line-height: 1.4;
  color: #fff;
  word-break: break-word;
  text-shadow: 0 0 22px rgba(242, 185, 92, .35);
}
.lul-2026 .lul-plate__name.is-empty { color: rgba(255, 255, 255, .32); font-style: italic; }

.lul-2026 .lul-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--lul-line);
}
.lul-2026 .lul-form__actions .lul-btn--primary { flex: 1 1 220px; }
.lul-2026 .lul-form__actions .lul-btn--ghost { flex: 1 1 160px; }
.lul-2026 .lul-form__actions .lul-btn--link { flex: 0 0 auto; margin-left: auto; }


/* --------------------------------------------------------------------------
   10. Cart / checkout

   The JS strips Convio's Bootstrap grid classes off this markup first, so
   everything below styles plain divs. Convio sets label typography with ID
   selectors, which outrank any class selector we can write - the !important
   flags on the totals are there for that reason, not out of laziness.
   -------------------------------------------------------------------------- */

.lul-2026 .lul-cartmsg {
  margin: 0 0 26px;
  padding: 15px 18px;
  background: rgba(18, 129, 155, .07);
  border: 1px solid rgba(18, 129, 155, .22);
  border-left: 3px solid var(--lul-teal);
  border-radius: 10px;
  color: var(--lul-night);
  font-size: 15px;
}
.lul-2026 .lul-cartmsg div { margin: 0; }

.lul-2026 .lul-errmsg {
  margin: 0 0 26px;
  padding: 15px 18px;
  background: rgba(217, 138, 43, .09);
  border: 1px solid rgba(217, 138, 43, .3);
  border-left: 3px solid var(--lul-amber);
  border-radius: 10px;
  color: #7A4A0C;
  font-size: 15px;
}

.lul-2026 .lul-cart {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
  overflow: hidden;
}

.lul-2026 .lul-cart__head {
  margin: 0;
  padding: 18px 26px;
  background: var(--lul-frost);
  border-bottom: 1px solid var(--lul-line);
}
.lul-2026 .lul-cart__head h3 {
  margin: 0;
  font-family: var(--lul-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lul-night);
}

/* One item = left column of detail, right column of price. */
.lul-2026 .lul-cart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: start;
  margin: 0;
  padding: 26px;
  border-bottom: 1px solid var(--lul-line);
}

.lul-2026 .lul-cart__main { min-width: 0; }

.lul-2026 .lul-cart__name {
  display: block;
  margin: 0 0 12px;
  font-family: var(--lul-serif);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--lul-night);
}

.lul-2026 .lul-cart__price {
  text-align: right;
  white-space: nowrap;
}
.lul-2026 .lul-cart__price p {
  margin: 0;
  font-family: var(--lul-serif);
  font-size: 1.25rem;
  color: var(--lul-amber);
}

.lul-2026 .lul-cart__config { margin: 0 0 14px; }
.lul-2026 .lul-cart__config > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 4px;
}
.lul-2026 .CartItemConfigLabel {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lul-muted);
}
.lul-2026 .CartItemConfigLabel::after { content: ":"; }
.lul-2026 .CartItemConfigValue {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--lul-text);
}

.lul-2026 .lul-cart__edit {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lul-teal-dk);
  font-family: var(--lul-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lul-2026 .smaller.fulfillment { margin: 0 0 14px; }
.lul-2026 .lul-cart__info p:empty { display: none; }

.lul-2026 .lul-cart__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.lul-2026 .lul-cart__qty .quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lul-2026 .lul-cart__qty .remove_btn { margin: 0; }
.lul-2026 .lul-cart__qty input[type="text"] {
  width: 62px;
  min-height: 42px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #C7D7DC;
  border-radius: 8px;
  font-size: 15px;
}

/* Totals */
.lul-2026 .lul-cart__totals {
  padding: 20px 26px 24px;
  background: var(--lul-frost);
}

.lul-2026 .lul-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
}
.lul-2026 .lul-total:last-child { margin-bottom: 0; }

.lul-2026 .lul-total__label { flex: 1 1 auto; min-width: 0; }
.lul-2026 .lul-total__value { flex: 0 0 auto; text-align: right; }
.lul-2026 .lul-total > div > div { margin: 0; }

/* Convio wraps the grand total's label one level deeper than the other lines */
.lul-2026 .lul-total .total-label { margin: 0; padding: 0; }

.lul-2026 .lul-total .cart-label-container,
.lul-2026 .lul-total .cart-label-container label {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--lul-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--lul-muted) !important;
}

.lul-2026 .lul-total .cart-summary-container {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--lul-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-align: right !important;
  color: var(--lul-text) !important;
}

.lul-2026 .lul-total__input {
  width: 120px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #C7D7DC;
  border-radius: 8px;
  font-size: 15px;
  text-align: right;
}

.lul-2026 .lul-total--final {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lul-line);
}
.lul-2026 .lul-total--final .cart-label-container {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--lul-night) !important;
}
.lul-2026 .lul-total--final .cart-summary-container {
  font-family: var(--lul-serif) !important;
  font-size: 1.5rem !important;
  color: var(--lul-amber) !important;
}

.lul-2026 .lul-cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
}
.lul-2026 .lul-cart__actions .lul-btn--primary { flex: 1 1 240px; order: 3; }
.lul-2026 .lul-cart__actions .lul-btn--ghost { flex: 1 1 180px; order: 2; }
.lul-2026 .lul-cart__actions .lul-btn--link { order: 1; }

@media (max-width: 575.98px) {
  .lul-2026 .lul-cart__row { grid-template-columns: 1fr; padding: 20px; }
  .lul-2026 .lul-cart__price { text-align: left; }
  .lul-2026 .lul-cart__totals { padding: 18px 20px 22px; }
  .lul-2026 .lul-cart__actions .lul-btn--primary,
  .lul-2026 .lul-cart__actions .lul-btn--ghost { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   10b. Review panels (billing + confirmation)
   -------------------------------------------------------------------------- */

.lul-2026 .lul-cart__qtybadge {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--lul-muted);
}

.lul-2026 .lul-review {
  margin: 26px 0 0;
  padding: clamp(20px, 3vw, 28px);
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
}

.lul-2026 .lul-review__head { margin: 0 0 16px; }
.lul-2026 .lul-review__head strong {
  display: block;
  font-family: var(--lul-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lul-night);
}
.lul-2026 .lul-review__head div + div {
  margin-top: 6px;
  font-size: 14px;
  color: var(--lul-muted);
}

.lul-2026 .shipping-address-field {
  font-size: 15px;
  line-height: 1.65;
  color: var(--lul-text);
}

.lul-2026 .lul-kv {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lul-line);
}
.lul-2026 .lul-kv:last-child { border-bottom: 0; }

.lul-2026 .lul-kv__label,
.lul-2026 .lul-kv__label strong {
  font-family: var(--lul-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--lul-muted);
}
.lul-2026 .lul-kv__value {
  font-size: 15px;
  color: var(--lul-text);
  word-break: break-word;
}

@media (max-width: 575.98px) {
  .lul-2026 .lul-kv { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}

.lul-2026 .lul-thanks-note {
  max-width: 620px;
  margin: 0 0 30px;
}
.lul-2026 .lul-thanks-note p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--lul-text);
}

.lul-2026 .lul-btn--wide { flex: 1 1 260px; }

.lul-2026 .lul-page--billing .lul-form__actions,
.lul-2026 .lul-page--thanks .lul-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}
.lul-2026 .lul-page--billing .lul-form__actions .lul-btn--primary { order: 3; }
.lul-2026 .lul-page--billing .lul-form__actions .lul-btn--ghost { order: 2; }
.lul-2026 .lul-page--billing .lul-form__actions .lul-btn--link { order: 1; }

/* the billing page's DonationForm carries no fields of its own */
.lul-2026 .lul-page--billing .DonationForm .lul-panel {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   11. Shipping / billing forms
   -------------------------------------------------------------------------- */

.lul-2026 .lul-panel {
  padding: clamp(24px, 3vw, 34px);
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
}

.lul-2026 .lul-panel input[type="text"],
.lul-2026 .lul-panel input[type="email"],
.lul-2026 .lul-panel input[type="tel"],
.lul-2026 .lul-panel input[type="password"],
.lul-2026 .lul-panel select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  background: var(--lul-paper);
  border: 1px solid #C7D7DC;
  border-radius: 10px;
  font-size: 16px;
  color: var(--lul-text);
}
.lul-2026 .lul-panel input:focus,
.lul-2026 .lul-panel select:focus {
  border-color: var(--lul-teal);
  box-shadow: 0 0 0 3px rgba(18, 129, 155, .14);
  outline: none;
}

.lul-2026 .lul-instructions {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--lul-muted);
}

/* Convio's Bootstrap classes are stripped off these by the JS, so the two
   columns come from here. Without that the col-lg-6 max-width capped every
   input at half the available width. */
.lul-2026 .Shipping_info_row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 18px;
  align-items: center;
  margin: 0 0 14px;
}
.lul-2026 .Shipping_info_row > div { min-width: 0; }
.lul-2026 .Shipping_info_row .ungrouped { display: block; }
.lul-2026 .Shipping_info_row label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lul-night);
}

@media (max-width: 700px) {
  .lul-2026 .Shipping_info_row { grid-template-columns: 1fr; gap: 6px; }
}

/* Convio marks required fields with styling that lived in the stylesheets we
   remove, so the markers come back from here instead. */
.lul-2026 .cons-info-question-container.field-required .input-label::after {
  content: " *";
  color: var(--lul-amber);
  font-weight: 600;
}
.lul-2026 .cons-info-question-container .field-required:empty { display: none; }
.lul-2026 .sub-section-container { margin: 0 0 8px; }
.lul-2026 .sub-section-body { padding: 0; }

.lul-2026 .summary-section-header,
.lul-2026 .transaction-summer-header {
  margin: 30px 0 12px;
  font-family: var(--lul-serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--lul-night);
}

.lul-2026 .ErrorMessage,
.lul-2026 .ErrorMsg {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: rgba(217, 138, 43, .09);
  border-left: 3px solid var(--lul-amber);
  border-radius: 10px;
  color: #7A4A0C;
  font-size: 15px;
}


/* --------------------------------------------------------------------------
   12. Thank you
   -------------------------------------------------------------------------- */

.lul-2026 .lul-thanks {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(30px, 4vw, 48px);
  background: var(--lul-paper);
  border: 1px solid var(--lul-line);
  border-radius: var(--lul-r-lg);
  box-shadow: var(--lul-shadow);
}
.lul-2026 .lul-thanks .lul-section-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.lul-2026 .lul-thanks p { font-size: 16px; line-height: 1.75; color: var(--lul-text); }


/* --------------------------------------------------------------------------
   13. Housekeeping for Convio leftovers
   -------------------------------------------------------------------------- */

.lul-2026 .appArea { max-width: 100%; }
.lul-2026 .mobile-hide { display: block !important; }
.lul-2026 .aural-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.lul-2026 #store_header:empty,
.lul-2026 #browse_search_container:empty,
.lul-2026 .lul_giving_page,
.lul-2026 .lul_details_page,
.lul-2026 .lul_cart_checkout { display: none; }

.lul-2026 .catalog-product-table > form { margin: 0; }
.lul-2026 form#CatalogTop,
.lul-2026 form#CatalogBottom { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .lul-2026 * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .lul-2026 .lul-card:hover,
  .lul-2026 .lul-btn:hover,
  .lul-2026 .lul-card:hover .lul-card__media--cover .lul-card__img { transform: none; }
}