/* Legotti — modern rebuild
   Fonts kept from the original brand: Carrois Gothic SC for display/nav,
   Titillium Web for body copy. */
@import url("https://fonts.googleapis.com/css2?family=Carrois+Gothic+SC&family=Titillium+Web:wght@400;600;700&display=swap");

:root {
  --container: 1200px;
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #262422;
  --color-muted: #6f6b66;
  --color-faint: #b8b2a7;
  --color-border: #e2ded6;
  --color-dark: #2f2c29;
  --color-dark-hover: #171615;
  --color-accent: #9c8b6e;
  --color-stock-bg: #eef2e7;
  --color-stock-border: #b9c9a6;
  --color-stock-text: #4d5f3d;
  --footer-bg: #eeece8;
  --footer-text: #6d6a65;
  --font-body: "Titillium Web", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Carrois Gothic SC", var(--font-body);
  --radius: 2px;
  --shadow-sm: 0 1px 3px rgba(30, 26, 20, 0.08);
  --shadow-md: 0 10px 30px rgba(30, 26, 20, 0.12);
  --header-h: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Pushes the footer to the bottom of the viewport on short pages (e.g.
   Contact) instead of leaving it floating right under the content. */
#main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 12px 18px;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.logo img { height: var(--logo-height, 40px); width: auto; }
.logo { display: inline-flex; }

.primary-nav > ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.primary-nav > ul > li { position: relative; }
.primary-nav a {
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--color-text);
  border-radius: var(--radius);
  transition: color 0.15s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--color-accent); }
.primary-nav a[aria-current="page"] { color: var(--color-accent); font-weight: 700; }

.has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.submenu {
  display: none;
  list-style: none;
  margin: 0;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  flex-direction: column;
  gap: 0;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.open .submenu {
  display: flex;
}
.submenu a { padding: 10px 16px; font-family: var(--font-body); font-size: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bar {
  width: 18px;
  height: 2px;
  background: var(--color-dark);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .primary-nav.open { display: block; }
  .primary-nav > ul { flex-direction: column; padding: 8px 20px 18px; gap: 0; }
  .primary-nav a { display: block; padding: 12px 4px; }
  .submenu {
    display: none;
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 12px;
    min-width: 0;
  }
  .has-submenu.open .submenu { display: flex; }
  .has-submenu > a::after { display: none; }
}

/* ===== Hero carousel ===== */
.hero-section {
  padding: 28px 0 0;
}
.hero {
  position: relative;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.hero-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 7;
  min-height: 260px;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-caption {
  position: absolute;
  left: 24px;
  bottom: 28px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
}
.hero-dots {
  position: absolute;
  right: 24px;
  bottom: 28px;
  display: flex;
  gap: 4px;
}
/* The visible dot stays a small 9px circle (::before), but the button
   itself is sized up to ~38px -- a comfortable, accurately-tappable
   target on a phone -- with the extra area invisible and centered on
   the dot. */
.hero-dots button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.hero-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.35);
}
.hero-dots button[aria-current="true"]::before { background: #fff; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.hero-arrow.prev { left: 12px; }
.hero-arrow.next { right: 12px; }
@media (max-width: 640px) {
  .hero-caption { font-size: 13px; padding: 8px 14px; }
  .hero-arrow { display: none; }
  /* Below ~594px, aspect-ratio 16/7 would compute a height under the
     260px min-height floor. When min-height wins that fight, the browser
     recomputes *width* from the ratio instead of honoring flex: 0 0 100%
     -- each slide balloons past the track's actual width, so adjacent
     slides bleed into view at the edge. Dropping the ratio here (and
     just fixing the height directly) removes that fight entirely. */
  .hero-slide { aspect-ratio: auto; height: 260px; }
}

/* ===== Breadcrumbs ===== */
.breadcrumbs {
  font-size: 13px;
  color: var(--color-muted);
  padding: 18px 0 0;
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 8px; color: var(--color-border); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

/* ===== Page shell ===== */
main { display: block; }
.section { padding: 28px 0 64px; }
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}
@media (max-width: 640px) {
  .card { padding: 20px; }
}

.intro h1 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}
.intro p { margin: 0 0 16px; color: var(--color-text); }
.intro p:last-child { margin-bottom: 0; }
.rich-text ul,
.rich-text ol { margin: 0 0 16px; padding-left: 24px; color: var(--color-text); }
.rich-text li { margin-bottom: 4px; }
.rich-text > *:last-child { margin-bottom: 0; }

/* ===== Product grid ===== */
.category-note { color: var(--color-muted); margin: 0 0 26px; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 860px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}
.product-card { }
.product-card a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}
.product-card figure {
  position: relative;
  margin: 0 0 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}
