/* ==========================================================================
   Just in time Watches — CMS bridge

   The theme owns its own templates and its own vocabulary (justintime.css).
   This file exists only for the pages still rendered from the CMS's
   Bootstrap-derived markup, to stop them looking like a different website.

   It replaced a 2,110-line version. That file had grown into a running argument
   with the CMS — every rule an override of an override — and most of it existed
   to force a light framework dark, which stopped being necessary when the
   palette moved to cream.

   This is deliberately small, and it should get smaller: every page converted
   to a theme template deletes rules from here rather than adding them. If it
   starts growing again, that is the signal to convert another page instead.

     1  Ground and type
     2  Controls
     3  Surfaces
     4  Product listing
     5  Suppressed marketplace furniture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ground and type
   -------------------------------------------------------------------------- */

body,
.aiz-main-wrapper,
main,
section {
    background-color: var(--jt-ground);
    color: var(--jt-ink);
    font-family: var(--jt-sans);
    font-weight: 300;
}

/* The CMS paints white plates behind content areas. On cream they read as a
   sheet of paper dropped on the page. Panels that genuinely float keep their
   white and are re-declared in section 3. */
.bg-white,
.bg-light,
.bg-soft-light,
section.bg-white {
    background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jt-display);
    font-weight: 400;
    color: var(--jt-ink-strong);
    letter-spacing: -0.012em;
}

.text-dark, .text-body, .fw-700, .fw-600, .fw-bold { color: var(--jt-ink) !important; }

/* ...except on a dark or coloured panel. Weight is not a colour: the rule above
   recolours bold text wherever it is, and the wallet's balance - bold, white,
   on bg-dark - came out dark brown on near-black. Text that its panel has
   made white stays white. */
