/* Desktop layout (computers and wide tablets, 1024px and wider).
   Every page links this file with media="(min-width: 1024px)", so a phone never loads a single
   rule from it: phones keep exactly the layout they have today. It changes layout only — no
   colors, words or behaviour. The page elements are styled inline, which is why most rules
   here need !important. The dk-* class names are hooks added to the pages for this file only. */

/* ---------- The whole page ---------- */
body { overflow: visible !important; display: block !important; }
.page { max-width: none !important; width: 100% !important; }
.screen {
  max-width: none !important;
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Bottom tab bar becomes a top navigation bar ---------- */
.dk-tabs {
  order: -2;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 72px;
  box-sizing: border-box;
  justify-content: flex-end !important;
  align-items: center;
  gap: 8px;
  padding: 0 calc(max(0px, (100% - 1200px) / 2) + 40px) !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e4e0da;
}
/* The DC Lash Bar logo at the left of the top bar (owner, 2026-10-01: "add the logo"). */
.dk-tabs::before {
  content: "";
  margin-right: auto;
  width: 54px;
  height: 48px;
  background: url("../assets/dclb-logo.png") left center / contain no-repeat;
}
.dk-tabs > a {
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  height: 72px;
  box-sizing: border-box;
  padding: 0 18px;
  border-bottom: 1px solid transparent;
}
.dk-tabs > a svg { width: 18px; height: 18px; }
.dk-tabs > a > div { font-size: 11px !important; }
/* the page you are on is the one drawn in black; underline it too */
.dk-tabs > a:has(> div[style*="color: #161513"]) { border-bottom-color: #161513; }
.dk-tabs > a:hover { opacity: .7; }

/* The page's own title bar sits under the navigation, lined up with the content. */
.dk-top {
  order: -1;
  padding: 28px calc(max(0px, (100% - 1200px) / 2) + 40px) 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.dk-home .dk-top { display: none !important; } /* its only content, the DCLB wordmark, is in the navigation now */

/* ---------- The content area ---------- */
.dk-main {
  overflow: visible !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 24px 40px 80px !important;
}
.dk-main h1 { font-size: 36px !important; }

/* The action button bar (e.g. "Choose date & time") on pages that keep one: pinned to the bottom,
   the button the same width as the reading column. */
.dk-cta {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 16px calc(max(0px, (100% - 680px) / 2) + 40px) 20px !important;
}

/* ---------- Reading pages: Confirm, Manage booking, Profile, Feedback (and the smaller screens) ---------- */
.dk-read .dk-main { max-width: 680px; padding-top: 32px !important; }
.dk-read.dk-card .dk-main {
  margin-top: 16px;
  margin-bottom: 64px;
  padding: 48px 56px 56px !important;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(22,21,19,0.05), 0 16px 40px rgba(22,21,19,0.08);
}
.dk-read .dk-top { padding-left: calc(max(0px, (100% - 680px) / 2) + 40px) !important; padding-right: calc(max(0px, (100% - 680px) / 2) + 40px) !important; }
.dk-confirm .dk-main { padding-top: 64px !important; }
.dk-confirm #svc-photo-wrap { height: 280px !important; border-radius: 12px; }

/* Screens that stay a single narrow column (one-time code, preference questions). */
.dk-narrow .screen { max-width: 520px !important; margin: 0 auto; padding-left: 24px !important; padding-right: 24px !important; }
.dk-narrow .dk-main { padding: 0 !important; }

/* ---------- Sign-in: photo on one side, the form on the other ---------- */
.dk-signin .screen {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  height: 100vh !important;
  min-height: 680px;
  overflow: hidden !important;
}
.dk-signin .dk-si-photo,
.dk-signin .dk-si-overlay {
  position: relative !important;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: end;
  justify-self: center;
  width: min(600px, 40vw, calc((100vh - 60px) * 1200 / 1660)) !important;
  height: auto !important;
  aspect-ratio: 1200 / 1660;
  padding-top: 0 !important;
}
.dk-signin .dk-si-photo img,
.dk-signin .dk-si-overlay img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.dk-signin .dk-si-photo { z-index: 1; }
.dk-signin .dk-si-overlay { z-index: 2; }
/* the photo half is white, so the photo sits on it without a visible edge */
.dk-signin .screen::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  background: #ffffff;
  border-right: 1px solid #e4e0da;
}
.dk-signin .dk-si-card {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: 460px;
  height: auto !important;
  margin: 0 !important;
  padding: 40px 40px 36px !important;
  align-self: auto !important;
}
.dk-signin .dk-si-note { grid-column: 2; grid-row: 3; justify-self: center; width: 460px; text-align: center; }

/* ---------- Home: a wider hero, sections in columns ---------- */
.dk-home .dk-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 48px;
  align-content: start;
  align-items: start;
}
.dk-home :where(.dk-main > div) { grid-column: 1 / -1; }
.dk-home .dk-main > div { padding-left: 0 !important; padding-right: 0 !important; }
.dk-home .dk-h-welcome h1 { font-size: 44px !important; line-height: 1.15 !important; }
.dk-home .dk-h-welcome { padding-top: 8px !important; padding-bottom: 8px; }

/* Home (nothing booked): two columns that each stack from the top (owner review, 2026-10-01).
   Left: the recommendation, then the new-service card. Right: Past services, Meet our newest artists,
   Featured product. Rows 2-3 hold the first two right-hand cards; row 4 is the flexible one, so any extra
   height of the recommendation goes there (under Featured product) instead of opening gaps between the
   right-hand cards; the new-service card starts in row 5, right under the recommendation. */
.dk-home:not(.dk-home-up) .dk-main { grid-template-rows: auto auto auto 1fr auto; }
.dk-home #reco { grid-column: 1 / 8; grid-row: 2 / 5; }
.dk-home #reco-photo { aspect-ratio: 16 / 9 !important; }
.dk-home #reco-name { font-size: 40px !important; }
.dk-home #reco-sub { font-size: 18px !important; }
.dk-home #newpkg { grid-column: 1 / 8; grid-row: 5; }
.dk-home .dk-h-past { grid-column: 8 / -1; grid-row: 2; }
.dk-home #newartists { grid-column: 8 / -1; grid-row: 2; }
.dk-home #featprod { grid-column: 8 / -1; grid-row: 3 / 6; }
.dk-home #note-highlight { display: none !important; } /* no longer shown on Home (owner, 2026-10-01) */
/* without a recommendation (a guest with no history): Past services across the top, the two smaller cards side by side */
.dk-home .dk-main:has(> #reco[style*="display: none"]) { grid-template-rows: none; }
.dk-home .dk-main:has(> #reco[style*="display: none"]) > .dk-h-past { grid-column: 1 / -1; grid-row: 2; }
.dk-home .dk-main:has(> #reco[style*="display: none"]) > #newartists { grid-column: 1 / 7; grid-row: 3; }
.dk-home .dk-main:has(> #reco[style*="display: none"]) > #featprod { grid-column: 7 / -1; grid-row: 3; }
.dk-home .dk-main:has(> #reco[style*="display: none"]) > #newpkg { grid-column: 1 / -1; grid-row: 4; }

/* My results and Our work side by side, as photo grids instead of sideways-scrolling rows */
.dk-home #results { grid-column: 1 / 7; grid-row: 7; }
.dk-home #work { grid-column: 7 / -1; grid-row: 7; }
/* My results alone (Our work hidden) takes the full width */
.dk-home .dk-main:has(> #work[style*="display: none"]) > #results { grid-column: 1 / -1; }
.dk-home .dk-main:has(> #results[style*="display: none"]) > #work { grid-column: 1 / -1; }
.dk-home #results-row,
.dk-home #work-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  overflow: visible !important;
}
/* six photos to a block ("View all" opens the rest on My profile) */
.dk-home #results-row > div:nth-child(n+7) { display: none; }
.dk-home .dk-main:has(> #results[style*="display: none"]) > #work #work-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dk-home #results-row > div,
.dk-home #work-row > div { width: auto !important; height: auto !important; aspect-ratio: 1; flex: none !important; }
.dk-home #results-row > div:hover,
.dk-home #work-row > div:hover { opacity: .85; }

/* The anniversary menu and Explore run the full width below the two columns; the menu's sections sit in two columns. */
.dk-home .dk-h-anniv { grid-column: 1 / -1; grid-row: 8; margin-top: 40px !important; }
.dk-home .dk-h-explore { grid-column: 1 / -1; grid-row: 9; margin-top: 40px !important; }
.dk-home #anniv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: start; }
.dk-home #anniv > :not(details) { grid-column: 1 / -1; }
.dk-home #anniv > div:last-of-type { display: none; } /* the closing rule line: each column ends on its own last item */
.dk-home #explore-tiles { gap: 24px !important; }
.dk-home #explore-tiles > a { width: auto !important; flex: 1 1 0; gap: 14px !important; }
.dk-home #explore-tiles > a > div:first-child { aspect-ratio: 4 / 3 !important; }
.dk-home #explore-tiles > a > div:last-child { font-size: 13px !important; }

/* Home (something booked): the upcoming appointment is the hero */
.dk-home-up .dk-h-up { grid-column: 1 / 8; grid-row: 2 / span 2; }
.dk-home-up .dk-h-up #up-name { font-size: 40px !important; }
.dk-home-up .dk-h-past { grid-column: 8 / -1; grid-row: 2; margin-top: 41px !important; } /* level with the appointment card, under its label */
.dk-home-up .dk-h-links { grid-column: 8 / -1; grid-row: 3; }
.dk-home-up #results { grid-column: 1 / -1; grid-row: 4; }
.dk-home-up #results-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dk-home-up .dk-h-explore { grid-row: 5; margin-top: 40px !important; }

/* ---------- Discover: the category tiles as a wider grid ----------
   Each tile is a photo with the category name UNDER it (DiscoveryMenu.html draws them that way).
   Three to a row; a last row of two shares the width, a last row of one takes all of it. */
.dk-discover .dk-main { padding-top: 24px !important; }
.dk-discover #cat-list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 40px 28px !important; }
.dk-discover #cat-list > a { grid-column: span 2 !important; }
.dk-discover #cat-list > a:last-child:nth-child(3n+1) { grid-column: 1 / -1 !important; }
.dk-discover #cat-list > a:last-child:nth-child(3n+2),
.dk-discover #cat-list > a:nth-last-child(2):nth-child(3n+1) { grid-column: span 3 !important; }
.dk-discover #cat-list > a > div:first-child { aspect-ratio: auto !important; height: 320px; border-radius: 12px; }
.dk-discover #cat-list > a > div:last-child { padding: 14px 2px 0 !important; font-size: 26px !important; }
.dk-discover #cat-list > a img { transition: transform .6s ease; }
.dk-discover #cat-list > a:hover img { transform: scale(1.03); }

/* ---------- Service list: two columns, with photos ---------- */
.dk-services #svc-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 32px !important;
}
.dk-services #svc-list > a { padding: 20px 0 !important; }
.dk-services #svc-list > a > div:first-child > div:first-child { width: 112px !important; height: 112px !important; margin-right: 24px !important; }
.dk-services #svc-list > a > div:first-child > div:last-child > div:first-child { font-size: 24px !important; }
.dk-services #svc-list > a > div:first-child > div:last-child > div:last-child { font-size: 15px !important; margin-top: 6px !important; }
.dk-services #svc-list > a > div:last-child { font-size: 18px !important; }
.dk-services #svc-list > div { grid-column: 1 / -1; }
.dk-services #svc-list > a:hover { opacity: .7; }

/* ---------- Customize: photo on the left, options on the right ---------- */
.dk-customize .screen {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 496px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 64px;
  min-height: 0;
  padding-left: 0 !important; padding-right: 0 !important;
  padding-bottom: 72px !important;
}
.dk-customize .dk-tabs { grid-column: 1 / -1; grid-row: 1; }
.dk-customize .dk-top { grid-column: 1 / -1; grid-row: 2; }
.dk-customize .dk-main { display: contents; }
.dk-customize #svc-photo-wrap {
  grid-column: 2; grid-row: 3 / 6;
  margin: 24px 0 0 0 !important;
  height: 620px !important;
  border-radius: 12px;
}
.dk-customize .dk-cz-info { grid-column: 3; grid-row: 3; padding-top: 24px; }
.dk-customize .dk-cz-info h1 { font-size: 40px !important; }
.dk-customize .dk-cta { grid-column: 3; grid-row: 4; position: static; padding: 24px 0 0 !important; border-top: 0 !important; background: transparent !important; }
/* a service without a photo: one centred column */
.dk-customize .screen:has(#svc-photo-wrap[style*="display: none"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); }
.dk-customize .screen:has(#svc-photo-wrap[style*="display: none"]) .dk-cz-info,
.dk-customize .screen:has(#svc-photo-wrap[style*="display: none"]) .dk-cta { grid-column: 2; }

/* ---------- Booking calendar: calendar | times | booking summary ---------- */
.dk-booking .screen {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 410px) minmax(0, 340px) minmax(0, 290px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: 40px;
  min-height: 0;
  padding-bottom: 72px !important;
}
.dk-booking .dk-tabs { grid-column: 1 / -1; grid-row: 1; }
.dk-booking .dk-top { grid-column: 1 / -1; grid-row: 2; padding-bottom: 20px !important; }
.dk-booking .dk-main { display: contents; }
.dk-booking .dk-bk-a { grid-column: 2; grid-row: 3; }
.dk-booking .dk-bk-d { grid-column: 2; grid-row: 4; align-self: start; }
.dk-booking .dk-bk-b { grid-column: 3; grid-row: 3 / -1; }
.dk-booking .dk-bk-b #selWrap > div:first-child { margin-top: 0 !important; }
.dk-booking .dk-bk-c,
.dk-booking .dk-cta {
  grid-column: 4;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(22,21,19,0.05), 0 16px 40px rgba(22,21,19,0.08);
}
.dk-booking .dk-bk-c { grid-row: 3 / 5; padding: 0 24px 4px; border-radius: 12px 12px 0 0; overflow: hidden; }
.dk-booking .dk-cta { grid-row: 5; align-self: start; position: static; padding: 8px 24px 24px !important; border-top: 0 !important; border-radius: 0 0 12px 12px; clip-path: inset(0 -60px -60px -60px); }
.dk-booking #dkSummary { display: block !important; padding-top: 0; }
.dk-booking #dkSummary > div:nth-child(2),
.dk-booking #dkSummary > div:first-child:not(.dk-sum-photo) { border-top: 0 !important; }
.dk-booking .dk-sum-photo { margin: 0 -24px 8px; height: 170px; overflow: hidden; background: #f1efeb; }
.dk-booking .dk-sum-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dk-booking #chooseBtn { height: auto !important; min-height: 48px; padding: 12px 10px; line-height: 1.5; }
.dk-booking .dk-bk-a h1 { font-size: 34px !important; }
/* a slightly bigger month view: it has the room */
.dk-booking .dk-bk-cal #cells > div > div { width: 38px !important; height: 38px !important; font-size: 16px !important; }
.dk-booking .dk-bk-cal { padding: 24px !important; }

/* Narrower computers (1024-1279px): the three booking columns are tighter, so the month view
   keeps its phone-sized days and the columns sit closer together. */
@media (max-width: 1279px) {
  .dk-booking .screen { grid-template-columns: minmax(0, 1fr) minmax(0, 360px) minmax(0, 280px) minmax(0, 260px) minmax(0, 1fr); column-gap: 24px; }
  .dk-booking .dk-bk-cal { padding: 16px !important; }
  .dk-booking .dk-bk-cal #cells > div > div { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  .dk-booking .dk-bk-c { padding: 0 18px 4px; }
  .dk-booking .dk-cta { padding: 8px 18px 20px !important; }
  .dk-booking .dk-sum-photo { margin: 0 -18px 8px; }
}

/* On a computer the Beta sign sits beside the DCLB wordmark in the top bar (frame.css has the sign). */
body::after {
  top: 24px;
  right: auto;
  left: calc(max(0px, (100% - 1200px) / 2) + 40px + 68px);
}
/* The sign-in page has no top bar: keep the sign in the top-right corner there. */
body.dk-signin::after { left: auto; right: 24px; }
.dk-tabs > a.dk-tab-profile { display: flex !important; }

/* Section cards on a computer, matching the phone (owner, 2026-10-01). */
.dk-home #reco, .dk-home .dk-h-past, .dk-home #newpkg, .dk-home #likes, .dk-home #newartists, .dk-home #featprod, .dk-home #results, .dk-home #anniv, .dk-home .dk-h-explore {
  background: #ffffff; border-radius: 16px; padding: 24px !important; border-top: 0 !important;
  box-shadow: 0 1px 2px rgba(22,21,19,0.04), 0 6px 20px rgba(22,21,19,0.06); margin-top: 24px;
}
/* Every card keeps its inner padding: this must out-rank ".dk-home .dk-main > div" above, which strips the side padding. */
.dk-home .dk-main > :is(#reco, .dk-h-past, #newpkg, #newartists, #featprod, #results, #anniv, .dk-h-explore) { padding: 28px 32px !important; }
.dk-home #reco { border: 1px solid #e4e0da; box-shadow: 0 2px 4px rgba(22,21,19,0.06), 0 18px 44px rgba(22,21,19,0.16); }
body.dk-home::after { right: auto; left: calc(max(0px, (100% - 1200px) / 2) + 40px + 68px); }

/* Request a visit: the form sits in the same centered card as Feedback; the card has the padding. */
.dk-request .dk-main > #form, .dk-request .dk-main > #done { padding-left: 0 !important; padding-right: 0 !important; }
.dk-request .dk-main > #form { padding-top: 0 !important; }
/* A card page's card hugs its content rather than stretching to the bottom of the window as an empty white block. */
.dk-read.dk-card .dk-main { flex-grow: 0 !important; }
.dk-home #likes { grid-column: 1 / 8; grid-row: 6; }
.dk-discover #cat-list { display: block !important; max-width: 760px; margin: 0 auto; }

/* Owner's outline, 2026-10-02: nav is Home, Booking, Profile; home reads top to bottom:
   greeting, upcoming appointments, recommended, then explore / newest artists / shop side by side. */
.dk-tabs > a.dk-tab-shop { display: none !important; }
.dk-home .dk-main { grid-template-rows: none !important; }
.dk-home .dk-main > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
.dk-home #up-empty, .dk-home .dk-h-up, .dk-home #reco, .dk-home .dk-h-past { width: 100%; max-width: 760px; justify-self: center; box-sizing: border-box; }
.dk-home .dk-h-up { margin-top: 0 !important; }
.dk-home .dk-h-extras { display: grid; grid-template-columns: 5fr 4fr; grid-template-rows: auto 1fr; gap: 24px; margin-top: 24px !important; }
.dk-home .dk-h-extras .hx-card { margin: 0; }
.dk-home #hx-explore { grid-row: 1 / span 2; }
.dk-home #hx-explore .hx-face { max-width: 440px; margin-left: auto; margin-right: auto; }
.dk-home #up-empty { padding: 24px 28px !important; margin: 0 !important; }
.dk-home .dk-h-past.hx-card { padding: 4px 28px !important; margin: 20px 0 0 !important; }
.dk-home #reco { margin-top: 20px !important; }
.dk-home .dk-h-extras { grid-template-rows: auto auto; align-items: start; }
.dk-home .dk-h-extras { grid-template-rows: auto 1fr !important; }
.dk-home #up-empty { margin-top: 16px !important; }
/* Greeting and every section share one centered column, so they all start at the same left edge (owner, 2026-10-02). */
.dk-home .dk-h-welcome, .dk-home .dk-h-extras { width: 100%; max-width: 760px; justify-self: center; box-sizing: border-box; }

/* ---------- Home as a dashboard (owner, 2026-10-02: "The computer version should show a dashboard so that
   all sections fit"). Three columns on one screen: what's booked (or not) and her history on the left, the
   recommendation or newest artists in the middle, Explore services down the right. ---------- */
.dk-home .dk-main { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto auto 1fr !important;
  column-gap: 24px !important; row-gap: 20px; max-width: 1240px; margin: 0 auto; align-items: start; }
.dk-home .dk-h-extras { display: contents !important; }
.dk-home .dk-main > .dk-h-welcome { grid-column: 1 / -1 !important; grid-row: 1 !important; max-width: none; justify-self: stretch; padding: 4px 0 0 !important; }
.dk-home .dk-h-welcome h1 { font-size: 34px !important; }
.dk-home .dk-main > #up-empty, .dk-home .dk-main > .dk-h-up { grid-column: 1 !important; grid-row: 2 !important; max-width: none; margin: 0 !important; }
.dk-home .dk-main > .dk-h-up { padding: 0 !important; }
.dk-home .dk-main > #reco { grid-column: 2 !important; grid-row: 2 !important; max-width: none; margin: 0 !important; }
.dk-home #reco-name, .dk-home-up .dk-h-up #up-name { font-size: 30px !important; }
.dk-home .dk-main > .dk-h-past { grid-column: 1 !important; grid-row: 3 !important; max-width: none; margin: 0 !important; }
.dk-home #hx-explore { grid-column: 3; grid-row: 2 / span 2; margin: 0; }
.dk-home #hx-explore .hx-face { max-width: 100%; }
/* Artists + shop travel together: side by side under the top row with nothing booked, stacked in the middle
   column beside an appointment, so no column is left with a gap. */
.dk-home .hx-side { grid-column: 1 / 3; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dk-home .hx-side .hx-card { margin: 0; }
.dk-home-up .hx-side { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 20px; }
/* A fourth, flexible row soaks up the height of Explore services, so it never pushes the other rows apart. */
.dk-home .dk-main { grid-template-rows: auto auto auto 1fr !important; align-content: start; }
.dk-home #hx-explore { grid-row: 2 / span 3 !important; }
.dk-home-up .hx-side { align-items: stretch; }

/* ---------- Home stacked (owner, 2026-10-02: "Make the computer version just stacked"). Replaces the
   three-column dashboard above: one centered column in the same order as the phone. ---------- */
.dk-home .dk-main { display: flex !important; flex-direction: column; align-items: stretch; gap: 20px;
  max-width: 760px; width: 100%; margin: 0 auto; }
.dk-home .dk-main > * { margin: 0 !important; max-width: none !important; width: 100%; box-sizing: border-box; }
.dk-home .dk-h-extras { display: flex !important; flex-direction: column; gap: 20px; }
.dk-home .hx-side { display: flex !important; flex-direction: column; gap: 20px; }
.dk-home .dk-h-extras .hx-card, .dk-home .hx-side .hx-card { margin: 0 !important; }
.dk-home #hx-explore .hx-face { max-width: 420px; margin-left: auto; margin-right: auto; }
.dk-home .dk-main > .dk-h-up { padding: 0 !important; }
.dk-home .dk-h-extras, .dk-home .hx-side { align-items: stretch !important; }
.dk-home .hx-pimg { flex-basis: 160px !important; }

/* Service menu on a computer: the photo on the left, the menu on the right (owner, 2026-10-03). */
.dk-discover .dk-main { display: grid !important; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 56px; align-items: start; max-width: 1120px; margin: 0 auto !important; box-sizing: border-box; }
.dk-discover #cat-cover { grid-column: 1; position: sticky; top: 24px; width: 100%; max-width: 400px !important; margin: 0 !important; border-radius: 12px; }
.dk-discover #cat-list { grid-column: 2; max-width: none; margin: 0 !important; }
.dk-discover #cat-list .bx-head { padding-top: 8px; }