/* Mr. Tablecloth Curaçao, site styles */

:root {
  --navy: #00467f;
  --navy-dark: #00335d;
  --red: #ef3e42;
  --cream: #faf6ef;
  --cream-dark: #f0e9dc;
  --ink: #2b2b2b;
  --muted: #6b6b6b;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img { height: 56px; width: auto; }

.brand-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-bottom-color: var(--red);
}

.header-cta {
  display: inline-block;
  background: var(--cream-dark);
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.header-cta:hover { background: var(--navy); color: #fff; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.header-phone:hover { color: var(--red); }

.header-phone .icon-svg { width: 16px; height: 16px; }

.header-contact {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.header-contact:hover { background: var(--navy); }

.header-contact .icon-svg { width: 16px; height: 16px; }

@media (max-width: 620px) {
  .header-phone .label { display: none; }
  .header-contact .label { display: none; }
  .header-contact { padding: 10px 12px; }
}

@media (max-width: 400px) {
  .header-cta { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--navy);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--navy);
  }
  .main-nav.nav-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 8px 24px 18px;
    z-index: 60;
  }
  .main-nav.nav-open a { padding: 8px 0; width: 100%; }
}

/* Generic icons */
.icon-svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -4px;
  flex-shrink: 0;
}

/* Hero */
.hero {
  position: relative;
  aspect-ratio: 1600 / 940;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center top;
  color: #fff;
  margin: 20px 24px 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,51,93,.14);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,51,93,.10) 0%, rgba(0,51,93,.32) 62%, rgba(0,51,93,.66) 100%);
}

.hero .wrap {
  position: relative;
  padding-top: 80px;
  padding-bottom: 64px;
}

.hero-phone {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 4px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 18px;
  max-width: 16ch;
}

.hero p {
  max-width: 52ch;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.65;
  margin-bottom: 28px;
  color: #f6f2ea;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #d92c30; }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
}
.btn-outline:hover { background: rgba(255,255,255,.15); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dark); }

/* Section basics */
section { padding: 64px 0; }
.section-cream { background: var(--cream); }

.section-head {
  text-align: center;
  margin-bottom: 44px;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  margin: 0 0 18px;
}

/* Brand bow-tie divider (from the original vector logo) replaces the plain rule */
.section-head .rule {
  width: 46px;
  height: 28px;
  background: url('../assets/bowtie.png') center / contain no-repeat;
  margin: 0 auto 18px;
}

.page-head {
  padding: 56px 0 24px;
  background: var(--cream);
  text-align: center;
}

.page-head h1 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 8px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--navy); text-decoration: none; }

/* Three-column feature grid (About Us summary on home) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}

.feature-grid h3 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.2rem;
  margin: 0 0 12px;
}

.feature-grid p { color: var(--muted); font-size: 0.97rem; }

/* Reviews */
.review-card {
  background: #fff;
  border: 0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,51,93,.08);
}

.review-stars { color: var(--red); letter-spacing: 2px; margin-bottom: 8px; }
.review-name { font-weight: 600; margin-top: 10px; }
.review-date { color: var(--muted); font-size: 0.85rem; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .review-grid { grid-template-columns: 1fr; } }

.rating-badge {
  text-align: center;
  margin-bottom: 30px;
}
.rating-badge .num { font-family: var(--serif); font-size: 2.4rem; color: var(--navy); }

