/* Camera Company hub. Base tokens and components come from saffron.css (hot-linked); this file holds the
   country picker (same rules as the Catio hub) plus the range, fact and FAQ blocks. */
.search-row { padding: 4px 4px 4px 16px;
}
.search-row input { padding: 12px 8px; font-size: 15px;
}
.search-row .count { padding: 8px 12px; font-size: 12px;
}
.search-row {
  max-width: 560px; margin: -24px auto 40px;
  display: flex; align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.search-row svg { width: 20px; height: 20px; color: var(--ink-500); flex: none;
}
.search-row input {
  flex: 1; border: 0; outline: 0;
  background: transparent;
  font: 500 16px var(--font-sans);
  color: var(--ink-900);
  padding: 14px 14px;
}
.search-row input::placeholder { color: var(--ink-500);
}
.search-row .count {
  font-size: 13px; font-weight: 600;
  color: var(--ink-700);
  padding: 10px 16px;
  background: var(--cream-100);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex: none;
}
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.country-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  text-decoration: none;
  color: var(--ink-900);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  overflow: hidden;
}
.country-card::after {
  content: "";
  position: absolute; inset: auto -40% -60% auto;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--saffron-300);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  pointer-events: none;
}
.country-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(27,34,53,0.16);
}
.country-card:hover::after { opacity: 0.5; transform: scale(1);
}
.country-card > * { position: relative; z-index: 1;
}
.country-flag {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--cream-100);
  display: grid; place-items: center;
  font-size: 32px; line-height: 1;
  box-shadow: inset 0 0 0 1px var(--border);
}
.country-name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0;
}
.country-url {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--ink-700);
  margin-top: 6px; word-break: break-all;
}
.country-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.country-foot .label {
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-700);
}
.country-foot .arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink-900); color: var(--cream-50);
  display: grid; place-items: center;
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.country-foot .arrow svg { width: 16px; height: 16px;
}
.country-card:hover .arrow { background: var(--saffron-500); color: var(--ink-900); transform: translateX(4px);
}
.country-card[data-featured="true"] { background: var(--ink-900); color: var(--cream-50); border-color: transparent;
}
.country-card[data-featured="true"] .country-flag { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.country-card[data-featured="true"] .country-url { color: rgba(250,246,236,0.7);
}
.country-card[data-featured="true"] .country-foot { border-color: rgba(255,255,255,0.10);
}
.country-card[data-featured="true"] .country-foot .label { color: var(--saffron-500);
}
.country-card[data-featured="true"] .arrow { background: var(--saffron-500); color: var(--ink-900);
}
.country-card[data-featured="true"]::after { background: rgba(255, 210, 63, 0.18);
}
.country-card.is-hidden { display: none;
}
footer .col-links { display: grid; gap: 12px;
}
footer .col-links a {
  color: rgba(250,246,236,0.85);
  text-decoration: none;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color var(--dur-micro) var(--ease);
}
footer .col-links a .mini-flag { font-size: 16px;
}
footer .col-links a:hover { color: var(--saffron-500);
}
footer .blurb { font-size: 15px; color: rgba(250,246,236,0.7); line-height: 1.6; margin: 18px 0 0; max-width: 340px;
}
footer .contact { font-size: 15px; color: rgba(250,246,236,0.85); line-height: 1.65; font-style: normal;
}
footer .contact a { color: rgba(250,246,236,0.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18);
}
footer .contact a:hover { color: var(--saffron-500); border-color: var(--saffron-500);
}
/* Stores not yet open render as flat cards: no link, no lift, muted label */
.country-card-soon{cursor:default;opacity:.78}
.country-card-soon:hover{transform:none}
.country-card-soon .label{color:var(--ink-500)}

/* ---- additions for this hub ---- */
/* The pill nav stays pinned (saffron.css makes the inner .nav sticky, but its wrapper is only as tall as the nav, so it
   scrolled away) and sits above the mobile drawer so the close button is always reachable. */
.nav-outer { position: sticky; top: 12px; z-index: 70; }
.nav-outer .nav { position: relative; top: auto; }
section[id], footer[id] { scroll-margin-top: 96px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink-900); color: var(--cream-50); padding: 10px 16px; border-radius: var(--radius-md); z-index: 200; }
.skip-link:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--saffron-600); outline-offset: 3px; }
.search-row:focus-within { border-color: var(--ink-900); box-shadow: var(--shadow-md); }
.search-row input:focus-visible { outline: 0; }

