/* Catalogue-only styles; operational tables and printable sheets are untouched. */
.storefront-hero {
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #eeece5;
}
/* Uppercase, at the owner's request (2026-10-01). Georgian is unicase -- its
   letters have no capital forms -- so text-transform does nothing there and
   the Georgian heading is unchanged; English and Russian get the caps. The
   negative letter-spacing comes back to 0 because tracking tuned for lowercase
   is too tight once every letter is a capital. */
.storefront-hero h1 { max-width: 44rem; font-size: clamp(1.5rem, 2.5vw, 2.25rem); letter-spacing: 0; text-transform: uppercase; line-height: 1.25; }
/* --color-primary-dark, not --color-primary: the brand orange itself is
   rgb(225,159,78), which against the hero's #eeece5 is about 1.8:1 -- under the
   3:1 that large text needs, so it would read as washed out rather than
   emphasised. The dark tone is the same hue and is what headings already use
   elsewhere (owner, 2026-10-01). */
.storefront-hero .hero-accent { color: var(--color-primary-dark); }
.storefront-hero p { max-width: 40rem; color: var(--color-muted); line-height: 1.6; margin: .75rem 0 1.25rem; }
.storefront-hero-with-image { display: grid; grid-template-columns: 1fr 1.15fr; padding: 0; overflow: hidden; }
.storefront-hero-copy { align-self: center; }
.storefront-hero-with-image .storefront-hero-copy { padding: clamp(1.25rem, 3vw, 2rem); }
.storefront-hero-visual { position: relative; margin: 0; min-height: 20rem; background: #d9d6ce; }
.storefront-hero-visual img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.catalog-active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.catalog-active-filters a { display: inline-flex; gap: .75rem; align-items: center; padding: .5rem .75rem; background: var(--color-primary-light); color: var(--color-primary-dark); border: 1px solid #dfcbb2; border-radius: .5rem; text-decoration: none; font-size: .875rem; }
/* "Clear filters" sits with the chips since the count line went (2026-10-20): a plain link, not another chip. */
.catalog-active-filters .catalog-clear-filters { background: transparent; border-color: transparent; color: var(--color-muted); text-decoration: underline; padding-left: .25rem; }
@media (max-width: 767.98px) {
    .storefront-hero-with-image { grid-template-columns: 1fr; }
    .storefront-hero-visual { min-height: 0; aspect-ratio: 16 / 10; }
}
/* 17rem, not 15 (owner, 2026-10-01): "ავანგარდი (ე.წ ჯისოლო)" wrapped onto a
   second line in the category list and sat two lines tall among six one-line
   neighbours. Measured live -- the name needs 256px and the list was 240 -- so
   16rem would clear it with nothing to spare and the next category the owner
   adds would wrap again. Long names still wrap rather than truncate: this is
   the shop's own navigation, and a category you cannot read the name of is
   worse than a tall row. */
.catalog-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.catalog-results, .catalog-sidebar { min-width: 0; }
.catalog-results .catalog-empty { width: 100%; }
/* Same reasoning as the header rule below: the sidebar's, not one card's. */
.catalog-sidebar .card-body { padding: 0.5rem; }
/* Every card heading in the sidebar, not just the category panel's. The rule
   used to name .catalog-category-panel, so when the Availability card was added
   beside it (2026-10-01) its h2 fell back to the default heading size and wrapped
   onto two lines. The size belongs to the sidebar, which also means the next card
   added here does not have to know about a wrapper class. */
.catalog-sidebar .card-header { font-size: 0.875rem; margin: 0; }
.catalog-sidebar .list-group-item { padding: 0; border-radius: 0.375rem; }
/* .availability-link shares the look but not the contract: a test asserts that
   every .category-link carries the current search and tag, and these carry a
   different set (2026-10-01). Same class for both would have widened what that
   rule means without anyone deciding to. */
.catalog-sidebar :is(.category-link, .availability-link) { padding: 0.75rem; gap: 0.5rem; font-size: 0.875rem; }
.catalog-sidebar :is(.category-link, .availability-link):hover { background: var(--color-primary-light); }
.catalog-sidebar :is(.category-link, .availability-link) .badge { flex-shrink: 0; }
.catalog-filter-toggle { display: none; }
.catalog-tag-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.catalog-card { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.catalog-card:hover, .catalog-card:focus-within { border-color: #c79a67; box-shadow: var(--shadow-md); }
.catalog-card .catalog-card-title { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.catalog-card-link { color: var(--color-text); text-decoration: none; display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
.catalog-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-md); }
.catalog-card-link:focus-visible { outline: none; }
.catalog-card-link:focus-visible::after { outline: 2px solid var(--color-primary-dark); outline-offset: 3px; }
.catalog-card .carousel, .catalog-card .gallery-placeholder { aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; background: #eeefeb; }
.catalog-card .carousel-inner, .catalog-card .carousel-item, .catalog-card img.card-img-top { height: 100%; }
/* Gallery controls sit above the stretched title link, never inside it. */
.catalog-card .carousel-control-prev, .catalog-card .carousel-control-next, .catalog-card .carousel-indicators { z-index: 2; }
.catalog-card .carousel-control-prev, .catalog-card .carousel-control-next { width: 2.75rem; opacity: 1; }
.catalog-card .carousel-control-prev-icon, .catalog-card .carousel-control-next-icon { background-color: #292c2ccc; border-radius: 50%; background-size: 60%; }
/* 30x23.6 measured, just under the 24x24 minimum on the one axis. Bootstrap's
   transparent borders carry the hit area, not the visible bar. */
.catalog-card .carousel-indicators button { min-height: 0.25rem; border-top-width: 11px; border-bottom-width: 11px; }
/* .gallery-placeholder itself now lives in components.css: image_fallback.js
   can put one on any page, including the Management screens, which never
   load this stylesheet. */
/* The availability badge on a colour card (owner, 2026-10-01). Drawn only when
   the answer is not "in stock", so it reads as a warning rather than a label
   every card carries. Colour carries the meaning: amber for "you can have it,
   just not today", grey for "you cannot". */
.stock-state { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 0.375rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; }
.stock-state-out { background: #e9e8e4; color: #5c5f58; }
/* Staff only: a colour with a faulty finished piece on the shelf (2026-10-20). */
.stock-state-faulty { background: #f6e3e3; color: #7a2e2e; }
/* A separator between the staff-only option and the four everyone sees. */
.catalog-staff-filter { border-top: 1px dashed #dfcbb2 !important; margin-top: .25rem; padding-top: .5rem; }
/* A board with a different decor on each face (owner, 2026-10-19). */
.stock-state-sides { background: #e6ebf1; color: #35506b; }
.color-tag-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.color-tag-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 0.375rem; line-height: 1.4; overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: .03em; }
.catalog-tag-filters .btn { text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 991.98px) {
    .catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .catalog-filter-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
    .catalog-sidebar #searchForm { margin-bottom: 0.75rem !important; }
}
@media (max-width: 575.98px) {
    .storefront-hero { margin-bottom: 1.5rem; }
    .catalog-card .card-body { padding: 0.875rem; }
    .catalog-tag-filters { gap: 0.375rem; }
}

/* The About page: the company's story beside its photographs (2026-10-08).
   One grid, so the text column stays a readable width while the pictures
   take the rest. Below lg they stack with the text first -- somebody who
   arrived from the footer link came to read it. */
.about-heading { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 1.5rem; letter-spacing: 0; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.about-text p { max-width: 42rem; line-height: 1.8; margin-bottom: 1.1rem; }
.about-text p:last-child { margin-bottom: 0; }
.about-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.about-photo { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: #eeefeb; aspect-ratio: 4 / 3; }
/* The first photograph across both columns, the rest paired under it --
   the shape of the mosaic on the company's old site. */
.about-photo-lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.about-photo img { width: 100%; height: 100%; display: block; }
/* The home page's short version of the story. Capped and centred even
   though the page around it is full width: a paragraph of prose stops
   being readable somewhere around 75 characters, and the mosaic above it
   is the thing that wanted the whole screen. */
.home-about { margin: 3.5rem 0 1rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.home-about-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; max-width: 76rem; margin: 0 auto; align-items: center; }
.home-about-text h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); margin: 0 0 0.85rem; letter-spacing: 0; }
.home-about-text p { max-width: 42rem; line-height: 1.8; color: var(--color-muted); margin-bottom: 1.25rem; }
.home-about-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-about-photo { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: #eeefeb; aspect-ratio: 1 / 1; }
.home-about-photo img { width: 100%; height: 100%; display: block; }
@media (min-width: 992px) {
    .home-about-with-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; }
}

/* The About page's own text column, likewise: the page is full width,
   the prose is not. */
.about-layout, .about-heading, .about-details, .about-contact { max-width: 90rem; margin-left: auto; margin-right: auto; }
.about-details { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.about-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; text-align: center; }
.about-detail-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-bottom: 0.5rem; }
.about-details p { margin-bottom: 0.25rem; }
.about-social { display: flex; justify-content: center; gap: 0.75rem; font-size: 1.35rem; }
.about-legal { margin-top: 2rem; text-align: center; color: var(--color-muted); }
.about-social a { color: var(--color-primary-dark); }
.about-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
@media (min-width: 992px) {
    .about-layout-with-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
/* A colour code is a code, not a heading (2026-10-20): "102m" stays "102m"
   while every other h2 on the site goes to capitals -- the rule lives in
   components.css beside the heading rule it has to outrank. */
/* The shop's heading: "Shop · <category>" on one line in the eyebrow's style
   (owner, 2026-10-20). Still the h1; the size and colour are the eyebrow's. */
.site-main .catalog-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--color-primary-dark); margin-bottom: .25rem; }
.catalog-heading-sep { opacity: .6; }