/*
 * Website settings (App\Tenancy\Design\SiteSettings) for a portfolio, personal page or business website.
 *
 * Loaded after the theme's stylesheet. Each design choice the owner makes arrives as a data-pf-* attribute
 * on <body> (and colours and the heading typeface as CSS variables), and is applied here on top of any
 * theme: page width, gallery layout and columns, picture shape, gaps, titles, corners, hover, section
 * spacing, heading size, light or dark.
 */

:root {
    --pf-cols: 3;
    --pf-ratio: 4 / 5;
    --pf-gap: 18px;
    --pf-radius: 10px;
    --pf-space: clamp(56px, 7vw, 110px);
    --pf-page: 1320px;
    --pf-h1: clamp(40px, 6vw, 86px);
    --pf-h2: clamp(28px, 3.4vw, 46px);
}

/* ------------------------------------------------------------------ choices as variables */

body[data-pf-width="narrow"] { --pf-page: 1080px; }
body[data-pf-width="standard"] { --pf-page: 1320px; }
body[data-pf-width="wide"] { --pf-page: 100vw; }

body[data-pf-columns="1"] { --pf-cols: 1; }
body[data-pf-columns="2"] { --pf-cols: 2; }
body[data-pf-columns="3"] { --pf-cols: 3; }
body[data-pf-columns="4"] { --pf-cols: 4; }

body[data-pf-shape="square"] { --pf-ratio: 1 / 1; }
body[data-pf-shape="portrait"] { --pf-ratio: 4 / 5; }
body[data-pf-shape="landscape"] { --pf-ratio: 3 / 2; }
body[data-pf-shape="wide"] { --pf-ratio: 16 / 9; }

body[data-pf-gap="none"] { --pf-gap: 0px; }
body[data-pf-gap="small"] { --pf-gap: clamp(10px, 1.4vw, 18px); }
body[data-pf-gap="large"] { --pf-gap: clamp(22px, 3vw, 44px); }

body[data-pf-corners="sharp"] { --pf-radius: 0px; }
body[data-pf-corners="soft"] { --pf-radius: 10px; }
body[data-pf-corners="round"] { --pf-radius: 24px; }

body[data-pf-spacing="compact"] { --pf-space: clamp(36px, 4.5vw, 64px); }
body[data-pf-spacing="comfortable"] { --pf-space: clamp(56px, 7vw, 110px); }
body[data-pf-spacing="airy"] { --pf-space: clamp(80px, 11vw, 170px); }

body[data-pf-headings="small"] { --pf-h1: clamp(30px, 4vw, 52px); --pf-h2: clamp(22px, 2.4vw, 32px); }
body[data-pf-headings="medium"] { --pf-h1: clamp(36px, 5vw, 68px); --pf-h2: clamp(26px, 3vw, 40px); }
body[data-pf-headings="large"] { --pf-h1: clamp(40px, 6vw, 86px); --pf-h2: clamp(28px, 3.4vw, 46px); }
body[data-pf-headings="huge"] { --pf-h1: clamp(52px, 9vw, 140px); --pf-h2: clamp(34px, 4.6vw, 64px); }

/* ------------------------------------------------------------------ page */

body[data-pf-site] {
    --sx-width: var(--pf-page);
    --sx-space: var(--pf-space);
    --sx-radius: var(--pf-radius);
    --sp-radius: var(--pf-radius);
}

body[data-pf-site] .sx-wrap { width: min(100% - 40px, var(--pf-page)); }
body[data-pf-site][data-pf-width="wide"] .sx-wrap { width: calc(100% - clamp(24px, 4vw, 64px)); }
body[data-pf-site] .container { max-width: min(100% - 0px, calc(var(--pf-page) + 30px)); }

body[data-pf-site] .sx h1,
body[data-pf-site] .sx-profile h1 { font-size: var(--pf-h1) !important; }
body[data-pf-site] .sx h2 { font-size: var(--pf-h2) !important; }

body[data-pf-site] h1, body[data-pf-site] h2, body[data-pf-site] h3,
body[data-pf-site] .page-title h1,
body[data-pf-site] .product_title {
    font-family: var(--pf-heading-font, var(--sx-heading-font, inherit)) !important;
}