.text-white .fw-700, .text-white .fw-600, .text-white .fw-bold,
.text-white.fw-700, .text-white.fw-600, .text-white.fw-bold { color: #fff !important; }
.text-secondary, .text-muted, .text-gray { color: var(--jt-ink-muted) !important; }
.text-blue, .text-primary { color: var(--jt-accent) !important; }

/* The utility bar hard-codes an inline #857E7E, which is 3.52:1 on cream and
   fails the 4.5 threshold for the 12px text it is applied to. An inline style
   outranks any class rule, so this is one of the few places !important is doing
   real work rather than papering over specificity. */
.top-navbar a,
.top-navbar span,
.lang-visibility a, .lang-visibility span,
.currency-visibility a, .currency-visibility span {
    color: var(--jt-ink-muted) !important;
}

/* Bootstrap's success green is 2.77:1 on cream — the worst reading on the
   site. WhatsApp ordering is a channel, so it is treated as a link. */
.order-via-whatsapp a,
.order-via-whatsapp span,
.text-success {
    color: var(--jt-accent) !important;
}

/* --------------------------------------------------------------------------
   2. Controls
   -------------------------------------------------------------------------- */

.btn {
    border-radius: 0 !important;
    font-family: var(--jt-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
    padding: 14px 28px;
    min-height: 48px;
    border-width: 1px;
    box-shadow: none !important;
    transition: background-color var(--jt-base) var(--jt-ease-io),
                border-color var(--jt-base) var(--jt-ease-io),
                color var(--jt-base) var(--jt-ease-io);
}

.btn-primary,
.btn-base-1,
.add-to-cart {
    background-color: var(--jt-accent) !important;
    border-color: var(--jt-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-base-1:hover,
.add-to-cart:hover {
    background-color: var(--jt-accent-bright) !important;
    border-color: var(--jt-accent-bright) !important;
}

.btn-outline-primary,
.btn-light,
.btn-secondary,
.buy-now {
    background-color: transparent !important;
    border-color: var(--jt-ink) !important;
    color: var(--jt-ink) !important;
}

.btn-outline-primary:hover,
.btn-light:hover,
.btn-secondary:hover,
.buy-now:hover {
    background-color: var(--jt-ink) !important;
    color: var(--jt-ground) !important;
}

/* The "soft" tints are a light-theme device that produces muddy surfaces; the
   Add to cart button was 1.22:1 against one of them. */
.bg-soft-primary, .bg-soft-blue, .bg-soft-secondary, .bg-soft-info {
    background-color: transparent !important;
    color: var(--jt-ink) !important;
}

.form-control,
select, textarea,
input[type='text'], input[type='email'], input[type='password'],
input[type='tel'], input[type='number'], input[type='search'] {
    background-color: var(--jt-paper) !important;
    border: 1px solid var(--jt-hairline) !important;
    border-radius: 0 !important;
    color: var(--jt-ink) !important;
    font-family: var(--jt-sans);
    font-size: 14px;
    font-weight: 300;
    min-height: 48px;
    box-shadow: none !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--jt-ink) !important;
}

/* The CMS draws a checkbox as a bordered span while the <label> wrapping it
   carries a white background of its own — which put a white plate behind every
   filter row and made the labels 1.12:1 white-on-white. */
label.aiz-checkbox,
label.aiz-radio {
    background-color: transparent !important;
    color: var(--jt-ink) !important;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 300;
}

.aiz-square-check,
.aiz-rounded-check {
    background-color: transparent !important;
    border: 1px solid var(--jt-ink-faint) !important;
    border-radius: 0 !important;
    transition: background-color var(--jt-fast) var(--jt-ease-io), border-color var(--jt-fast) var(--jt-ease-io);
}

label.aiz-checkbox:hover .aiz-square-check,
label.aiz-radio:hover .aiz-rounded-check { border-color: var(--jt-ink) !important; }

/* The tick is white on the accent, not the accent on the accent - which is
   what made a checked box a plain blue square that read as a bullet. */
.aiz-square-check:after { border-color: #fff !important; }
.aiz-rounded-check:after { background: #fff !important; }

.aiz-checkbox > input:checked ~ .aiz-square-check,
.aiz-checkbox > input:checked ~ .aiz-rounded-check,
.aiz-radio > input:checked ~ .aiz-square-check,
.aiz-radio > input:checked ~ .aiz-rounded-check {
    background-color: var(--jt-accent) !important;
    border-color: var(--jt-accent) !important;
}

.aiz-checkbox > input:focus-visible ~ .aiz-square-check,
.aiz-radio > input:focus-visible ~ .aiz-rounded-check {
    outline: 2px solid var(--jt-focus);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Surfaces

   The CMS outlines almost everything with a card border and a shadow. The
   design separates with space, and uses one hairline where a rule is genuinely
   needed.
   -------------------------------------------------------------------------- */

.card, .border, .border-top, .border-bottom, .border-left, .border-right,
.rounded, .rounded-1, .rounded-2 {
    border-color: var(--jt-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.card {
    background-color: transparent;
    border: 0 !important;
}

.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

hr { border-color: var(--jt-hairline); }

/* Panels that genuinely float keep their paper. */
.modal-content,
.cart-summary, .checkout-summary, .order-summary, #cart-summary,
.aiz-user-sidebar, .dashboard-sidebar,
.sub-cat-menu, .aiz-category-menu {
    background-color: var(--jt-paper) !important;
    border: 1px solid var(--jt-hairline) !important;
    border-radius: 0 !important;
}

.sub-cat-menu, .aiz-category-menu {
    box-shadow: 0 20px 50px rgba(65, 44, 23, 0.10) !important;
}

.sub-cat-menu a, .sub-cat-menu span, .sub-cat-menu li {
    color: var(--jt-ink) !important;
}

.aiz-side-nav-link {
    color: var(--jt-ink-muted) !important;
    border-left: 2px solid transparent;
    font-size: 14px;
}

.aiz-side-nav-link.active,
.aiz-side-nav-item.active > .aiz-side-nav-link {
    color: var(--jt-accent) !important;
    border-left-color: var(--jt-accent) !important;
    background: transparent !important;
}

.table, table { border-color: var(--jt-hairline); color: var(--jt-ink); font-size: 14px; }
.table th, table th { border-color: var(--jt-hairline) !important; color: var(--jt-ink-muted); font-weight: 500; }
.table td, table td { border-color: var(--jt-hairline) !important; font-variant-numeric: tabular-nums; }

.aiz-editor-data, .page-content, .blog-details-content {
    max-width: 68ch;
    line-height: 1.75;
    color: var(--jt-ink);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. Product listing

   The grid stays the CMS's — it carries the pagination, the price filter and
   the AJAX that keeps the URL in step. Only its presentation changes.
   -------------------------------------------------------------------------- */

/* The heading names the collection now, so it is set to open a page rather
   than to label a table. */
h1.fs-18.fs-md-20 {
    font-family: var(--jt-display) !important;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    text-transform: none !important;
    color: var(--jt-ink-strong) !important;
    margin-bottom: var(--jt-2);
}

#search_product_count, #searching_product {
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
    color: var(--jt-ink-muted) !important;
}

#search_product_count .fw-bold, #total_product_count {
    font-weight: 500 !important;
    color: var(--jt-ink-muted) !important;
}

/* The product cell: photograph on a plate in a fixed portrait frame, so a grid
   of watches shot at different proportions still lines up. */
.aiz-card-box { background: transparent !important; }

.row[class*='row-cols'] > .col { border: 0 !important; }
.row[class*='row-cols'] { row-gap: var(--jt-7); }

.image-hover-effect,
.aiz-card-box .position-relative.img-fit {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--jt-ground-raised);
    aspect-ratio: 1 / 1.41;
}

.image-hover-effect img,
.product-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
    transition: transform var(--jt-slow) var(--jt-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .image-hover-effect:hover img { transform: scale(1.04); }
}

/* A price is a specification, not a link: .text-primary would make a grid of
   watches read as a grid of buttons. */
span.text-primary,
.card .fw-700.text-primary {
    color: var(--jt-ink-strong) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: var(--jt-track) !important;
    font-variant-numeric: tabular-nums;
}

/* Sort: a hairline control, not a raised white box. The box is drawn by
   bootstrap-select's wrapper, not by the button inside it. */
.dropdown.bootstrap-select.form-control,
.bootstrap-select.form-control,
.bootstrap-select .btn-light {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jt-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    color: var(--jt-ink-muted) !important;
    font-size: 11px !important;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
}

.aiz-filter-sidebar .card,
.aiz-filter-sidebar section { background: transparent !important; border: 0 !important; }

.aiz-filter-sidebar h3, .aiz-filter-sidebar h4,
.aiz-filter-sidebar h5, .aiz-filter-sidebar .fw-700 {
    font-family: var(--jt-sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: var(--jt-track) !important;
    text-transform: uppercase !important;
    color: var(--jt-ink-muted) !important;
}

.pagination .page-link {
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
    color: var(--jt-ink-muted) !important;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
    padding: 10px 6px !important;
}

.pagination .page-item.active .page-link {
    color: var(--jt-ink-strong) !important;
    border-bottom-color: var(--jt-ink-strong) !important;
}

/* --------------------------------------------------------------------------
   5. Suppressed marketplace furniture

   Devices the CMS ships for a marketplace. Each one actively fights the design
   and none belongs in a boutique.
   -------------------------------------------------------------------------- */

.aiz-demo-nav, .aiz-demos,                       /* the demo theme switcher */
.floating-buttons-section,                       /* coloured circles pinned to the edge */
.btn-col-filter,                                 /* column-density switcher */
.top-navbar,                                     /* language and currency bar */
.aiz-category-menu-wrap,
.category-nav-wrap {
    display: none !important;
}

/* The chat widget mounts with a generated id and is cross-origin, so it can
   only be reached by prefix and only toned down. Muted rather than hidden: a
   customer who wants it should still find it. */
[id^='gb-widget-'],
.whatsapp-button, .wa-chat-box {
    filter: grayscale(1) opacity(0.5);
    transition: filter var(--jt-base) var(--jt-ease-io);
}

[id^='gb-widget-']:hover { filter: none; }

.aiz-refresh, .loading-overlay { background: rgba(248, 240, 229, 0.82) !important; }
.spinner-border { color: var(--jt-accent) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--jt-ground); }
::-webkit-scrollbar-thumb { background: var(--jt-hairline); border: 3px solid var(--jt-ground); }
::-webkit-scrollbar-thumb:hover { background: var(--jt-ink-faint); }

/* --------------------------------------------------------------------------
   6. Header extras

   The search panel and the navigation's responsive behaviour. They live here
   rather than in the system file because they belong to the header override,
   which is a bridge component until every page is a theme template.
   -------------------------------------------------------------------------- */

.jt-search {
    border-top: 1px solid var(--jt-hairline);
    background: var(--jt-ground);
    padding-block: var(--jt-5);
}

.jt-search__form {
    display: flex;
    align-items: center;
    gap: var(--jt-4);
    max-width: var(--jt-max);
    margin-inline: auto;
    padding-inline: var(--jt-gutter);
}

/* Two classes: the CMS's input[type='text'] rule above is an element plus an
   attribute, which outranked the one class and drew a white box here. */
.jt-search .jt-search__input {
    flex: 1;
    min-height: 52px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--jt-ink) !important;
    padding: 10px 0 !important;
    font-family: var(--jt-display);
    font-size: clamp(18px, 2vw, 26px) !important;
    font-weight: 300 !important;
    color: var(--jt-ink-strong) !important;
}

.jt-search__results:empty { display: none; }

.jt-search__results {
    max-width: var(--jt-max);
    margin: var(--jt-4) auto 0;
    padding-inline: var(--jt-gutter);
}

.jt-burger { display: none; }

@media (max-width: 1100px) {
    /* Scoped to the header for weight, not only for place: the touch-target
       rule for .jt-link.jt-micro (two classes, in justintime.css) otherwise
       wins on a phone, the link comes back, and the logo's grid column is
       squeezed to nothing - with the wishlist icon signed in, the header ran
       54px past the screen and the phone zoomed the whole page out. */
    .jt-header .jt-tools .jt-appt { display: none; }
}

@media (max-width: 900px) {
    .jt-burger { display: inline-flex; }
    .jt-nav__item:not(.jt-appt) { display: none; }
}

/* --------------------------------------------------------------------------
   7. Checkout: the partials still on CMS markup

   Two of checkout's three steps were rebuilt as theme templates. The third,
   shipping_info, was not — deliberately.

   It is 377 lines of address handling: a guest branch and an authenticated
   branch, a country/state/city/area cascade that reloads itself over AJAX,
   a default-address selector, a billing-address tab, two modals, and a
   validity check that disables an address whose city or area has since been
   switched off. Rewriting that markup risks sending an order to the wrong
   place, and the reward is only that it would look right — which this section
   achieves without touching a line of it.

   delivery_info_details is here for the same reason: its carrier and
   pickup-point fields are named per owner and read back by name, and there is
   nothing to gain from retyping them.

   Everything below is scoped to the checkout steps and the address modals, so
   no other page inherits it.
   -------------------------------------------------------------------------- */

/* The Shipping / Billing tabs. */
#shipping_info .nav-tabs {
    gap: var(--jt-6);
    border-bottom: 1px solid var(--jt-hairline) !important;
    margin-bottom: var(--jt-5);
}

#shipping_info .nav-tabs .nav-link {
    padding: 0 0 var(--jt-3) !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    font-family: var(--jt-sans);
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
    color: var(--jt-ink-muted) !important;
}

#shipping_info .nav-tabs .nav-link:hover { color: var(--jt-ink) !important; }

/* The selected tab is marked by a rule as well as by colour. */
#shipping_info .nav-tabs .nav-link.active {
    color: var(--jt-ink-strong) !important;
    border-bottom-color: var(--jt-ink-strong) !important;
}

/* Address cards and carrier options. The CMS calls both a "megabox": a label
   wrapping a hidden radio and a bordered span. */
#shipping_info .aiz-megabox-elem,
#delivery_info .aiz-megabox-elem,
.modal .aiz-megabox-elem {
    background: var(--jt-paper) !important;
    border: 1px solid var(--jt-hairline) !important;
    border-radius: 0 !important;
    transition: border-color var(--jt-fast) var(--jt-ease-io),
                box-shadow var(--jt-fast) var(--jt-ease-io);
}

#shipping_info .aiz-megabox:hover .aiz-megabox-elem,
#delivery_info .aiz-megabox:hover .aiz-megabox-elem,
.modal .aiz-megabox:hover .aiz-megabox-elem {
    border-color: var(--jt-ink-faint) !important;
}

/* Selected, marked the same way the rebuilt payment cards are: the hairline
   darkens and doubles, drawn inward so nothing reflows. */
#shipping_info .aiz-megabox > input:checked ~ .aiz-megabox-elem,
#delivery_info .aiz-megabox > input:checked ~ .aiz-megabox-elem,
.modal .aiz-megabox > input:checked ~ .aiz-megabox-elem {
    border-color: var(--jt-ink-strong) !important;
    box-shadow: inset 0 0 0 1px var(--jt-ink-strong) !important;
}

#shipping_info .aiz-megabox > input:focus-visible ~ .aiz-megabox-elem,
#delivery_info .aiz-megabox > input:focus-visible ~ .aiz-megabox-elem,
.modal .aiz-megabox > input:focus-visible ~ .aiz-megabox-elem {
    outline: 2px solid var(--jt-focus);
    outline-offset: 2px;
}

/* An address that can no longer be delivered to — its city or area was
   switched off since it was saved. The CMS marks it with border-danger only,
   so it is red and nothing else; the strip on the left gives it a second
   signal that does not depend on seeing hue. */
#shipping_info .border-danger,
.modal .border-danger {
    border-color: var(--jt-error) !important;
    border-left-width: 3px !important;
}

/* "Add a new address" and "Choose another address": text actions, not pills. */
#shipping_info .rounded-pill,
.modal .rounded-pill {
    border: 1px dashed var(--jt-hairline) !important;
    border-radius: 0 !important;
    background: none !important;
    min-height: 56px;
    align-items: center;
}

#shipping_info .rounded-pill:hover,
.modal .rounded-pill:hover { border-color: var(--jt-ink) !important; }

#shipping_info .text-blue,
.modal .text-blue { color: var(--jt-accent) !important; }

#shipping_info .bg-soft-blue,
.modal .bg-soft-blue { background: none !important; }

#shipping_info .choose-address button {
    min-height: 44px;
    color: var(--jt-accent) !important;
    background: none !important;
    font-size: 11px !important;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
}

/* Delivery: the carrier rows and the pickup-point select. */
#delivery_info .card,
#delivery_info .card-header,
#delivery_info .card-body {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
}