.country-flag img { width: 38px; height: 26px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(27,34,53,.14); display: block; }
.country-meta { font-size: 14px; color: var(--ink-700); margin-top: 8px; }
.country-card[data-featured="true"] .country-meta { color: rgba(250,246,236,.82); }
.country-card[data-featured="true"] .country-name { color: var(--cream-50); }
.country-name { color: inherit; }
.country-card[hidden] { display: none; }
.grid-note, .grid-empty { text-align: center; color: var(--ink-700); font-size: 15px; margin: 28px auto 0; max-width: 640px; }
.grid-empty { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; }
footer .col-links a img.mini-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; flex: none; }

footer .footer-bottom { max-width: 1200px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.10); display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; font-size: 13.5px; color: rgba(250,246,236,.55); }
footer .footer-bottom .copyright { border: 0; margin: 0; padding: 0; max-width: none; text-align: left; font-size: inherit; color: inherit; }

.section-tint { background: var(--cream-100); }
.range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.range-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px 18px 24px; display: flex; flex-direction: column; }
.range-pic { background: #fff; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 18px; }
.range-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.range-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin: 0 6px 8px; }
.range-card p { font-size: 16px; line-height: 1.55; color: var(--ink-700); margin: 0 6px; }
.range-cta { display: flex; justify-content: center; margin-top: 36px; }

.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fact { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; border-top: 4px solid var(--saffron-500); }
.fact h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.fact p { font-size: 16px; line-height: 1.55; color: var(--ink-700); margin: 0; }

.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.open { border-color: var(--ink-900); box-shadow: var(--shadow-sm); }
.faq-question { width: 100%; display: flex; align-items: center; gap: 16px; background: none; border: 0; padding: 18px 18px 18px 22px; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: var(--radius-md); min-height: 56px; }
.faq-question h3 { font-family: var(--font-sans); font-weight: 500; font-size: 16.5px; line-height: 1.4; letter-spacing: 0; color: var(--ink-900); margin: 0; flex: 1; }
.faq-icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cream-100); border-radius: 50%; color: var(--ink-700); transition: transform var(--dur-base) var(--ease), background var(--dur-micro) var(--ease); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--saffron-500); color: var(--ink-900); }
.faq-answer { display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-answer-inner { padding: 4px 22px 22px; color: var(--ink-700); font-size: 16px; line-height: 1.6; }

.notfound { text-align: center; padding: 120px 0 96px; }
.notfound p { color: var(--ink-700); max-width: 520px; margin: 16px auto 28px; }

@media (max-width: 980px) {
  .range-grid, .fact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  footer .col-links { gap: 2px; }
  footer .col-links a { min-height: 44px; }
  footer .contact a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 560px) {
  .country-card { padding: 20px; }
  .hero-trust .dot { display: none; }
  .hero-trust { gap: 8px 18px; }
  .hero-badge { font-size: 11.5px; letter-spacing: .08em; padding: 9px 14px; }
  .range-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
  .range-card { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: start; }
  .range-pic { grid-row: 1 / span 2; margin-bottom: 0; border-radius: 12px; }
  .range-card h3 { align-self: end; }
  .fact-grid { grid-template-columns: 1fr; }
  .range-card { padding: 12px 12px 18px; border-radius: 20px; }
  .range-card h3 { font-size: 19px; margin: 0 2px 6px; }
  .range-card p { font-size: 14.5px; margin: 0 2px; }
  .fact { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Mulberry Silk Company hub ---- */
/* Two stores: a centred pair of cards, no search row. One column on a phone. */
.country-grid-duo { grid-template-columns: repeat(2, minmax(260px, 380px)); justify-content: center; }
@media (max-width: 640px) { .country-grid-duo { grid-template-columns: 1fr; } }
/* Five ranges: one row on a wide screen, three then two below that, the shared rules take over on a phone. */
.range-grid-five { grid-template-columns: repeat(5, 1fr); }
.range-grid-five .range-card h3 { font-size: 22px; }
@media (max-width: 1180px) { .range-grid-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) { .range-grid-five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .range-grid-five { grid-template-columns: 1fr; } .range-grid-five .range-card h3 { font-size: 19px; } }
/* Range cards are links: no underline on the card text, a firmer border on hover. */
.range-card { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.range-card:hover { border-color: var(--border-strong); color: inherit; }