/* Page and text colours the owner chose. */
body[data-pf-site] { background: var(--pf-bg, #ffffff) !important; color: var(--pf-ink, inherit); }
body[data-pf-site] .header_wrap,
body[data-pf-site] .middle-header,
body[data-pf-site] .bottom_header { background-color: var(--pf-bg, inherit) !important; }

/* Buttons in the website's main colour. */
body[data-pf-site] .sx-btn,
body[data-pf-site] .btn-fill-out,
body[data-pf-site] .pf-404 .btn {
    border-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: #ffffff !important;
}
body[data-pf-site] .sx-btn:hover { filter: brightness(.92); }

/* ------------------------------------------------------------------ the gallery (projects, offers, services) */

body[data-pf-site] .sx-works-grid,
body[data-pf-site] .sx-grid,
body[data-pf-site] .sp-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--pf-cols), minmax(0, 1fr)) !important;
    gap: var(--pf-gap) !important;
}

body[data-pf-site] .sx-work,
body[data-pf-site] .sx-work:nth-child(n) {
    position: relative;
    grid-column: auto !important;
    margin: 0 !important;
}

body[data-pf-site] .sx-work-media,
body[data-pf-site] .sx-work:nth-child(n) .sx-work-media,
body[data-pf-site] .sx-card-media,
body[data-pf-site] .sp-card-media,
body[data-pf-site] .product .product_img {
    overflow: hidden;
    border-radius: var(--pf-radius) !important;
    aspect-ratio: var(--pf-ratio) !important;
}

body[data-pf-site] .sx-work-media img,
body[data-pf-site] .sx-work-media .sx-art { width: 100%; height: 100%; object-fit: cover; }

/* Masonry: pictures keep their own height. */
body[data-pf-site][data-pf-layout="masonry"] .sx-works-grid { display: block !important; columns: var(--pf-cols); column-gap: var(--pf-gap); }
body[data-pf-site][data-pf-layout="masonry"] .sx-work { display: block; break-inside: avoid; margin-bottom: var(--pf-gap) !important; }
body[data-pf-site][data-pf-layout="masonry"] .sx-work-media,
body[data-pf-site][data-pf-layout="masonry"] .sx-work:nth-child(n) .sx-work-media { aspect-ratio: auto !important; }
body[data-pf-site][data-pf-layout="masonry"] .sx-work-media img { height: auto; }
body[data-pf-site][data-pf-layout="masonry"] .sx-work:nth-child(3n + 2) .sx-work-media .sx-art { aspect-ratio: 3 / 4; }
body[data-pf-site][data-pf-layout="masonry"] .sx-work:nth-child(3n) .sx-work-media .sx-art { aspect-ratio: 1 / 1; }
body[data-pf-site][data-pf-layout="masonry"] .sx-work:nth-child(3n + 1) .sx-work-media .sx-art { aspect-ratio: 4 / 3; }

/* Staggered: every second picture drops, like a magazine spread. */
body[data-pf-site][data-pf-layout="staggered"] .sx-work:nth-child(even) { margin-top: clamp(40px, 8vw, 120px) !important; }

/* One under another, large. */
body[data-pf-site][data-pf-layout="list"] .sx-works-grid { grid-template-columns: minmax(0, 1fr) !important; gap: calc(var(--pf-gap) * 2 + 24px) !important; }
body[data-pf-site][data-pf-layout="list"] .sx-work-media { aspect-ratio: 16 / 9 !important; }

/* Titles: under the picture, on it, on it when pointed at, or hidden. */
body[data-pf-site] .sx-work-caption { padding: 14px 2px 0; }
body[data-pf-site] .sx-work-caption em { display: none; }

body[data-pf-site][data-pf-caption="over"] .sx-work-caption,
body[data-pf-site][data-pf-caption="hover"] .sx-work-caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 18px 20px;
    border-radius: 0 0 var(--pf-radius) var(--pf-radius);
    background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
    color: #ffffff;
}

body[data-pf-site][data-pf-layout="masonry"][data-pf-caption="over"] .sx-work-caption,
body[data-pf-site][data-pf-layout="masonry"][data-pf-caption="hover"] .sx-work-caption { bottom: 0; }