#delivery_info .border-dashed { border-color: var(--jt-hairline) !important; }

/* The address modals. */
.modal-content {
    border: 1px solid var(--jt-hairline) !important;
    border-radius: 0 !important;
    background: var(--jt-ground) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--jt-hairline) !important;
    padding: var(--jt-5) var(--jt-6) !important;
}

.modal-body { padding: var(--jt-6) !important; }

.modal-title {
    font-family: var(--jt-display);
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--jt-ink-strong) !important;
}

/* The close control is an icon-only button, so it needs a real target and a
   name. The CMS gives it neither size nor label; the size is fixable here and
   the label is supplied by aria-label in the CMS's own markup. */
.modal-header .close {
    min-width: 44px;
    min-height: 44px;
    color: var(--jt-ink) !important;
    opacity: 1 !important;
}

.modal-header .close:hover { color: var(--jt-accent) !important; }

/* --------------------------------------------------------------------------
   8. The order timeline

   Left on CMS markup for the reason set out in the track_order override: it is
   one timeline rendered two ways with per-step branches for six statuses, and
   it is built from Bootstrap utilities with nothing semantic to hook. Restyling
   it would mean rewriting it, and rewriting it would mean re-deriving which
   status an order is in.

   So the utilities are retuned in place, scoped to .jt-track so no other page
   inherits any of it.
   -------------------------------------------------------------------------- */

