/* Brand color override: remap Tailwind purple-* palette to a custom brand purple
   centered on #663399 (was #9333EA). Loaded AFTER tailwind.css so these rules win
   on cascade. To roll back: remove the <link> tag in page_layout (or this file).

   Palette (tints/shades of #663399):
     50  #f7f5fa   400 #a385c2   800 #3d1f5c
    100  #f0ebf5   500 #855cae
    200  #d9cce6   600 #663399  <- target
    300  #c2add6   700 #52297a
*/

/* --- backgrounds --- */
.bg-purple-50   { background-color: rgb(247 245 250 / var(--tw-bg-opacity, 1)); }
.bg-purple-50\/30 { background-color: rgb(247 245 250 / 0.3); }
.bg-purple-100  { background-color: rgb(240 235 245 / var(--tw-bg-opacity, 1)); }
.bg-purple-600  { background-color: rgb(102  51 153 / var(--tw-bg-opacity, 1)); }

/* --- text --- */
.text-purple-400 { color: rgb(163 133 194 / var(--tw-text-opacity, 1)); }
.text-purple-500 { color: rgb(133  92 174 / var(--tw-text-opacity, 1)); }
.text-purple-600 { color: rgb(102  51 153 / var(--tw-text-opacity, 1)); }
.text-purple-700 { color: rgb( 82  41 122 / var(--tw-text-opacity, 1)); }
.text-purple-800 { color: rgb( 61  31  92 / var(--tw-text-opacity, 1)); }

/* --- borders --- */
.border-purple-100 { border-color: rgb(240 235 245 / var(--tw-border-opacity, 1)); }
.border-purple-200 { border-color: rgb(217 204 230 / var(--tw-border-opacity, 1)); }
.border-purple-300 { border-color: rgb(194 173 214 / var(--tw-border-opacity, 1)); }
.border-purple-400 { border-color: rgb(163 133 194 / var(--tw-border-opacity, 1)); }
.border-purple-500 { border-color: rgb(133  92 174 / var(--tw-border-opacity, 1)); }

/* --- gradients --- */
.from-purple-50 {
  --tw-gradient-from: #f7f5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 245 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* --- hover variants --- */
.hover\:border-purple-400:hover { border-color: rgb(163 133 194 / var(--tw-border-opacity, 1)); }
.hover\:border-purple-500:hover { border-color: rgb(133  92 174 / var(--tw-border-opacity, 1)); }
.hover\:bg-purple-50:hover      { background-color: rgb(247 245 250 / var(--tw-bg-opacity, 1)); }
.hover\:bg-purple-700:hover     { background-color: rgb( 82  41 122 / var(--tw-bg-opacity, 1)); }
.hover\:text-purple-700:hover   { color: rgb( 82  41 122 / var(--tw-text-opacity, 1)); }
.hover\:text-purple-800:hover   { color: rgb( 61  31  92 / var(--tw-text-opacity, 1)); }

/* --- focus rings --- */
.focus\:ring-purple-500:focus { --tw-ring-color: rgb(133  92 174 / var(--tw-ring-opacity, 1)); }

/* ============================================================
   Scoped exemption: .smd-brand-bright
   Regions marked with this class keep the ORIGINAL Tailwind
   purple palette (bright) — applied either directly on the
   element or to any descendant. Used for the hero pricing strip
   and the "Same dog. Totally different looks." transform panel.
   ============================================================ */

/* backgrounds (original) */
.smd-brand-bright.bg-purple-50,
.smd-brand-bright .bg-purple-50      { background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1)); }
.smd-brand-bright.bg-purple-100,
.smd-brand-bright .bg-purple-100     { background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); }