body[data-pf-site][data-pf-caption="over"] .sx-work-caption *,
body[data-pf-site][data-pf-caption="hover"] .sx-work-caption * { color: #ffffff !important; }

body[data-pf-site][data-pf-caption="hover"] .sx-work-caption { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
body[data-pf-site][data-pf-caption="hover"] .sx-work:hover .sx-work-caption,
body[data-pf-site][data-pf-caption="hover"] .sx-work:focus-visible .sx-work-caption { opacity: 1; transform: none; }
body[data-pf-site][data-pf-caption="none"] .sx-work-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* When pointed at. */
body[data-pf-site] .sx-work-media img { transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, filter .4s ease; }
body[data-pf-site][data-pf-hover="zoom"] .sx-work:hover .sx-work-media img { transform: scale(1.05); }
body[data-pf-site][data-pf-hover="lift"] .sx-work { transition: transform .35s ease; }
body[data-pf-site][data-pf-hover="lift"] .sx-work:hover { transform: translateY(-6px); }
body[data-pf-site][data-pf-hover="lift"] .sx-work:hover .sx-work-media { box-shadow: 0 22px 44px rgba(0, 0, 0, .16); }
body[data-pf-site][data-pf-hover="dim"] .sx-work:hover .sx-work-media img { opacity: .72; }
body[data-pf-site][data-pf-hover="none"] .sx-work:hover .sx-work-media img { transform: none; }

/* The listing page (/work, /offers, /services) follows the same gallery. */
body[data-pf-site] .pf-shop .shop_container > .col,
body[data-pf-site] .pf-shop .shop_container > [class*="col-"] {
    flex: 0 0 calc(100% / var(--pf-cols)) !important;
    max-width: calc(100% / var(--pf-cols)) !important;
}

/* ------------------------------------------------------------------ dark */

body[data-pf-site][data-pf-mode="dark"] {
    --pf-bg-default: #0e0e10;
    background: var(--pf-bg, #0e0e10) !important;
    color: var(--pf-ink, #ececec) !important;
    --sx-ink: var(--pf-ink, #ececec);
    --sx-muted: #a1a1aa;
    --sx-surface: #18181b;
    --sx-line: #27272a;
    --skin-ink: var(--pf-ink, #ececec);
    --skin-muted: #a1a1aa;
    --skin-line: #27272a;
    --skin-surface: #18181b;
}

body[data-pf-site][data-pf-mode="dark"] .header_wrap,
body[data-pf-site][data-pf-mode="dark"] .middle-header,
body[data-pf-site][data-pf-mode="dark"] .bottom_header,
body[data-pf-site][data-pf-mode="dark"] .top-header,
body[data-pf-site][data-pf-mode="dark"] footer,
body[data-pf-site][data-pf-mode="dark"] footer .footer_top,
body[data-pf-site][data-pf-mode="dark"] footer .bottom_footer,
body[data-pf-site][data-pf-mode="dark"] .breadcrumb_section,
body[data-pf-site][data-pf-mode="dark"] .section,
body[data-pf-site][data-pf-mode="dark"] .sx,
body[data-pf-site][data-pf-mode="dark"] .mobile_side_menu,
body[data-pf-site][data-pf-mode="dark"] .pf-drawer-head { background-color: var(--pf-bg, #0e0e10) !important; border-color: #27272a !important; }

body[data-pf-site][data-pf-mode="dark"] h1, body[data-pf-site][data-pf-mode="dark"] h2, body[data-pf-site][data-pf-mode="dark"] h3,
body[data-pf-site][data-pf-mode="dark"] h4, body[data-pf-site][data-pf-mode="dark"] h5, body[data-pf-site][data-pf-mode="dark"] h6,
body[data-pf-site][data-pf-mode="dark"] p, body[data-pf-site][data-pf-mode="dark"] li, body[data-pf-site][data-pf-mode="dark"] dt, body[data-pf-site][data-pf-mode="dark"] dd,
body[data-pf-site][data-pf-mode="dark"] a:not(.btn):not(.sx-btn),
body[data-pf-site][data-pf-mode="dark"] .navbar-brand,
body[data-pf-site][data-pf-mode="dark"] .nav-link,
body[data-pf-site][data-pf-mode="dark"] .navbar-nav i,
body[data-pf-site][data-pf-mode="dark"] .breadcrumb li,
body[data-pf-site][data-pf-mode="dark"] .product_title,
body[data-pf-site][data-pf-mode="dark"] .sx-work-caption strong,
body[data-pf-site][data-pf-mode="dark"] .widget_title { color: var(--pf-ink, #ececec) !important; }

body[data-pf-site][data-pf-mode="dark"] .navbar-brand img,
body[data-pf-site][data-pf-mode="dark"] .footer_logo img { filter: brightness(0) invert(1); }
body[data-pf-site][data-pf-mode="dark"] .sx-work-caption span,
body[data-pf-site][data-pf-mode="dark"] .sx-lead,
body[data-pf-site][data-pf-mode="dark"] .sx-kicker,
body[data-pf-site][data-pf-mode="dark"] footer p { color: #a1a1aa !important; }
body[data-pf-site][data-pf-mode="dark"] .form-control,
body[data-pf-site][data-pf-mode="dark"] .form-select { border-color: #3f3f46 !important; background: #18181b !important; color: #ececec !important; }
body[data-pf-site][data-pf-mode="dark"] .navbar-toggler span,
body[data-pf-site][data-pf-mode="dark"] .ion-android-menu { color: #ececec !important; }

/* ------------------------------------------------------------------ the item's own page */

/* A project, offer or service page: a large gallery and the words beside it; no buying controls. */
body[data-pf-sell="0"] .pf-product .cart_extra,
body[data-pf-sell="0"] .pf-product .product_price,
body[data-pf-sell="0"] .pf-product .product-meta li:has(.sku),
body[data-pf-sell="0"] .pf-product .pr_detail .rating_wrap,
body[data-pf-sell="0"] .pf-product .pr_detail > .clearfix + hr,
body[data-pf-sell="0"] .pf-product .ps-product__stock,
body[data-pf-sell="0"] .pf-product .stock-status,
body[data-pf-sell="0"] .pf-product .number-items-available,
body[data-pf-sell="0"] .pf-product-tabs .nav-item:has([href*="Reviews"]),
body[data-pf-sell="0"] .pf-product-tabs .nav-item:has([href*="reviews"]) { display: none !important; }

body[data-pf-site] .pf-product .product_img_box,
body[data-pf-site] .pf-product .product_gallery_item a { border-radius: var(--pf-radius) !important; overflow: hidden; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 991.98px) {
    body[data-pf-columns="3"], body[data-pf-columns="4"] { --pf-cols: 2; }
}

@media (max-width: 575.98px) {
    body[data-pf-site] { --pf-cols: 1; }
    body[data-pf-site][data-pf-columns="3"],
    body[data-pf-site][data-pf-columns="4"] { --pf-cols: 2; }
    body[data-pf-site][data-pf-layout="staggered"] .sx-work:nth-child(even) { margin-top: 28px !important; }
}

/* ------------------------------------------------------------------ header */

/* Without the shop's category button, the menu bar takes the whole width. */
body[data-pf-sell="0"] .bottom_header .row > [class*="col-"]:has(> .categories_wrap) { display: none !important; }
body[data-pf-sell="0"] .bottom_header .row > [class*="col-"]:has(> nav.navbar) { flex: 0 0 100%; max-width: 100%; width: 100%; }

/* "Name on the left, menu on the right": one line on a computer too. */
@media (min-width: 992px) {
    body[data-pf-header="left"] .middle-header { display: none !important; }

    body[data-pf-header="left"] .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        display: flex !important;
        align-items: center;
        margin: 0 auto 0 0;
        padding: 0;
        color: var(--pf-ink, var(--skin-ink));
        font-size: 22px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    body[data-pf-header="left"] .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img { max-height: 40px; width: auto; }
    body[data-pf-header="left"] .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img + img { display: none; }
    body[data-pf-header="left"] .bottom_header nav.navbar { padding: 22px 0 !important; }
    body[data-pf-header="left"] .bottom_header .navbar-collapse { flex-grow: 0; }
}

body[data-pf-site] .bottom_header,
body[data-pf-site] .bottom_header.bottom_header_sticky { border-bottom: 1px solid color-mix(in srgb, var(--pf-ink, #111) 10%, transparent) !important; box-shadow: none !important; }
body[data-pf-site] .bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link { color: var(--pf-ink, var(--skin-ink)) !important; text-transform: none !important; letter-spacing: 0 !important; }
body[data-pf-site] .bottom_header .navbar-nav:not(.attr-nav) > li.active > .nav-link,
body[data-pf-site] .bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link:hover { color: var(--primary-color) !important; }
body[data-pf-site] .top-header { display: none !important; }

/* The name in the one-line header: a picture logo keeps its own proportions at a fixed height. */
@media (min-width: 992px) {
    body[data-pf-header="left"] .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img { display: block !important; height: 34px; max-height: none; }
}

/* ------------------------------------------------------------------ the listing page */

body[data-pf-sell="0"] .pf-shop-filters .bb-product-filter:has(input[name="discounted_only"]),
body[data-pf-sell="0"] .pf-shop-filters .bb-product-filter:has([name*="discount"]),
body[data-pf-sell="0"] .pf-shop .product_header .products_view,
body[data-pf-sell="0"] .pf-shop .product_header .result_count,
body[data-pf-sell="0"] .pf-shop .product_header .custom_select { display: none !important; }

/* With nothing to filter by but categories, the gallery takes the whole width when there are none. */
body[data-pf-sell="0"] .pf-shop .pf-shop-filters:not(:has(.bb-product-filter:not([style*="none"]) a)) { display: none !important; }
body[data-pf-sell="0"] .pf-shop .pf-shop-main:only-child,
body[data-pf-sell="0"] .pf-shop .row:has(> .pf-shop-filters:not(:has(.bb-product-filter a))) > .pf-shop-main { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }

body[data-pf-site] .product,
body[data-pf-site] .product_wrap {
    overflow: visible;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-pf-site] .product .product_img { overflow: hidden; border-radius: var(--pf-radius) !important; aspect-ratio: var(--pf-ratio); }
body[data-pf-site] .product .product_img > a,
body[data-pf-site] .product .product_img img:first-child { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; }
body[data-pf-site] .product .product_info { padding: 14px 2px 0 !important; text-align: left !important; }
body[data-pf-site] .product .product_title,
body[data-pf-site] .product .product_title a { color: var(--pf-ink, var(--skin-ink)) !important; font-size: 16px !important; text-transform: none !important; }
body[data-pf-sell="0"] .product_action_box,
body[data-pf-sell="0"] .product .pr_desc,
body[data-pf-sell="0"] .product .pr_switch_wrap,
body[data-pf-sell="0"] .pf-product #product-sku,
body[data-pf-sell="0"] .pf-product .product-meta li:has(.sku),
body[data-pf-sell="0"] .pf-product .product_sku,
body[data-pf-sell="0"] .pf-product .product-meta li:first-child:has(span:only-of-type) { display: none !important; }

/* A website that does not sell has no filter column: the gallery uses the whole width. */
body[data-pf-sell="0"] .pf-shop .pf-shop-filters { display: none !important; }
body[data-pf-sell="0"] .pf-shop .pf-shop-main { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
body[data-pf-sell="0"] .pf-shop .product_header { display: none !important; }

/* No product search on a website that does not sell, in any header layout. */
html body[data-pf-sell="0"] .bottom_header nav.navbar > .pr_search_icon,
html body[data-pf-sell="0"] .pr_search_icon { display: none !important; }

/* Dark: the closing contact panel is a slightly lighter dark card, not an inverted light one. */
body[data-pf-site][data-pf-mode="dark"] { --sx-page: var(--pf-bg, #0e0e10); }
body[data-pf-site][data-pf-mode="dark"] .sx-contact .sx-wrap { background: #18181b !important; color: var(--pf-ink, #ececec) !important; border: 1px solid #27272a; }
body[data-pf-site][data-pf-mode="dark"] .sx-contact-way { border-color: #3f3f46 !important; background: transparent !important; }
body[data-pf-site][data-pf-mode="dark"] .sx-contact-way:hover { border-color: var(--pf-ink, #ececec) !important; }

/* (Stronger than the centred and split header layouts, which show the magnifier.) */
html[class] body[data-pf-sell="0"] .bottom_header:not(.pf-x) nav.navbar > .pr_search_icon { display: none !important; }

/* The profile's links are a list of buttons, without bullets. */
body[data-pf-site] .sx-profile-links { padding-left: 0; list-style: none; }
body[data-pf-site] .sx-profile-links li { list-style: none; }
body[data-pf-site] .sx-profile-links li::marker { content: none; }

/* The button on a project, offer or service page. */
body[data-pf-site] .pf-item-cta { margin: 6px 0 22px; }
body[data-pf-site] .pf-item-cta .sx-btn { display: inline-flex; align-items: center; padding: 14px 28px; text-decoration: none; }