/* ==============================================================================================
   shop_chrome.css - the parts of the shared chrome that are the same on EVERY page of the shop,
   the storefront included: the full link footer, the mobile drawer, and the guards that keep the
   header looking the same whatever stylesheet a page carries underneath.

   Loaded after shopfront.css (and after shop_theme.css on the older pages), so it has the last word.
   ============================================================================================== */

/* ---------------------------------------------------------------- a green that reads on a light page
   shadcn's success green is pitched for a dark ground; on the light theme it needs to come down a
   couple of stops before a status label is comfortable to read, and go back up on the dark one. */
:root { --success: 142 64% 32%; }
html[data-theme="dark"] { --success: 142 69% 52%; }

/* on the dark theme the brand green is bright, so a badge painted with it wants dark lettering */
html[data-theme="dark"] .badge-now { color: hsl(142 80% 8%); }

/* ---------------------------------------------------------------- the header, whatever is underneath */
body > .marquee { position: relative; z-index: 95; }
body .site-header .logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
body .site-header .logo-mark {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none;
    background: #fff; color: hsl(var(--primary)); overflow: hidden; padding: 0;
    border: 1px solid hsl(var(--border)); box-shadow: none;
}
body .site-header .logo-mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; border-radius: 0; }
body .site-header .logo-name {
    font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15;
    color: hsl(var(--foreground)); letter-spacing: -.01em; text-transform: none;
}
body .site-header .logo-sub { font-size: 10.5px; color: hsl(var(--muted-foreground)); font-weight: 500; }
body .site-header .seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
    background: hsl(var(--muted)); cursor: pointer; border: none; height: auto;
}
body .site-header .seg span {
    padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
    color: hsl(var(--muted-foreground)); background: none;
}
body .site-header .seg span.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
body .site-header .ghost-icon {
    width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 999px;
    border: 1px solid transparent; background: transparent; color: hsl(var(--muted-foreground));
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
body .site-header .ghost-icon:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
body .site-header .ghost-icon svg { width: 18px; height: 18px; }
body .site-header .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 999px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    min-height: 0; white-space: nowrap; cursor: pointer; text-transform: none; letter-spacing: 0;
}
body .site-header .btn-outline {
    border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
    box-shadow: none;
}
body .site-header .btn-outline:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
body .site-header .btn-primary {
    border: 1px solid transparent; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    box-shadow: 0 4px 14px hsl(var(--primary) / .3);
}
body .site-header .chip-btn { white-space: nowrap; height: 34px; }
body .site-header .nav-burger { display: none; }

/* ---------------------------------------------------------------- the drawer for narrow screens */
.mobile-nav { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.mobile-nav-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 0 14px; }
.mobile-nav a {
    display: block; padding: 11px 13px; border-radius: 10px; font-size: 14px; font-weight: 600;
    color: hsl(var(--foreground)); background: hsl(var(--muted)); text-align: center;
}
.mobile-nav a.strong { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ---------------------------------------------------------------- one page already shows the shop
   header, so a page's own brand bar underneath it is a duplicate */
.acct-topbar, .tools-header .brand-lockup, body > header > .brand { display: none; }
.bh-bar { position: static; top: auto; }

/* ---------------------------------------------------------------- the shop's footer, on every page */
.op-footer {
    margin-top: 56px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card));
    color: hsl(var(--muted-foreground)); font-family: var(--sans); font-size: 14px;
}
.op-footer-inner { width: min(1640px, 100% - 40px); margin-inline: auto; padding: 42px 0 34px; }
.op-footer-cols {
    display: grid; gap: 30px 26px;
    grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(140px, 1fr));
}
.op-footer-col h4 {
    margin: 0 0 12px; font-family: var(--display); font-size: 12px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: hsl(var(--foreground));
}
.op-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.op-footer-col a { color: hsl(var(--muted-foreground)); font-size: 13.5px; }
.op-footer-col a:hover { color: hsl(var(--primary)); }
.op-footer-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.op-footer-logo {
    width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none;
    background: #fff; border: 1px solid hsl(var(--border)); display: grid; place-items: center;
}
.op-footer-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.op-footer-brand-copy strong {
    display: block; font-family: var(--display); font-size: 15.5px; font-weight: 700;
    color: hsl(var(--foreground));
}
.op-footer-brand-copy small { display: block; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.op-footer-tag { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.7; }
.op-footer-bottom {
    margin-top: 32px; padding-top: 20px; border-top: 1px solid hsl(var(--border));
    display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap;
}
.op-footer-bottom small { font-size: 12px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.op-footer-pay { text-align: right; }

/* ---------------------------------------------------------------- content written before the theme
   Page bodies live in the database, where an author may have typed a colour straight onto an element.
   A hard-coded near-white was right on the old dark page and is invisible on this one, so it is pulled
   back to the page's own ink - unless that element also paints its own background, where it was meant. */
[style*="color:#fff"]:not([style*="background"]),
[style*="color: #fff"]:not([style*="background"]),
[style*="color:#FFF"]:not([style*="background"]),
[style*="color:white"]:not([style*="background"]),
[style*="color: white"]:not([style*="background"]),
[style*="color:rgba(255,255,255"]:not([style*="background"]),
[style*="color: rgba(255,255,255"]:not([style*="background"]),
[style*="color:rgba(255, 255, 255"]:not([style*="background"]),
[style*="color: rgba(255, 255, 255"]:not([style*="background"]) {
    color: hsl(var(--muted-foreground)) !important;
    -webkit-text-fill-color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------- a table never widens the page */
.op-scroll-x { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- every screen, down to a small phone */
@media (max-width: 1180px) {
    .op-footer-cols { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 1100px) {
    body .site-header .nav-burger { display: inline-flex; }
    body .site-header .main-nav { display: none; }
    .op-footer-inner { width: min(1640px, 100% - 28px); }
}
@media (max-width: 860px) {
    body .site-header .header-inner { gap: 8px; }
    .op-footer-inner { width: calc(100% - 24px); padding: 34px 0 28px; }
    .op-footer-bottom { flex-direction: column; }
    .op-footer-pay { text-align: left; }
}
@media (max-width: 720px) {
    body .site-header .hide-narrow { display: none; }
    .op-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 520px) {
    .mobile-nav-inner { grid-template-columns: 1fr; }
    .op-footer-inner { width: calc(100% - 20px); }
    .op-footer-cols { grid-template-columns: 1fr; }
    .op-footer-brand-col { text-align: left; }
}
@media (max-width: 400px) {
    body .site-header .header-inner { gap: 5px; }
    body .site-header .logo-name { font-size: 13.5px; }
}

/* the shop still has to say whose shop it is on a phone: the strapline goes, the name stays */
@media (max-width: 460px) {
    body .site-header .logo-sub { display: none; }
    body .site-header .logo-name { display: block; font-size: 13px; max-width: 42vw; overflow: hidden;
                                   text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 330px) {
    body .site-header .logo-name { display: none; }
}