/* text (original) */
.smd-brand-bright.text-purple-400,
.smd-brand-bright .text-purple-400   { color: rgb(192 132 252 / var(--tw-text-opacity, 1)); }
.smd-brand-bright.text-purple-500,
.smd-brand-bright .text-purple-500   { color: rgb(168  85 247 / var(--tw-text-opacity, 1)); }
.smd-brand-bright.text-purple-600,
.smd-brand-bright .text-purple-600   { color: rgb(147  51 234 / var(--tw-text-opacity, 1)); }
.smd-brand-bright.text-purple-700,
.smd-brand-bright .text-purple-700   { color: rgb(126  34 206 / var(--tw-text-opacity, 1)); }
.smd-brand-bright.text-purple-800,
.smd-brand-bright .text-purple-800   { color: rgb(107  33 168 / var(--tw-text-opacity, 1)); }

/* borders (original) */
.smd-brand-bright.border-purple-100,
.smd-brand-bright .border-purple-100 { border-color: rgb(243 232 255 / var(--tw-border-opacity, 1)); }
.smd-brand-bright.border-purple-200,
.smd-brand-bright .border-purple-200 { border-color: rgb(233 213 255 / var(--tw-border-opacity, 1)); }

/* gradient (original) */
.smd-brand-bright.from-purple-50,
.smd-brand-bright .from-purple-50 {
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Transform showcase: 2-col layout on sm+ (arrow column removed),
   single col on mobile. Picture left, sticker grid right.
   1fr 2.5fr gives the right cell extra room so landscape sticker
   examples (which fit less height per fixed width) still read large.
   align-items: start so the "Turn This..." / "Into This" labels line
   up at the same top y-offset regardless of cell content height. */
.transform-showcase-grid {
  align-items: start;
}
@media (min-width: 640px) {
  .transform-showcase-grid {
    grid-template-columns: 1fr 2.5fr;
  }
}

/* Source photo in transform showcase — capped so it doesn't dominate; the
   sticker grid on the right gets the visual weight. */
.smd-source-photo {
  max-height: 24rem;
  width: auto;
  margin: 0 auto;
}

/* Pricing strip + sticker gallery: 2 cols on mobile, 4 on sm+ */
@media (min-width: 640px) {
  .smd-grid-2-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Hero 2-col layout: text left, sample-sheet image right.
   Stacks on mobile, side-by-side on sm+. */
.smd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto 5rem;  /* extra bottom space before pricing strip */
}
@media (min-width: 640px) {
  .smd-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.smd-hero-image {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto 0 0;  /* sm+: hug the left edge of the right column; mobile centered via override below */
  display: block;
  filter: drop-shadow(4px 6px 10px rgba(0, 0, 0, 0.18));
}
@media (max-width: 639px) {
  .smd-hero-image {
    margin: 0 auto;  /* center on mobile when stacked */
  }
}

/* ============================================================
   Home-page fixed background — `body.smd-home` only.
   Uses a position:fixed pseudo-element instead of
   `background-attachment: fixed` so iOS Safari behaves correctly.
   The 1200px-max-width <main> floats above; the BG shows in the
   side margins on wide viewports.
   ============================================================ */
body.smd-home::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* White overlay washes the dark purple areas of the photo down to a
     soft lavender. Increase the alpha (toward 1.0) to lighten further;
     decrease (toward 0) to let more of the original image show through. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url('/static/bg-home.jpg') center / cover no-repeat;
}

/* Order section two-column grid: stacks on mobile, 2:1 split on sm+
   (Tailwind's col-span-* isn't in the precompiled stylesheet.) */
.smd-order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .smd-order-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* Header logo image — explicit size in rem so we don't depend on Tailwind
   sizes that may or may not be in the precompiled stylesheet. ~20% smaller
   than the previous w-20 / sm:w-48 (was 80px / 192px). */
.smd-logo {
  width: 4rem;   /* 64px mobile (was 80px) */
  height: 4rem;
}
@media (min-width: 640px) {
  .smd-logo {
    width: 9.5rem;   /* 152px desktop (was 192px) */
    height: 9.5rem;
  }
}