/**
 * Turtle Shell design package — makers storefront look.
 * Scoped under .pkg-turtle-shell so base styles.css does not flash another look.
 */

html.pkg-turtle-shell {
  --pkg-charcoal: var(--forest, #2a3329);
  --pkg-oak: var(--flannel, #9a7348);
  --pkg-linen: var(--snow, #f3efe6);
  --pkg-ink: #0e0f0e;
  --pkg-white: var(--cream, #faf8f4);
  --pkg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.pkg-turtle-shell,
html.pkg-turtle-shell body {
  font-family: var(--font-body, "DM Sans", "Segoe UI", sans-serif);
  font-weight: var(--font-body-weight, 400);
  color: var(--ink, var(--pkg-ink));
  background-color: var(--page-bg, var(--pkg-linen));
  font-size: var(--type-body, 1rem);
  background-image: none;
}

.pkg-turtle-shell h1,
.pkg-turtle-shell .hero-split__headline {
  font-family: var(--font-hero, var(--font-display, "Cormorant Garamond", Georgia, serif));
  font-weight: var(--font-hero-weight, var(--font-display-weight, 600));
}

.pkg-turtle-shell h2,
.pkg-turtle-shell h3 {
  font-family: var(--font-heading, var(--font-display, "Cormorant Garamond", Georgia, serif));
  font-weight: var(--font-heading-weight, var(--font-display-weight, 600));
}

.pkg-turtle-shell .brand-name {
  font-family: var(--font-nav, var(--font-heading, var(--font-display, "Cormorant Garamond", Georgia, serif)));
  font-weight: var(--font-nav-weight, var(--font-heading-weight, 600));
}

.pkg-turtle-shell .pkg-surface-default {
  background: transparent;
}

.pkg-turtle-shell .pkg-surface-muted,
.pkg-turtle-shell .pkg-surface-linen {
  background: var(--pkg-linen, var(--snow, #f3efe6));
}

.pkg-turtle-shell .pkg-surface-paper {
  background: var(--pkg-paper, var(--paper, var(--pkg-white, #faf8f4)));
}

.pkg-turtle-shell .pkg-surface-brand,
.pkg-turtle-shell .pkg-surface-brand-primary {
  background: var(--pkg-charcoal, var(--forest, #2a3329));
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-brand a,
.pkg-turtle-shell .pkg-surface-brand p,
.pkg-turtle-shell .pkg-surface-brand h2,
.pkg-turtle-shell .pkg-surface-brand-primary a,
.pkg-turtle-shell .pkg-surface-brand-primary p,
.pkg-turtle-shell .pkg-surface-brand-primary h2 {
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-brand-secondary {
  background: var(--pkg-oak, var(--flannel, #9a7348));
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-brand-secondary a,
.pkg-turtle-shell .pkg-surface-brand-secondary p,
.pkg-turtle-shell .pkg-surface-brand-secondary h2 {
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-brand-tertiary {
  background: var(--pkg-blue, var(--lodge, var(--ox, #5c6b5a)));
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-brand-tertiary a,
.pkg-turtle-shell .pkg-surface-brand-tertiary p,
.pkg-turtle-shell .pkg-surface-brand-tertiary h2 {
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-accent {
  background: var(--accent, var(--pkg-oak, #9a7348));
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-accent a,
.pkg-turtle-shell .pkg-surface-accent p,
.pkg-turtle-shell .pkg-surface-accent h2 {
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-dark,
.pkg-turtle-shell .pkg-surface-charcoal {
  background: var(--forest-deep, var(--pkg-ink, #1a1c1a));
  color: var(--cream, var(--pkg-white, #faf8f4));
}

.pkg-turtle-shell .pkg-surface-dark a,
.pkg-turtle-shell .pkg-surface-dark p,
.pkg-turtle-shell .pkg-surface-dark h2,
.pkg-turtle-shell .pkg-surface-charcoal a,
.pkg-turtle-shell .pkg-surface-charcoal p,
.pkg-turtle-shell .pkg-surface-charcoal h2 {
  color: var(--cream, var(--pkg-white, #faf8f4));
}

/* Header / footer / buttons — consume Appearance + Header/Footer tokens */
.pkg-turtle-shell .site-header {
  background: var(--header-bg, var(--pkg-charcoal, #2a3329));
  color: var(--header-text, var(--cream, #faf8f4));
  border-bottom: 1px solid color-mix(in srgb, var(--header-link, #faf8f4) 12%, transparent);
  box-shadow: none;
}

.pkg-turtle-shell .brand,
.pkg-turtle-shell .brand:hover {
  color: var(--header-link, var(--cream, #faf8f4));
}

.pkg-turtle-shell .brand-tag {
  color: var(--header-link, var(--cream, #faf8f4));
  opacity: 0.85;
  text-transform: var(--case-tagline, uppercase);
}

.pkg-turtle-shell .nav-menu a,
.pkg-turtle-shell .nav-phone a,
.pkg-turtle-shell .submenu-toggle {
  color: var(--header-link, var(--cream, #faf8f4));
  font-family: var(--font-nav, var(--font-body, "DM Sans", sans-serif));
  font-size: var(--type-nav, 0.95rem);
  font-weight: var(--font-nav-weight, 500);
  text-transform: var(--case-nav, uppercase);
}

.pkg-turtle-shell .site-header-secondary .nav-menu--secondary a,
.pkg-turtle-shell .site-header-secondary .nav-phone a {
  color: var(--header-secondary-link, var(--header-link, var(--cream, #faf8f4)));
  font-size: calc(var(--type-nav, 0.95rem) * 0.88);
}

.pkg-turtle-shell .nav-menu a.active,
.pkg-turtle-shell .nav-menu a:hover,
.pkg-turtle-shell .submenu-toggle:hover,
.pkg-turtle-shell .submenu-toggle.active {
  color: var(--header-link-active, #fff);
}

.pkg-turtle-shell .site-header-secondary .nav-menu--secondary a.active,
.pkg-turtle-shell .site-header-secondary .nav-menu--secondary a:hover {
  color: var(--header-secondary-link-active, var(--header-link-active, #fff));
}

.pkg-turtle-shell .nav-menu .nav-cta a {
  background: var(--nav-cta-bg, var(--pkg-oak, var(--flannel, #9a7348)));
  color: var(--nav-cta-fg, #fff);
  border-radius: var(--radius, 0.35rem);
  font-family: var(--font-nav, var(--font-body, "DM Sans", sans-serif));
  font-weight: var(--font-nav-weight, 600);
  text-transform: var(--case-nav, uppercase);
}

.pkg-turtle-shell .nav-menu .nav-cta a:hover {
  background: var(--nav-cta-bg-hover, var(--flannel-deep, color-mix(in srgb, var(--pkg-oak, #9a7348) 78%, #000)));
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_primary"] {
  --nav-cta-bg: var(--pkg-charcoal, var(--forest));
  --nav-cta-bg-hover: var(--forest-deep, color-mix(in srgb, var(--pkg-charcoal, #2a3329) 82%, #000));
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_secondary"] {
  --nav-cta-bg: var(--pkg-oak, var(--flannel));
  --nav-cta-bg-hover: var(--flannel-deep, color-mix(in srgb, var(--pkg-oak, #9a7348) 78%, #000));
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_tertiary"] {
  --nav-cta-bg: var(--pkg-blue, var(--lodge, var(--ox, #5c6b5a)));
  --nav-cta-bg-hover: color-mix(in srgb, var(--pkg-blue, var(--lodge, #5c6b5a)) 78%, #000);
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_accent"] {
  --nav-cta-bg: var(--accent);
  --nav-cta-bg-hover: color-mix(in srgb, var(--accent) 78%, #000);
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_surface_dark"],
.pkg-turtle-shell .nav-cta[data-cta-color="charcoal"] {
  --nav-cta-bg: var(--forest-deep, #1a1c1a);
  --nav-cta-bg-hover: #000;
}

.pkg-turtle-shell .nav-cta[data-cta-color="brand_surface_muted"] {
  --nav-cta-bg: var(--pkg-linen, var(--snow));
  --nav-cta-bg-hover: color-mix(in srgb, var(--pkg-linen, var(--snow)) 82%, #000);
  --nav-cta-fg: var(--pkg-ink, var(--ink));
}

.pkg-turtle-shell .nav-cta[data-cta-color="page_bg"] {
  --nav-cta-bg: var(--page-bg);
  --nav-cta-bg-hover: color-mix(in srgb, var(--page-bg) 82%, #000);
  --nav-cta-fg: var(--pkg-ink, var(--ink));
}

.pkg-turtle-shell .nav-cta[data-cta-color="surface_paper"] {
  --nav-cta-bg: var(--pkg-paper, var(--paper));
  --nav-cta-bg-hover: color-mix(in srgb, var(--pkg-paper, var(--paper)) 82%, #000);
  --nav-cta-fg: var(--pkg-ink, var(--ink));
}

.pkg-turtle-shell .nav-cta[data-cta-color="text_on_dark"] {
  --nav-cta-bg: var(--pkg-white, var(--cream));
  --nav-cta-bg-hover: color-mix(in srgb, var(--pkg-white, var(--cream)) 82%, #000);
  --nav-cta-fg: var(--pkg-ink, var(--ink));
}

.pkg-turtle-shell .eyebrow,
.pkg-turtle-shell .hero-split__kicker,
.pkg-turtle-shell .indy-stamp {
  color: var(--label-color, var(--accent, var(--pkg-oak, #9a7348)));
  font-family: var(--font-label, var(--font-body, "DM Sans", sans-serif));
  font-size: var(--type-kicker, 0.78rem);
  font-weight: var(--font-label-weight, 700);
  text-transform: var(--case-label, uppercase);
}

.pkg-turtle-shell .btn {
  border-radius: var(--radius, 0.35rem);
  font-family: var(--font-nav, var(--font-body, "DM Sans", sans-serif));
  font-size: var(--type-button, 0.86rem);
  font-weight: var(--font-nav-weight, 600);
  text-transform: var(--case-button, uppercase);
}

.pkg-turtle-shell .btn-primary,
.pkg-turtle-shell .btn-solid {
  background: var(--pkg-oak, var(--flannel, #9a7348));
  border-color: var(--pkg-oak, var(--flannel, #9a7348));
  color: #fff;
}

.pkg-turtle-shell .btn-primary:hover,
.pkg-turtle-shell .btn-solid:hover {
  background: var(--flannel-deep, color-mix(in srgb, var(--pkg-oak, #9a7348) 78%, #000));
  color: #fff;
}

.pkg-turtle-shell .btn-secondary {
  background: var(--pkg-blue, var(--lodge, var(--ox, #5c6b5a)));
  border-color: var(--pkg-blue, var(--lodge, var(--ox, #5c6b5a)));
  color: #fff;
}

.pkg-turtle-shell .btn-secondary:hover {
  background: color-mix(in srgb, var(--pkg-blue, var(--lodge, #5c6b5a)) 78%, #000);
  color: #fff;
}

.pkg-turtle-shell .btn-ghost {
  background: transparent;
  color: var(--pkg-charcoal, var(--forest, #2a3329));
  border: 1px solid color-mix(in srgb, var(--pkg-charcoal, #2a3329) 28%, transparent);
}

.pkg-turtle-shell .btn-ghost:hover {
  background: color-mix(in srgb, var(--pkg-charcoal, #2a3329) 6%, transparent);
  color: var(--pkg-charcoal, var(--forest, #2a3329));
}

.pkg-turtle-shell .btn-primary-inverse {
  background: #fff;
  border-color: #fff;
  color: var(--pkg-oak, var(--flannel, #9a7348));
}

.pkg-turtle-shell .btn-secondary-inverse {
  background: #fff;
  border-color: #fff;
  color: var(--pkg-blue, var(--lodge, #5c6b5a));
}

.pkg-turtle-shell .btn-ghost-inverse {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}

.pkg-turtle-shell .site-footer {
  background: var(--footer-bg, var(--forest-deep, #1a1c1a));
  color: var(--footer-text, var(--cream, #faf8f4));
  border-top: 3px solid var(--pkg-oak, var(--flannel, #9a7348));
}

.pkg-turtle-shell .site-footer a {
  color: var(--footer-text, #fff);
}

.pkg-turtle-shell .footer-brand {
  color: var(--footer-text, #fff);
  font-size: var(--type-footer, 1.4rem);
}

/* Catalog / product */
.pkg-turtle-shell .product-hero {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  padding: 2.5rem 0 3.5rem;
}

@media (max-width: 900px) {
  .pkg-turtle-shell .product-hero {
    grid-template-columns: 1fr;
  }
}

.pkg-turtle-shell .product-gallery__main {
  width: 100%;
  display: block;
  border-radius: var(--radius, var(--pkg-radius, 0.25rem));
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ddd;
}

.pkg-turtle-shell .product-gallery__stage {
  position: relative;
}

.pkg-turtle-shell .product-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius, var(--pkg-radius, 0.25rem));
  transition: background 0.15s ease;
}

.pkg-turtle-shell .product-gallery__play:hover,
.pkg-turtle-shell .product-gallery__play:focus-visible {
  background: rgba(0, 0, 0, 0.38);
  outline: none;
}

.pkg-turtle-shell .product-gallery__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius, var(--pkg-radius, 0.35rem));
  background: rgba(0, 0, 0, 0.55);
  font-size: 1.15rem;
  padding-left: 0.15rem;
}

.pkg-turtle-shell .product-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.pkg-turtle-shell .product-gallery__thumbs button {
  position: relative;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius, var(--pkg-radius, 0.2rem));
}

.pkg-turtle-shell .product-gallery__thumbs button.is-active,
.pkg-turtle-shell .product-gallery__thumbs button:focus-visible {
  border-color: var(--pkg-oak);
}

.pkg-turtle-shell .product-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pkg-turtle-shell .product-gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.7rem;
  pointer-events: none;
}

.pkg-turtle-shell .product-panel .lead {
  font-size: 1.125rem;
  opacity: 0.9;
}

.pkg-turtle-shell .option-group {
  margin: 1.25rem 0;
}

.pkg-turtle-shell .option-group__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pkg-turtle-shell .swatch-list,
.pkg-turtle-shell .addon-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pkg-turtle-shell .swatch-list label,
.pkg-turtle-shell .addon-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius, var(--pkg-radius, 999px));
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  background: var(--pkg-white);
}

.pkg-turtle-shell .swatch-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.pkg-turtle-shell .config-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.pkg-turtle-shell .config-total {
  font-size: 1.35rem;
  font-weight: 600;
}

.pkg-turtle-shell .inquire-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  padding: 2rem 0 3rem;
}

@media (max-width: 900px) {
  .pkg-turtle-shell .inquire-layout {
    grid-template-columns: 1fr;
  }
}

.pkg-turtle-shell .inquire-summary {
  background: color-mix(in srgb, var(--pkg-charcoal, #2a3329) 6%, transparent);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius, var(--pkg-radius, 0.35rem));
}

.pkg-turtle-shell .catalog-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.pkg-turtle-shell .catalog-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--pkg-white);
  border-radius: var(--radius, var(--pkg-radius, 0.25rem));
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.25s var(--pkg-ease), box-shadow 0.25s var(--pkg-ease);
}

.pkg-turtle-shell .catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.pkg-turtle-shell .catalog-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pkg-turtle-shell .catalog-card__body {
  padding: 0.9rem 1rem 1.1rem;
}