/* Contact section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

form.contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy);
}

form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 18px;
}

form.contact-form textarea { min-height: 130px; resize: vertical; }

.hp-field { position: absolute; left: -9999px; }

.contact-details h3 {
  font-family: var(--serif);
  color: var(--navy);
  margin-top: 0;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.95rem;
}
.hours-table td { padding: 6px 0; border-bottom: 1px solid #eee; }
.hours-table td:last-child { text-align: right; color: var(--muted); }
.hours-table strong { color: var(--navy); font-weight: 600; }

.contact-links { list-style: none; padding: 0; margin: 18px 0; }
.contact-links li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.contact-links .icon-svg { color: var(--navy); vertical-align: 0; }
.contact-links a { text-decoration: none; color: var(--navy); }
.contact-links a:hover { color: var(--red); }

.map-card {
  display: block;
  max-width: 480px;
  margin-top: 16px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
  border: 1px solid #e2ddd2;
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.map-card:hover { box-shadow: 0 4px 16px rgba(20,41,63,.15); }
.map-card img { width: 100%; display: block; }
.map-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cream-dark);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
}
.map-card:hover .map-card-label { background: var(--navy); color: #fff; }
.map-card-label .icon-svg { color: var(--red); flex-shrink: 0; }
.map-card:hover .map-card-label .icon-svg { color: #fff; }

.map-embed {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 6px;
  margin-top: 20px;
}

/* Product gallery (homepage "What's In Store") */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}
.product-grid figure { margin: 0; }
.product-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
}
/* Doilies are round in reality, frame them round instead of cropping into a rectangle */
.product-grid figure.round img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(20,41,63,.12);
}
.product-grid figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 8px;
}
@media (max-width: 860px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.instock-tags { text-align: center; font-size: 0.95rem; color: var(--navy); }
.instock-tags .tag {
  display: inline-block;
  background: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  margin: 4px 6px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--cream-dark);
}

/* About page photos */
.about-block img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
  margin-top: 18px;
}
.about-people {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: center;
}
.about-people img { margin-top: 0; }
@media (max-width: 700px) { .about-people { grid-template-columns: 1fr; } }

.shop-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.shop-gallery img { width: 100%; border-radius: 18px; box-shadow: 0 3px 14px rgba(0,51,93,.10); }
@media (max-width: 700px) { .shop-gallery { grid-template-columns: 1fr; } }

/* Footer */
.site-footer {
  background: var(--navy-dark);
  color: #cfd8e2;
  padding: 40px 0 28px;
  font-size: 0.85rem;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.site-footer a { color: #cfd8e2; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: 14px; }
.footer-social .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  transition: background .15s ease, border-color .15s ease;
}
.footer-social .social-icon .icon-svg { width: 18px; height: 18px; }
.footer-social .social-icon:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Cookie consent banner */
#cookie-banner {
  display: none;
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 480px;
  background: #fff;
  border: 1px solid #e2ddd0;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 20px 22px;
  align-items: flex-start;
  gap: 14px;
  flex-direction: column;
}
#cookie-banner p {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--muted);
}
#cookie-banner .cookie-title {
  margin: 0;
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.05rem;
}
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--navy);
  cursor: pointer;
}
#cookie-decline { background: #fff; color: var(--navy); }
#cookie-accept { background: var(--navy); color: #fff; }
#cookie-accept:hover { background: var(--navy-dark); }
#cookie-decline:hover { background: var(--cream-dark); }

/* FAQ page */
.faq-cat { margin-bottom: 44px; }
.faq-cat h2 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.4rem;
  border-bottom: 1px solid #e6e0d3;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.faq-item {
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,51,93,.06);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 44px 18px 18px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 16px;
  color: var(--red);
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 18px 18px; color: var(--muted); }

/* Family voice / quote card (About Us) */
.family-note {
  background: var(--cream);
  border-radius: 18px;
  padding: 32px 34px;
  box-shadow: 0 3px 14px rgba(0,51,93,.08);
  margin: 0 auto 40px;
  max-width: 760px;
}
.family-note p.quote {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}
.family-note .signed {
  font-weight: 600;
  color: var(--navy);
}

/* About page */
.about-block { max-width: 760px; margin: 0 auto 40px; }
.about-block h2 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.4rem;
}
.about-block p { color: var(--muted); }

/* Find Us page */
.find-photo { max-width: 780px; margin: 0 auto 34px; }
.find-photo img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
}
.find-photo figcaption {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 10px;
}
.find-steps { max-width: 780px; margin: 0 auto; }
.find-steps .step { margin-bottom: 30px; }
.find-steps h2 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.find-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 28px 0 44px;
}

