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

/* ============================================================
   Style-examples carousel (transform showcase).
   Desktop: 3-up grid. Mobile: swipeable scroll-snap carousel — one style
   centered, the next peeking, with dot indicators + a right-arrow hint.
   No auto-advance.
   ============================================================ */
.smd-style-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.smd-carousel-viewport { position: relative; }
.smd-carousel-arrow,
.smd-dots { display: none; }

@media (max-width: 639px) {
  .smd-style-track {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    padding-bottom: 0.25rem;
  }
  .smd-style-track::-webkit-scrollbar { display: none; }  /* WebKit */
  .smd-style-slide {
    flex: 0 0 90%;               /* one centered, next peeks just a sliver */
    scroll-snap-align: center;
  }
  .smd-style-slide img {
    width: 100%;
    max-width: 100%;
    max-height: 56vh;            /* keep tall portraits from dominating */
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
  .smd-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(102, 51, 153, 0.85);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding-bottom: 3px;         /* optical centering of the > glyph */
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s;
  }
  .smd-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
  }
  .smd-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9cce6;
    cursor: pointer;
    transition: background 0.15s, width 0.15s;
  }
  .smd-dot.active {
    background: #663399;
    width: 22px;
    border-radius: 5px;
  }
}

/* ============================================================
   Customer reviews: 3-up grid on desktop; one-at-a-time swipe carousel on
   mobile (reuses the generic .smd-carousel-arrow / .smd-dots / viewport).
   ============================================================ */
.smd-review-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 639px) {
  .smd-review-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .smd-review-track::-webkit-scrollbar { display: none; }
  .smd-review-slide {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
}

/* ============================================================
   Before/After gallery item.
   Desktop: before | arrow | after side by side.
   Mobile: stack vertically (before on top, arrow rotated to point down,
   after below) so each image goes ~full width instead of cramped thirds.
   ============================================================ */
.smd-ba-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 639px) {
  .smd-ba-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .smd-ba-grid > * { width: 100%; }
  .smd-ba-arrow {
    transform: rotate(90deg);
    margin: 0.25rem 0;
  }
  .smd-ba-img {
    height: auto !important;     /* override the desktop h-40 */
    max-height: 44vh;
    width: 100%;
  }
}

/* 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 */
}
/* Mobile: natural DOM order = headline, image, bullets+CTA (image right under
   the headline). The hero is three grid children for this reason. */
@media (min-width: 640px) {
  .smd-hero-grid {
    grid-template-columns: 1fr 1.25fr;  /* give the sample-sheet image more room than the text */
    column-gap: 2rem;
    /* Recombine on desktop: headline + bullets/CTA stacked on the left,
       image spanning both rows on the right. */
    grid-template-areas:
      "headline image"
      "rest     image";
  }
  .smd-hero-headline  { grid-area: headline; align-self: end; margin-bottom: 0; }
  .smd-hero-imagewrap { grid-area: image; }
  .smd-hero-rest      { grid-area: rest; align-self: start; margin-top: 1.5rem; }
}

.smd-hero-image {
  width: 100%;
  max-width: 40rem;
  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;
  }
}

/* ============================================================
   Mobile navigation — labeled "Menu" button + slide-down drawer.
   Desktop keeps the inline 3-button nav (.hidden sm:flex on the <nav>).
   These custom classes live here (not Tailwind utilities) because the
   customer site ships a PREBUILT Tailwind bundle that omits classes
   added after build.
   ============================================================ */
.smd-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: #663399;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;          /* tap-target floor */
  cursor: pointer;
}
.smd-menu-btn:hover { background-color: #52297a; }
/* Hide the Menu button on desktop (the inline nav takes over at sm+). */
@media (min-width: 640px) {
  .smd-menu-btn { display: none; }
}

.smd-mobile-drawer {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.25rem 1rem 1rem;
}
.smd-drawer-link {
  display: flex;
  align-items: center;
  min-height: 44px;          /* tap-target floor */
  padding: 0.6rem 0.25rem;
  font-weight: 600;
  color: #3d1f5c;
  text-decoration: none;
  border-bottom: 1px solid #f0ebf5;
}
.smd-drawer-link:hover { color: #663399; }
.smd-drawer-cta {
  justify-content: center;
  margin-top: 0.85rem;
  background-color: #663399;
  color: #fff;
  border-radius: 0.5rem;
  border-bottom: none;
  font-weight: 700;
}
.smd-drawer-cta:hover { color: #fff; background-color: #52297a; }
/* Never show the drawer on desktop, even if toggled open before a resize. */
@media (min-width: 640px) {
  .smd-mobile-drawer { display: none !important; }
}

/* ============================================================
   Sticky mobile "Start My Order" CTA (thumb zone). Opt-in per page
   via page_layout(sticky_order_cta=True). Mobile only; not edge-to-edge.
   ============================================================ */
.smd-sticky-cta { display: none; }
@media (max-width: 639px) {
  .smd-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e5e7eb;
  }
  .smd-sticky-cta-btn {
    display: block;
    max-width: 24rem;
    margin: 0 auto;
    background-color: #663399;
    color: #fff;
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 1.05rem;
    min-height: 44px;
    text-decoration: none;
  }
  /* Keep the sticky bar from covering the footer/last content. */
  body.smd-has-sticky-cta { padding-bottom: 5.5rem; }
}

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