.jt-track .bg-white {
    background: var(--jt-paper) !important;
    border-color: var(--jt-hairline) !important;
}

.jt-track .border,
.jt-track .border-gray-300,
.jt-track .border-gray-500 { border-color: var(--jt-hairline) !important; }

/* A step that has happened. The CMS's success green is #85b567, which is
   2.36:1 on white — below the 3:1 a non-text indicator has to clear, and this
   dot is the only thing distinguishing a completed step from a pending one. */
.jt-track .bg-success,
.jt-track .border-success {
    background-color: var(--jt-accent) !important;
    border-color: var(--jt-accent) !important;
}

/* A step still to come. */
.jt-track .bg-gray { background-color: var(--jt-hairline) !important; }

.jt-track .text-muted { color: var(--jt-ink-muted) !important; }
.jt-track .text-dark { color: var(--jt-ink-strong) !important; }
.jt-track .text-danger { color: var(--jt-error) !important; }

.jt-track h6 {
    font-family: var(--jt-sans);
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--jt-ink-strong);
}

.jt-track .rounded-2,
.jt-track .rounded-1,
.jt-track .rounded-circle:not(.w-25px):not(.h-25px):not(.h-15px) { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   9. The global loading overlay

   The CMS layout renders a fixed, full-viewport overlay holding three bars
   that animate forever, and hides it with z-index: -1 alone.

   That does not hide it. A negative z-index puts a positioned element behind
   its stacking context's content, not behind the canvas: the bars keep
   painting, keep animating, and show through anywhere the page above them is
   not opaque. On a cream ground with a light page they read as three dark
   blocks pulsing in the middle of the layout, with nothing loading and
   nothing to wait for.

   Taking it out of the flow entirely costs nothing: .active raises it to
   z-index 5000 when something genuinely is in flight, and display is restored
   at the same time.
   -------------------------------------------------------------------------- */

.aiz-refresh:not(.active) { display: none; }

.aiz-refresh.active { display: flex; }

/* While it is up it should read as this shop rather than as the CMS: the
   ground behind it is cream, and the bars take the ink colour. */
.aiz-refresh {
    background: color-mix(in srgb, var(--jt-ground) 82%, transparent) !important;
    color: var(--jt-ink);
}


.jt-search .jt-search__input::placeholder { color: var(--jt-ink-muted); opacity: 1; }
.jt-search .jt-search__input:focus { border-bottom-color: var(--jt-accent) !important; }

/* The sort and maker selects: the same reason - select{} above paints every
   select as a white bordered box with !important. The theme's own select is
   a quiet line of text with a chevron. */
.jt-filters .jt-select:not(.jt-select--block) {
    min-height: 44px !important;
    padding: 0 26px 0 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    font-family: var(--jt-sans);
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: var(--jt-track);
    text-transform: uppercase;
    color: var(--jt-ink-strong) !important;
    transition: border-color var(--jt-fast) var(--jt-ease-io);
}

.jt-filters .jt-select:not(.jt-select--block):hover,
.jt-filters .jt-select:not(.jt-select--block):focus-visible {
    border-bottom-color: var(--jt-ink) !important;
    outline: none;
}

.jt-select option { text-transform: none; letter-spacing: 0; font-weight: 400; }


/* --------------------------------------------------------------------------
   The journal's listing: its pictures and its search.
   -------------------------------------------------------------------------- */

.jt-blog-thumb {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side, color-mix(in srgb, var(--jt-glow, #e8c89a) 45%, transparent), transparent 100%)
        center / 80% 90% no-repeat,
        var(--jt-ground-raised);
}

.jt-blog-thumb img {
    width: 100%;
    object-fit: cover;
}

.jt-blog-thumb img.is-cutout {
    object-fit: contain;
    padding: 8%;
    filter: drop-shadow(0 12px 12px rgba(40, 28, 16, 0.14));
}

.hov-scale-img:hover .jt-blog-thumb img.is-cutout { transform: translateY(-6px) scale(1.03); }

/* The sidebar search: one line - field and button - on a hairline, like the
   header's, instead of a white box with its button wrapped underneath. */
#search-form .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
    border-bottom: 1px solid var(--jt-ink);
}

#search-form .input-group > input[name='search'] {
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
    color: var(--jt-ink-strong) !important;
}

#search-form .input-group > input[name='search']::placeholder { color: var(--jt-ink-muted); }

#search-form .input-group .btn {
    min-width: 44px;
    min-height: 44px;
    border: 0 !important;
    background: transparent !important;
}

#search-form .input-group:focus-within { border-bottom-color: var(--jt-accent); }