/* Division bar: the four ThomKat / TLR divisions, shown at the top of every page header.
   Markup lives in each page; mark the current division with aria-current="page". */
:root { --division-h: 44px; }
.divisions { position: relative; z-index: 21; background: #171217; color: #fffdfb; font-family: "DM Sans", sans-serif; }
.divisions-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.division { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--division-h); padding: 0 14px; border-left: 1px solid rgba(255, 253, 251, .13); color: rgba(255, 253, 251, .8); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; line-height: 1.15; text-align: center; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease; }
.division:last-child { border-right: 1px solid rgba(255, 253, 251, .13); }
.division b { color: #f04e8a; font: 500 10px "DM Mono", monospace; letter-spacing: .06em; }
.division:hover, .division:focus-visible { background: rgba(255, 253, 251, .08); color: #fffdfb; }
.division:focus-visible { outline: 2px solid #f04e8a; outline-offset: -2px; }
.division[aria-current="page"] { background: #f04e8a; color: #171217; }
.division[aria-current="page"] b { color: #171217; }
@media (max-width: 680px) {
  :root { --division-h: 48px; }
  .divisions-inner { width: 100%; }
  .division { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; font-size: 9px; letter-spacing: .05em; }
  .division:first-child { border-left: 0; }
  .division:last-child { border-right: 0; }
  .division b { font-size: 8px; }
}
@media (max-width: 360px) { .division { font-size: 8.5px; letter-spacing: .02em; } .division b { display: none; } }

/* One header look on every page: the ThomKat mark, the name in DM Sans, the warm bar with a thin line, the same
   link style — exactly like the boutique pages (home, alterations, consign, gallery, policies, rent, suits).
   Pages that build their own header add class="tk-head" to it; each page keeps its own links. */
header.tk-head { background: rgba(255, 253, 251, .94); border-bottom: 1px solid #d9ced1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
header.tk-head .nav, header.tk-head > .wrap { width: min(1180px, calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 0; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header.tk-head .brand { display: flex; align-items: center; gap: 11px; color: #171217; text-decoration: none; font: inherit; }
header.tk-head .brand svg { width: 42px; height: 42px; flex: none; }
header.tk-head .brand-name { max-width: none; font: 700 15px/1.03 "DM Sans", sans-serif; letter-spacing: .075em; color: #171217; }
header.tk-head .nav-links { gap: 22px; color: #564c51; font: 600 13px "DM Sans", sans-serif; }
header.tk-head .xp-btn { font: 600 13px "DM Sans", sans-serif; color: #564c51; }
header.tk-head .back, header.tk-head .back-link { padding: 0; color: #564c51; font: 600 13px/1.2 "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none; }
header.tk-head .back:hover, header.tk-head .back:focus-visible, header.tk-head .back-link:hover, header.tk-head .back-link:focus-visible { color: #b52f62; }
@media (max-width: 760px) { header.tk-head .nav-links .hide-mobile { display: none; } }
@media (max-width: 680px) { header.tk-head .nav, header.tk-head > .wrap { width: calc(100% - 34px); min-height: 72px; gap: 14px; } }
@media (max-width: 520px) {
  header.tk-head .brand-name { font-size: 14px; letter-spacing: .05em; white-space: nowrap; }
  header.tk-head .back, header.tk-head .back-link { font-size: 12px; white-space: nowrap; }
  header.tk-head .nav-links .xp-dd ~ .back-link { display: none; }   /* phones: the Explore menu already lists every page */
}
/* The black strip above some headers (shop, divisions, consignor pages): one style everywhere. */
.announcement, .tk-strip { padding: 10px 17px; color: #fffdfb; background: #171217; text-align: center; font: 10px/1.4 "DM Mono", monospace; letter-spacing: .05em; text-transform: none; }

/* One footer look on every page (the home page's): logo + name like the header, a pink "Explore" label,
   the links in rows. */
footer .brand svg { width: 42px; height: 42px; flex: none; }
footer .brand .brand-name { max-width: none; font: 700 15px/1.03 "DM Sans", sans-serif; letter-spacing: .075em; color: #171217; }
footer .footer-nav { max-width: 560px; }
footer .footer-nav .mono { margin: 0 0 14px; color: #b52f62; font: 400 11px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 11px 26px; font-size: 12px; }
footer .footer-links a { color: #564c51; }
footer .footer-links a:hover, footer .footer-links a:focus-visible { color: #b52f62; }

/* ---- phones and tablets (audit 2026-11-14) -------------------------------------------------------------- */
/* Boutique pages (class tk-boutique): between phone and desktop the full menu does not fit, so it folds into the
   ☰ button there too (it used to run off a 768px tablet). Same look as their phone menu. */
@media (min-width: 681px) and (max-width: 1040px) {
  header.tk-boutique .nav { height: 72px; }
  header.tk-boutique .brand { min-width: auto; }
  header.tk-boutique .nav-links { display: none; position: absolute; top: calc(72px + var(--division-h, 0px)); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px max(24px, calc((100% - 1180px) / 2)) 25px; background: var(--paper, #eee); border-bottom: 1px solid var(--line, #d9ced1); }
  header.tk-boutique .nav-links.open { display: flex; }
  header.tk-boutique .menu-button { display: grid; }
  header.tk-boutique .nav-links .xp-dd { width: 100%; }
  header.tk-boutique .nav-links .xp-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; font-size: inherit; }
  header.tk-boutique .nav-links .xp-list { position: static; box-shadow: none; border: 0; padding: 13px 0 0 15px; background: transparent; min-width: 0; }
  header.tk-boutique .nav-links .xp-list a { padding: 5px 0; font-size: inherit; font-weight: 600; white-space: normal; }
}
/* Pop-up windows never taller than the screen: they scroll inside. */
.modal-backdrop .modal { max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-width: 680px) {
  /* The shop's piece window: its × stays in reach while you scroll the photos and details. */
  .product-modal .pm-close { position: sticky; top: 8px; display: block; margin: 8px 8px -48px auto; z-index: 6; }
  /* iPhones zoom into any box with text under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]), select, textarea { font-size: 16px !important; }
  /* Fingers, not mouse pointers. */
  .icon-button, .menu-button, #searchToggle { min-width: 40px; min-height: 40px; }
  #navLinks .nav-dropdown-toggle, #navLinks .xp-btn { min-height: 44px; }
  .modal-close { min-width: 40px; min-height: 40px; }
  .announcement, .tk-strip { font-size: 11px; }
}

/* ---- desktop screens (audit 2026-11-14) ------------------------------------------------------------------ */
@media (min-width: 681px) {
  /* Page content lines up with the header and footer (1180px wide, 24px gutters) instead of 1120/1200/1240. */
  main.container, main.wrap, main.login-page, .portal > .container, main.page:not([id]) { width: min(1180px, calc(100% - 48px)); }
  /* In-page links (#prices, #hours, #recreation ...) stop below the sticky header; rules a page sets itself still win. */
  :where(main [id], section[id]) { scroll-margin-top: 96px; }
}
@media (min-width: 761px) {
  /* The shop's "Find your piece" block sat inside .page and was inset a second time (1184px inside 1240px). */
  .page > .shop-tiles { width: auto; margin-left: 0; margin-right: 0; }
}
@media (min-width: 681px) {
  /* The piece window's round close button sat on top of the second photo thumbnail: give it its own strip above the photos. */
  .product-modal .pm-close { top: 10px; right: 14px; }
  .product-modal .pm-gallery { margin-top: 62px; }
  /* Checkout: breathing room between the payment choices and the Pay button. */
  .button.pay { margin-top: 18px; }
}

/* Home page menus: an open Explore list steps aside while Gowns / TLR / About / Policy is open or hovered
   (it used to stay open on top of them). */
@media (min-width: 681px) {
  .nav-links:has(.nav-dropdown:hover, .nav-dropdown.open) .xp-dd.open .xp-list { display: none; }
}
/* The shop's piece window on a tablet: no 9px sideways wobble inside it. */
@media (min-width: 681px) and (max-width: 900px) { dialog.product-modal { overflow-x: hidden; } }