/* Size chart page */
.size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.size-table th, .size-table td {
  border: 1px solid #e6e0d3;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.95rem;
}
.size-table th { background: var(--cream-dark); color: var(--navy); }

.notice-box {
  background: var(--cream);
  border-left: 3px solid var(--red);
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Size calculator */
.calc-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
  padding: 30px 28px;
  max-width: 520px;
  margin: 0 auto;
}
.calc-row { margin-bottom: 20px; }
.calc-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.calc-row select,
.calc-row input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
}
.calc-input-group { display: flex; gap: 8px; }
.calc-input-group input { flex: 2; }
.calc-input-group select { flex: 1; }
.calc-hint { font-size: 0.82rem; color: var(--muted); margin: 4px 0 10px; }
.calc-drop-shortcuts { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.drop-btn {
  background: var(--cream);
  border: 1px solid #e2ddd2;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.drop-btn:hover { background: var(--cream-dark); }
.drop-btn.active { background: var(--red); color: #fff; border-color: var(--red); }

.calc-result { margin-top: 28px; }
.calc-result-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
  padding: 28px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.calc-result-card h3 {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.calc-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}
.calc-option-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 16px;
}
.calc-diagram { margin-bottom: 4px; }
.calc-diagram-top { max-width: 200px; margin: 0 auto 4px; }
.calc-diagram-side { max-width: 220px; margin: 0 auto 8px; }
.calc-option-size { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.calc-option-cm { font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-left: 6px; }
.calc-option-detail { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.calc-flag { font-size: 0.82rem; color: var(--red); margin-top: 8px; }

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  margin-top: 18px;
  display: inline-block;
}
.btn-whatsapp:hover { background: #1ebe5a; }

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.calc-diagram-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.explainer-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 14px rgba(0,51,93,.10);
  padding: 20px;
  text-align: center;
}
.explainer-label {
  font-weight: 600;
  color: var(--navy);
  margin-top: 6px;
  font-size: 0.95rem;
}

@media (max-width: 780px) {
  .explainer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .calc-option-grid { grid-template-columns: 1fr; }
  .calc-card { padding: 24px 20px; }
  .explainer-grid { grid-template-columns: 1fr; }
}

/* Mobile hero: show the storefront photo whole, text below it (not overlaid) */
@media (max-width: 720px) {
  .hero {
    background-image: none !important;
    min-height: 0;
    aspect-ratio: auto;
    display: block;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--cream);
    color: var(--ink);
  }
  .hero::before {
    content: "";
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 1600 / 940;
    background-image: url('../assets/hero-storefront.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero .wrap {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .hero h1 { color: var(--navy); }
  .hero p { color: var(--ink); }
  .hero .hero-phone { color: var(--navy); }
}

/* Category tabs for the product gallery.

   A fixed grid, not a wrapping row. With eight categories a wrapping row breaks
   into ragged lines whose length depends on how long the words happen to be, and
   it re-breaks every time a category is added. A grid gives equal pills in two
   even rows and stays tidy if a ninth is ever added.

   These stay VISIBLE rather than collapsing into a select box. This row is the
   shop window: it is the only place on the page that says out loud that the shop
   carries eight different kinds of thing, which is the whole "largest selection
   on the island" claim. Hiding it to save a line of screen would cost more than
   it saves. */
.cat-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 820px;
  margin: 0 auto 36px;
}
.cat-tab {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 13px 8px;
  width: 100%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cat-tab:hover { background: var(--cream-dark); }
.cat-tab.active { background: var(--navy); color: #fff; }
/* Two across on a phone. One row taller than the old ragged wrap, and worth it:
   the tap target stays at 44px, which is what the real-handset test showed was
   needed, and nothing shifts around as categories are added. */
@media (max-width: 560px) {
  .cat-tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cat-tab { font-size: 0.88rem; letter-spacing: 0.02em; }
}
.product-grid.hidden { display: none; }

/* Flat textiles read best in landscape tiles; ceramics/cushions in portrait tiles */
#cat-placemats img, #cat-christmas img { aspect-ratio: 4 / 3; }
#cat-placemats figure.tall img { aspect-ratio: 3 / 4; }

/* Direction A hero CTA, white pill on the photo */
.btn-hero { background: #fff; color: var(--navy); margin-bottom: 8px; }
.btn-hero:hover { background: var(--cream-dark); }
@media (max-width: 720px) {
  .btn-hero { background: var(--red); color: #fff; }
  .btn-hero:hover { background: #d92c30; }
}

/* ==================================================================
   v17.4: footer, lightbox, back-to-top
   ================================================================== */

/* ---- Footer (Option A) ---- */
.site-footer { background: var(--navy-dark); color: #cfd8e2; padding: 0; font-size: .85rem; }
.site-footer a { color: #cfd8e2; text-decoration: none; }
.site-footer a:hover { color: #fff; }

.ft-inner { max-width: var(--max); margin: 0 auto; padding: 34px 20px 0; text-align: center; }
.ft-logo { display: flex; justify-content: center; }
.ft-logo img { width: 88px; height: auto; filter: brightness(0) invert(1); }
.ft-nav { margin: 20px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; }
.ft-nav a { color: #e8eef5; font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
.ft-contact { margin: 22px 0 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 16px; }
.ft-contact a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .95rem; font-weight: 600; padding: 11px 22px;
  border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  transition: background .15s ease, border-color .15s ease;
}
.ft-contact a svg { width: 17px; height: 17px; }
.ft-contact a:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.site-footer .ft-bar {
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: var(--max); margin: 0 auto; padding: 16px 20px 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; font-size: .82rem; color: #b9c5d3;
}
.footer-social { display: flex; gap: 14px; }
.footer-social .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; transition: background .15s ease, border-color .15s ease;
}
.footer-social .social-icon .icon-svg { width: 18px; height: 18px; }
.footer-social .social-icon:hover { background: rgba(255,255,255,.12); border-color: #fff; }

@media (max-width: 640px) {
  .ft-nav { flex-direction: column; gap: 14px; }
  .ft-contact { flex-direction: column; align-items: stretch; padding: 0 8px; }
  .ft-contact a { justify-content: center; }
  .site-footer .ft-bar { flex-direction: column-reverse; text-align: center; }
}

/* ---- Back to top ---- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .15s ease;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--red); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .01s linear; } }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* ---- Lightbox ---- */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

body.lb-lock { overflow: hidden; }
/* the floating arrow must not sit on top of an open lightbox */
body.lb-lock .to-top { opacity: 0; visibility: hidden; pointer-events: none; }

.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,26,48,.97);
  display: none; align-items: center; justify-content: center;
  padding: 56px 16px 24px;
}
.lb.is-open { display: flex; }
.lb-stage { margin: 0; max-width: 1000px; width: 100%; text-align: center; }
.lb-stage img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  display: block; margin: 0 auto; border-radius: 4px;
  background: var(--cream);
}
.lb-cap {
  margin-top: 14px; color: var(--cream);
  font-family: var(--serif); font-size: 1.05rem;
}
.lb-count {
  position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center; color: #9fb3c8; font-size: .8rem; letter-spacing: .06em;
}
.lb-close, .lb-nav {
  position: absolute; border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.06); color: #fff;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.lb-close { top: 14px; right: 14px; width: 44px; height: 44px; }
.lb-close svg { width: 20px; height: 20px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
@media (max-width: 640px) {
  .lb { padding: 56px 10px 44px; }
  .lb-stage img { max-height: 66vh; }
  .lb-nav { width: 42px; height: 42px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}


/* ==================================================================
   v17.5: size finder result
   ================================================================== */
.calc-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.calc-option-grid.single { grid-template-columns:1fr; max-width:460px; margin:0 auto; }
@media (max-width:760px){ .calc-option-grid { grid-template-columns:1fr; } }

.opt-rank {
  display:inline-block; background:var(--navy); color:#fff;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:12px;
}
.calc-verdict {
  font-family:var(--serif); font-size:1.45rem; color:var(--navy);
  margin:0 0 4px; line-height:1.25;
}
.calc-verdict .calc-option-cm {
  display:block; font-family:var(--sans); font-size:.85rem;
  color:var(--muted); font-weight:400; margin-top:2px;
}
.opt-hangs { margin:0 0 16px; font-size:.98rem; color:var(--ink); line-height:1.55; }
.opt-hangs strong { color:var(--red); white-space:nowrap; }

.calc-facts { margin:0 0 14px; padding:0; }
.calc-facts > div {
  display:flex; justify-content:space-between; gap:16px;
  padding:8px 0; border-bottom:1px solid #e7e0d3;
}
.calc-facts > div:last-child { border-bottom:0; }
.calc-facts dt { color:var(--muted); font-size:.86rem; margin:0; }
.calc-facts dd { margin:0; text-align:right; color:var(--navy); font-weight:600; font-size:.92rem; }

.calc-note {
  font-size:.82rem; color:var(--muted); line-height:1.6;
  background:#fbf8f2; border-left:3px solid var(--red);
  padding:10px 12px; margin:0 0 18px; border-radius:0 4px 4px 0;
}
.calc-diagram-label {
  font-family:var(--sans); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:14px 0 4px;
}
.calc-diagram { max-width:292px; margin:0 auto; }
.calc-diagram.side { max-width:310px; }
.leaf-note { font-size:.85rem; color:var(--muted); margin:8px 0 0; }

/* ==================================================================
   v17.6: Tablecloths tab, video tile plus video in the lightbox
   ================================================================== */

/* the play mark sits on the poster; it must never eat the click,
   the image underneath is the button */
.product-grid figure.has-video { position: relative; }
.play-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0,70,127,.82); color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: background .15s ease, transform .15s ease;
}
.play-badge svg { width: 26px; height: 26px; margin-left: 3px; }
.product-grid figure.has-video:hover .play-badge { background: var(--red); }
.product-grid figure.has-video img { cursor: pointer; }
@media (max-width: 560px) {
  .play-badge { width: 48px; height: 48px; }
  .play-badge svg { width: 21px; height: 21px; }
}

.lb-video {
  display: none;
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  margin: 0 auto; border-radius: 4px; background: #000;
}
@media (max-width: 640px) { .lb-video { max-height: 66vh; } }

/* ==================================================================
   v17.7: "Ask Us on WhatsApp" enquiry starter
   ================================================================== */
.wa-ask-card {
  background: #fbf8f2; border: 1px solid #e7e0d3;
  border-radius: 14px; padding: 22px 22px 20px; margin-bottom: 26px;
}
.wa-ask-card h3 {
  font-family: var(--serif); color: var(--navy);
  margin: 0 0 6px; font-size: 1.25rem;
}
.wa-ask-lead { margin: 0 0 16px; font-size: .92rem; color: var(--muted); line-height: 1.55; }

.wa-name-row { margin-bottom: 16px; }
.wa-name-row label {
  display: block; font-family: var(--sans); font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.wa-name-row input {
  width: 100%; padding: 11px 13px; font-size: 1rem; font-family: var(--sans);
  border: 1px solid #d9d0bf; border-radius: 8px; background: #fff; color: var(--ink);
}
.wa-name-row input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }

.wa-ask-q {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 9px;
}
.wa-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.wa-chip {
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--navy); background: #fff; color: var(--navy);
  transition: background .15s ease, color .15s ease;
  text-align: left; line-height: 1.35;
}
.wa-chip:hover { background: #eef3f8; }
.wa-chip.is-on { background: var(--navy); color: #fff; }
.wa-chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.wa-ask-card .wa-send { width: 100%; text-align: center; }
.wa-ask-find { margin: 14px 0 0; font-size: .86rem; color: var(--muted); text-align: center; }

/* the calculator result reuses .wa-name-row, but sits on the cream card */
#calcResult .wa-name-row { max-width: 340px; margin: 0 auto 14px; }
#calcResult .wa-name-row label { text-align: center; }

@media (max-width: 560px) {
  .wa-ask-card { padding: 18px 16px 16px; }
  .wa-chips { flex-direction: column; }
  .wa-chip { width: 100%; text-align: center; }
}

/* ---- v17.8: the contact form is gone. The website now collects nothing. ---- */
.email-card { padding: 4px 2px 0; }
.email-card h3 {
  font-family: var(--serif); color: var(--navy);
  margin: 0 0 6px; font-size: 1.25rem;
}
.email-card p { margin: 0 0 14px; font-size: .92rem; color: var(--muted); line-height: 1.55; }
.btn-email {
  background: #fff; color: var(--navy); border: 1.5px solid var(--navy);
  word-break: break-all;
}
.btn-email:hover { background: var(--navy); color: #fff; }
.email-note { margin: 12px 0 0 !important; font-size: .9rem; }

/* ---- v18.0: privacy page + email button ---- */
/* Every body sub-heading across the site is one size: Playfair, navy, 1.4rem.
   They were 1.25, 1.3, 1.35 and 1.4rem on Find Us, the Size Chart, the FAQ and
   About Us, which is a 12% spread doing no work. */
.size-head {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.4rem;
}
.size-head + p { color: var(--muted); font-size: 0.9rem; margin-top: -8px; }

/* Privacy was built after the other inner pages and never picked up their
   heading styles: its h1 and h2 were falling through to the browser default,
   which rendered them in the body sans face at browser sizes while every other
   page used Playfair. It now uses the same page-head and breadcrumb pattern as
   About Us, FAQ, Find Us and the Size Chart, and its body headings match
   .about-block h2 exactly. */
.privacy-body h2 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.4rem;
}
.privacy-lead { font-size: 1.1rem; color: var(--ink); line-height: 1.6; margin: 0 0 30px; }
.privacy-list { margin: 0 0 16px; padding-left: 22px; line-height: 1.9; }
.privacy-who { margin-top: 34px; padding-top: 20px; border-top: 1px solid #e7e0d3;
  font-size: .92rem; color: var(--muted); line-height: 1.8; }
.btn-email { display: inline-flex; align-items: center; gap: 9px; }
.btn-email .icon-svg { width: 18px; height: 18px; }
.email-addr { font-size: .86rem !important; color: var(--muted); margin: 10px 0 0 !important; }

/* ---- v18.0: Sunday "ask us" line under the hours ---- */
.hours-ask {
  display: inline-block; margin-top: 5px;
  font-size: .86rem; color: var(--red); font-weight: 500;
}
.hours-ask:hover { text-decoration: underline; }

/* ---- v18.0: bridge between the size finder and the full size chart ---- */
.chart-bridge {
  max-width: 720px; margin: 0 auto 22px; text-align: center;
  font-size: .93rem; color: var(--muted); line-height: 1.65;
}
.chart-bridge a { color: var(--red); font-weight: 500; }

/* ---- v18.1: the Ask Us panel, opened by any WhatsApp button ---- */
body.wa-lock { overflow: hidden; }
.wa-panel {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0,26,48,.55);
  display: none; align-items: center; justify-content: center;
  padding: 20px 16px;
}
.wa-panel.is-open { display: flex; }
.wa-panel-inner { position: relative; width: 100%; max-width: 420px; }
.wa-panel .wa-ask-card {
  margin: 0; background: #fff; border-color: #ded5c4;
  box-shadow: 0 18px 50px rgba(0,26,48,.35);
  max-height: 88vh; overflow-y: auto;
}
.wa-panel-close {
  position: absolute; top: -14px; right: -6px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-panel-close svg { width: 18px; height: 18px; }
.wa-panel-close:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 560px) {
  .wa-panel { padding: 14px 12px; align-items: flex-end; }
  .wa-panel-inner { max-width: 100%; }
  .wa-panel-close { top: -46px; right: 0; }
}

/* ---- v18.2: soft nudge on the calculator name field ---- */
#calcName.is-nudged {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239,62,66,.16);
}