.stock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.product-card a:hover img,
.product-card a:focus-visible img { transform: scale(1.045); }
.product-card figcaption {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ===== Product detail ===== */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
}
@media (max-width: 860px) {
  .product-detail { grid-template-columns: 1fr; }
}

.gallery-main {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f4f2ee;
  cursor: zoom-in;
}
.gallery-main.is-zoomed { cursor: grab; }
.gallery-main.is-zoomed.is-dragging { cursor: grabbing; }
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.gallery-main.is-zoomed img { touch-action: none; }
.gallery-main.is-dragging img { transition: none; }

.gallery-zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.gallery-zoom-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-zoom-btn:hover { background: rgba(0, 0, 0, 0.75); }
.gallery-zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.gallery-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  width: 76px;
  height: 76px;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--color-dark); }

.product-meta h1 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}
.product-meta .stock-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.product-meta .stock-line .price {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}
.product-meta .stock-line .stock-pill {
  flex-shrink: 0;
  border: 1px solid var(--color-stock-border);
  background: var(--color-stock-bg);
  color: var(--color-stock-text);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.product-meta .lede { color: var(--color-text); margin: 0 0 22px; }

/* Width/Height sit directly above Jam/Swing in source order, so a plain
   4-column grid (label, box, label, box) naturally lines their dropdown
   boxes up column-for-column between the two rows; right-aligning the
   labels lines up their trailing letters the same way (the M in "Jam"
   under the H in "Width"). */
.variant-select-row {
  display: grid;
  grid-template-columns: repeat(2, auto auto);
  column-gap: 12px;
  row-gap: 14px;
  align-items: center;
  margin: 0 0 22px;
}
@media (max-width: 480px) {
  .variant-select-row { grid-template-columns: auto auto; }
}
.variant-select-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  color: var(--color-muted);
}
/* Custom Jam/Swing dropdown — not a native <select>, because Chromium's
   native option hover-highlight is OS-drawn and can't be restyled with CSS
   at all (only the selected row responds to author styles there), which
   made hover and selected look inconsistent. This gives full control over
   both states. Selecting an in-stock combination navigates to the product
   row that carries it (see main.js) instead of updating this page in place. */
.variant-dropdown {
  position: relative;
}
.variant-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 150px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--color-text);
}
.variant-dropdown-caret {
  font-size: 10px;
  color: var(--color-muted);
}
.variant-dropdown-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-height: 240px;
  overflow-y: auto;
}
.variant-dropdown-option {
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
}
.variant-dropdown-option[aria-selected="true"] {
  background: var(--color-border);
}
/* The "more transparent" hover treatment — takes priority over the
   selected-row background above via source order. */
.variant-dropdown-option.is-active {
  background: rgba(38, 36, 34, 0.08);
}

.tabs { margin-top: 8px; }
.tablist {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tablist button {
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--color-muted);
  position: relative;
  top: 1px;
}
.tablist button[aria-selected="true"] {
  color: var(--color-text);
  border-color: var(--color-border);
  background: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tabpanel { padding: 20px 2px; }
.tabpanel[hidden] { display: none; }
.tabpanel ul { margin: 0; padding-left: 20px; }
.tabpanel li { margin-bottom: 4px; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.spec-list li:last-child { border-bottom: none; }
.spec-list .label { color: var(--color-muted); }

.cta-quote {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.cta-quote p { margin: 0 0 12px; color: var(--color-muted); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-dark);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--color-dark-hover); }
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover { background: #f6f4f0; }

/* ===== Contact page ===== */
.contact-block { max-width: 46ch; }
.contact-block dt { color: var(--color-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 20px; }
.contact-block dd { margin: 4px 0 0; font-size: 19px; }
.contact-block a { text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-form .form-field { margin-bottom: 16px; }
.contact-form label { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 6px; }
.contact-form label .hint { font-size: 12px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.contact-form textarea { resize: vertical; }

.form-flash {
  background: #f3f6ef;
  border: 1px solid #cfe0c2;
  color: #3f6b2b;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 14px;
}
.form-flash-error {
  background: #fbeeee;
  border-color: #e6c6c6;
  color: #b23b3b;
}
.form-flash-error ul { margin: 0; padding-left: 18px; }

/* ===== Footer ===== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--color-border);
}
.footer-inner {
  padding: 34px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}
.footer-inner a { color: var(--footer-text); text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }
.footer-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }