/* ================================================================
   Vastra Vision — house finish
   Loaded after each page stylesheet and before motion.css.
   Colour, type, and surface only. Motion stays in motion.css.
   ================================================================ */

body > nav,
nav.legal-nav {
  background: rgba(246, 241, 232, 0.88);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border-bottom: 1px solid rgba(26, 22, 18, 0.07);
}
body > nav .nav-logo img,
nav.legal-nav .nav-logo img { height: 46px; }
@media (max-width: 480px) {
  body > nav .nav-logo img,
  nav.legal-nav .nav-logo img { height: 38px; }
}
body > nav .nav-links a,
nav.acct-nav .acct-nav-cats a {
  font-weight: 500;
  letter-spacing: 0.18em;
}
body > nav .cart-btn,
nav.legal-nav .cart-btn {
  box-shadow: inset 0 0 0 1px rgba(232, 200, 133, 0.32);
}
body > nav .nav-search-btn:hover,
nav .nav-search-btn:hover {
  transform: none;
  box-shadow: none;
  background: rgba(184, 93, 61, 0.06);
}

/* Photography sits on a studio ground, not a flat grey. */
.product-img,
.main-image-wrap,
.thumb-btn,
.wl-card .wl-img,
.cart-item-img,
.empty-grid img,
.search-result img,
.qv-img-wrap,
.qv-thumb {
  background: #E6DCCB;
}
.product-img { box-shadow: 0 4px 18px rgba(26, 22, 18, 0.045); }
.main-image-wrap { box-shadow: 0 12px 32px rgba(26, 22, 18, 0.065); }
.product-card:hover .product-img { box-shadow: 0 8px 24px rgba(26, 22, 18, 0.08); }
.product-card .product-name {
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.product-card .product-material { line-height: 1.5; min-height: 3em; }
.product-card .product-price { margin-top: auto; padding-top: 0.3rem; }
.product-card .add-btn { min-height: 44px; margin-top: 0.8rem; }
.product-tag,
.stock-badge { border-radius: 0; }

/* Homepage rhythm. Classed sections keep their own padding. */
section { padding: clamp(2.8rem, 5.2vw, 4.6rem) var(--gutter-x); }
.section-head { margin-bottom: 1.8rem; max-width: 1200px; margin-inline: auto; }
.section-head .btn-ghost { min-height: 44px; }
.section-title { text-wrap: balance; }
.hero { padding: 0; min-height: 100svh; }
.hero-left { min-height: 100svh; }
.hero-title { letter-spacing: -0.03em; }
.hero-desc { max-width: 430px; }
.featured-grid { max-width: 1200px; padding-inline: 0; }
.collections-slider { border: none; }
.collections-slide .col-info { padding-bottom: 5rem; }
.why-section { background: transparent; }
.why-card,
.value-card,
.family-card,
.trust-card2,
.exp-card,
.contact-card {
  background: rgba(255, 252, 248, 0.72);
  border-color: rgba(26, 22, 18, 0.08);
  box-shadow: none;
}
.why-card:hover,
.value-card:hover,
.contact-card:hover {
  box-shadow: none;
  transform: none;
}
.contact-card::before { opacity: 1; height: 2px; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.designer-credit {
  background:
    radial-gradient(ellipse at top, rgba(201, 155, 61, 0.11), transparent 62%),
    #EFE6D6;
  padding-block: clamp(2.7rem, 5vw, 4.5rem);
}

footer:not(.acct-footer) {
  border-top: 1px solid rgba(201, 155, 61, 0.28);
}
.footer-brand-name { letter-spacing: 0.14em; }

/* Shop */
.shop-wrap { padding-top: 6.4rem; }
.shop-head h1 {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.shop-head p { font-size: 0.92rem; margin-top: 0.45rem; }
.filter-pill { background: transparent; min-height: 40px; }
.shop-tool select { background-color: rgba(255, 252, 248, 0.8); }

/* Product */
.p-name { letter-spacing: -0.03em; }
.p-price { letter-spacing: -0.02em; }
.breadcrumb { letter-spacing: 0.16em; }
.thumb-btn.active {
  border-color: var(--dark);
  box-shadow: none;
}
.main-image-wrap:hover .main-image { transform: none; }

/* Bag */
.cart-wrap { padding-top: 6.5rem; }
.cart-layout { grid-template-columns: minmax(0, 1fr) 420px; }
.cart-layout > * { min-width: 0; }
#discount-input { min-width: 0; }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
}
.cart-title {
  font-size: clamp(2.3rem, 4.5vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
}
.checkout-steps { border-bottom-color: rgba(26, 22, 18, 0.1); }
.checkout-steps li.active { border-bottom-color: var(--accent); color: var(--dark); }
.cart-items,
.checkout-panel,
.empty-cart {
  background: rgba(255, 252, 248, 0.78);
  border-color: rgba(26, 22, 18, 0.08);
}
.checkout-panel { padding: 1.6rem 1.45rem 1.45rem; }
.cart-item {
  grid-template-columns: 92px 1fr auto;
  padding: 1.15rem 1.1rem;
  gap: 1.05rem;
}
.cart-item-img { width: 92px; height: 118px; }
.cart-item-name { font-size: 1.15rem; letter-spacing: -0.015em; }
@media (max-width: 480px) {
  .cart-item { grid-template-columns: 76px 1fr; }
  .cart-item-img { width: 76px; height: 98px; }
}
.addr-card.chosen { box-shadow: inset 0 0 0 1px var(--dark); }
.ship-nudge { background: transparent; }

/* Order detail, inside the account main only */
.acct-main .status-step .dot {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.acct-main .status-step.done .dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}
.acct-main .status-step.current .dot {
  border-color: var(--gold);
  color: var(--gold-dim);
  box-shadow: 0 0 0 4px rgba(201, 155, 61, 0.2);
}
.acct-main .status-step:not(:last-child)::after {
  top: 6px;
  height: 1px;
  background: rgba(26, 22, 18, 0.12);
}
.acct-main .status-step.done:not(:last-child)::after,
.acct-main .status-step.done.next-done::after { background: var(--gold); }
.acct-main .item-row {
  grid-template-columns: 72px 1fr auto;
  padding: 0.95rem 0;
  border-bottom-color: rgba(26, 22, 18, 0.08);
}
.acct-main .item-row img { width: 72px; height: 92px; background: #E6DCCB; }
.acct-main .item-row .name { font-size: 1.12rem; letter-spacing: -0.015em; }
.acct-main .cancel-section { border-left-width: 2px; }
.acct-main .receipt-btn { background: transparent; }

.modal-overlay {
  background: rgba(20, 16, 13, 0.48);
  backdrop-filter: blur(8px);
}
.modal-card {
  background: #FBF7F1;
  box-shadow: 0 28px 70px rgba(26, 22, 18, 0.22);
  padding: 1.9rem 1.7rem;
}

/* Policies, contact, tracking, confirmation */
.legal-head h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  font-weight: 400;
}
.legal-head { border-bottom-color: rgba(26, 22, 18, 0.1); }
.legal-toc {
  background: rgba(255, 252, 248, 0.7);
  border-left: 2px solid var(--gold);
  box-shadow: none;
}
.legal-section h2 { font-size: 1.65rem; letter-spacing: -0.02em; }
.contact-hero,
.about-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 155, 61, 0.16), transparent 55%),
    #161310;
}
.contact-hero h1,
.about-hero h1 { letter-spacing: -0.03em; }
.contact-hero p,
.about-hero > p { color: #D2C2AB; }
.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.contact-card { display: flex; flex-direction: column; align-items: center; }
.contact-card .ic {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone); border-radius: 50%; color: var(--accent);
  font-size: 1rem;
}
.contact-card .ic svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.45rem; }
.contact-card a.btn-style { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
.contact-card a:last-child { margin-bottom: 0; }
.contact-card a:not(.btn-style):last-of-type { margin-bottom: 1rem; }
.founder-photo { box-shadow: 0 12px 36px rgba(26, 22, 18, 0.08); }
.founder-content .ab-eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--accent); }
.legal-section { scroll-margin-top: 6rem; }
.track-card,
.confirm-card {
  background: rgba(255, 252, 248, 0.94);
  border-color: rgba(26, 22, 18, 0.08);
  box-shadow: 0 24px 60px rgba(26, 22, 18, 0.08);
}
.confirm-card { border-top: 2px solid var(--gold); }
.confirm-title { letter-spacing: -0.03em; font-weight: 400; }
.tr-head h2 { font-size: 2rem; letter-spacing: -0.02em; }
.tr-items img { background: #E6DCCB; width: 56px; height: 74px; }

.search-panel { background: #F6F1E8; }
.search-input { letter-spacing: -0.02em; }

/* Keep the existing mobile composition, with room for readable headings. */
@media (max-width: 700px) {
  .hero-title { font-size: clamp(2.35rem, 10vw, 3rem); }
  .hero-left { padding-top: 6rem; padding-bottom: 4.75rem; }
  .hero-desc { max-width: 37ch; }
  .hero-ctas { gap: 0.75rem 1.25rem; }
  .section-head { align-items: flex-end; gap: 1rem; }
  .section-head .btn-ghost { font-size: 0.65rem; letter-spacing: 0.12em; }
  .section-label { margin-bottom: 0.65rem; letter-spacing: 0.2em; }
}
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .section-head { flex-wrap: wrap; }
  .section-head > div { flex-basis: 100%; }
  .section-head .btn-ghost { min-height: 32px; }
}