/* 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. */
@media (min-width: 640px) {
  .transform-showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Source photo in transform showcase — cap height so it doesn't dominate on desktop. */
.smd-source-photo {
  max-height: 18rem;  /* 288px — readable but not overwhelming */
}

/* 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));
  }
}

/* ============================================================
   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;
  }
}