/* BarkShop — design tokens and global styles (loaded on every page).
   Brand colours are Astra's global palette, set as code by bin/setup-theme.php and printed by
   Astra as --ast-global-color-N. The aliases below are the only names the theme uses; no hex
   value of the brand palette is repeated here. The accent tones are theme-only tokens.
   Contrast (WCAG): ink on cream 15:1, white on pine 11.7:1, accent-deep on cream 4.8:1,
   muted on cream 4.7:1, ink on sun 10:1. The plain terracotta is a background for ink text only. */

:root {
    --bark-primary: var(--ast-global-color-0);
    --bark-primary-dark: var(--ast-global-color-1);
    --bark-ink: var(--ast-global-color-2);
    --bark-text: var(--ast-global-color-3);
    --bark-background: var(--ast-global-color-4);
    --bark-surface: var(--ast-global-color-5);
    --bark-border: var(--ast-global-color-7);

    --bark-accent: #df6b46;        /* terracotta: badges and tiles, always with ink text */
    --bark-accent-deep: #b84a27;   /* terracotta as text on cream or white */
    --bark-sun: #f1c65b;           /* highlight: focus ring, labels, always with ink text */
    --bark-muted: #65716c;         /* secondary text */
    --bark-on-primary: #ffffff;    /* text on pine */

    --bark-font-display: Georgia, "Times New Roman", serif;
    --bark-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* One grid for header, content and footer: Astra's container is 1240px with a 20px gutter,
       so every full-width section of ours uses the same numbers (bin/setup-theme.php sets 1240). */
    --bark-content-width: 1240px;
    --bark-gutter: 20px;

    --bark-paper: #ffffff;         /* cards and fields that sit on cream */
    --bark-image-bg: #f7f8f5;      /* neutral backdrop behind product photos */
    --bark-lead: #45504c;          /* lead paragraph: darker than muted, lighter than ink */

    --bark-radius: 12px;
    --bark-radius-card: 18px;
    --bark-radius-large: 22px;
    --bark-shadow: 0 18px 50px rgba(23, 63, 53, .12);
    --bark-focus-ring: 3px solid var(--bark-sun);
}

/* Typography: serif display headings, system sans body (no web fonts, no third-party requests). */
/* Phone browsers must not inflate text on their own: card and cell heights are measured in rem. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--bark-font-body); line-height: 1.5; }
h1, h2, h3,
.bark-display {
    font-family: var(--bark-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
h1 { font-size: clamp(2.75rem, 6vw, 4.875rem); letter-spacing: -.04em; line-height: .98; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
.bark-eyebrow {
    font-family: var(--bark-font-body);
    font-size: .8125rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bark-accent-deep);
    margin: 0 0 .875rem;
}
.bark-lead {
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--bark-text);
}
.bark-muted { color: var(--bark-muted); }

/* Links inside running text are underlined, so they are recognisable without colour
   (WCAG 1.4.1). Navigation lists, buttons and cards carry their own affordance. */
.entry-content p a:not(.wp-block-button__link):not(.button),
.bark-legal-doc li a,
.bark-footer-nap p a,
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a,
.bark-checkout-legal a,
.cky-notice-des a {
    text-decoration: underline;
}
/* Keyboard focus is always visible, on every interactive element, in a colour that stands out
   on pine, cream and white alike. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--bark-focus-ring);
    outline-offset: 2px;
}

/* Buttons: Astra paints the theme, WooCommerce and block buttons from the palette. The
   block-checkout buttons and the outline variant need the same skin spelled out. */
.wc-block-components-button {
    background-color: var(--bark-primary);
    border-color: var(--bark-primary);
    color: var(--bark-on-primary);
    border-radius: var(--bark-radius);
}
.wc-block-components-button:hover {
    background-color: var(--bark-primary-dark);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.bark-button-outline {
    background-color: transparent;
    color: var(--bark-primary);
    border: 2px solid var(--bark-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.bark-button-outline:hover {
    background-color: var(--bark-primary);
    color: var(--bark-on-primary);
}

/* Sticky header: the search, account, cart and the category bar stay one scroll away instead of
   a page away. assets/js/sticky-header.js hides it while scrolling down and brings it back on the
   way up; without JavaScript it simply stays pinned. */
.site-header {
    position: sticky;
    top: 0;
    /* Above the page, below the off-canvas filter drawer (shop.css sets it to 10000). */
    z-index: 99;
    transition: transform .22s ease;
}
.site-header.bark-header-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

/* Editorial sections, shared by the homepage and the info pages built from content/pages/*.html.
   They live here rather than in home.css because home.css is enqueued only on the front page
   (inc/assets.php), while an info page such as /o-nas/ gets base.css + legal.css. home.css keeps
   its own, more specific front-page padding. */
.bark-section { padding: 2.5rem 0 1.5rem; }
/* A band: the section keeps its grid width, its background runs edge to edge. */
.bark-band {
    box-shadow: 0 0 0 100vmax var(--bark-surface);
    clip-path: inset(0 -100vmax);
    background: var(--bark-surface);
}

/* Prices */
.woocommerce .price,
.woocommerce ul.products li.product .price {
    color: var(--bark-primary);
    font-weight: 700;
}

/* Header logo: bin/setup-theme.php sets the width; the box never stretches a square logo. */
.custom-logo,
.ast-site-identity .site-logo-img img {
    height: auto;
}

/* Header (Astra header builder, laid out by bin/setup-theme.php): logo and brand, the live
   search in the middle, account, cart and the menu toggle on the right; one row. */
.site-header .ast-builder-grid-row { align-items: center; }
.site-header .site-header-section { gap: .75rem; }
.site-header .site-header-section-left { gap: .6rem; }
.bark-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
    color: var(--bark-ink);
}
.bark-brand-name { font-weight: 900; font-size: 1.375rem; letter-spacing: -.01em; white-space: nowrap; }
.bark-brand-mark { font-size: .7em; vertical-align: super; margin-left: .1em; }
.bark-brand-tagline {
    display: block;
    color: var(--bark-accent-deep);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-header .ast-header-html-1 { flex: 1 1 auto; min-width: 0; }
.site-header .ast-header-html-1 .ast-header-html,
.site-header .ast-header-html-1 .ast-builder-html-element,
.site-header .ast-header-html-1 .dgwt-wcas-search-wrapp { width: 100%; max-width: 640px; margin: 0 auto; }
.site-header .site-header-primary-section-center { flex: 1 1 auto; justify-content: center; }
/* Astra lays the primary row out as 1fr / auto / 1fr, which shrinks the search to its content;
   the brand and the account/cart/menu keep their width and the search takes the rest. */
.site-header .ast-primary-header-bar .ast-builder-grid-row-has-sides { grid-template-columns: auto minmax(0, 1fr) auto; }
.site-header .ast-header-account-wrap a,
.site-header .ast-header-account-wrap .ast-account-nav-menu {
    font-weight: 700;
    color: var(--bark-ink);
    text-decoration: none;
    white-space: nowrap;
}
.site-header .ast-header-account-wrap a:hover { color: var(--bark-primary); }
.site-header .ast-button-wrap .menu-toggle { color: var(--bark-ink); }
.site-header .main-header-menu > .menu-item > .menu-link {
    font-weight: 700;
    color: var(--bark-ink);
    padding: .5rem .6rem;
}
.site-header .main-header-menu .sub-menu { border-radius: var(--bark-radius); overflow: hidden; }
.site-header .ast-site-header-cart .ast-cart-menu-wrap .count,
.site-header .ast-site-header-cart .ast-woo-header-cart-info-wrap { font-weight: 700; }
.site-header .ast-header-woo-cart .ast-cart-menu-wrap,
.site-header .ast-header-woo-cart .ast-woo-header-cart-info-wrap { font-weight: 700; color: var(--bark-ink); }
.site-header .ast-mobile-header-content,
.site-header .ast-desktop-header-content { background: var(--bark-background); }
@media (max-width: 921px) {
    .site-header .ast-header-html-1 .ast-header-html,
    .site-header .ast-header-html-1 .ast-builder-html-element,
    .site-header .ast-header-html-1 .dgwt-wcas-search-wrapp { max-width: none; }
    /* The search row is part of the header, not a grey strip: Astra's own background and
       FiboSearch's inner box are dropped so the field spans the row down to the page gutter. */
    .site-header .ast-below-header-bar,
    .site-header .ast-below-header-wrap { background: var(--bark-background); }
    .site-header .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { background: transparent; padding: 0; }
    .bark-brand-name { font-size: 1.125rem; }
    .bark-brand-tagline { font-size: .55rem; letter-spacing: .12em; }
    /* Icon only on phones; the label needs the room the search takes on the next row. */
    .site-header .ast-header-woo-cart .ast-woo-header-cart-info-wrap { display: none; }
}

/* FiboSearch: rounded field, pine submit button (it ships green). */
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input {
    border-radius: 999px;
    border: 1px solid var(--bark-border);
    background: var(--bark-paper);
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit,
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
    background-color: var(--bark-primary);
    border-color: var(--bark-primary);
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit:hover,
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover {
    background-color: var(--bark-primary-dark);
}
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg path { fill: var(--bark-on-primary); }

/* Category bar right under the header (inc/navigation.php): a single line of bold text links
   on the content grid; on phones the links wrap as pills, so every category is visible without
   scrolling. The bar sits inside a flex container
   (Astra's content wrapper), so its width is fixed to the viewport, never to its content. */
.bark-catbar {
    width: 100%;
    max-width: calc(var(--bark-content-width) + 2 * var(--bark-gutter));
    min-width: 0;
    margin: 0 auto;
    padding: 0 var(--bark-gutter);
    box-sizing: border-box;
}
.bark-catbar ul {
    list-style: none;
    margin: 0;
    padding: .75rem 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--bark-border);
}
.bark-catbar ul::-webkit-scrollbar { display: none; }
.bark-catbar li { margin: 0; flex: 0 0 auto; }
.bark-catbar a {
    display: inline-block;
    padding: .2rem 0;
    color: var(--bark-ink);
    font-weight: 800;
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.bark-catbar a:hover { color: var(--bark-primary); border-bottom-color: var(--bark-primary); }
.bark-catbar a[aria-current="page"] { color: var(--bark-primary); border-bottom-color: var(--bark-primary); }
@media (max-width: 600px) {
    .bark-catbar ul {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: center;
        gap: .4rem;
        padding: .6rem 0;
    }
    .bark-catbar li { flex: 0 1 auto; }
    .bark-catbar a {
        padding: .35rem .8rem;
        font-size: .8rem;
        font-weight: 700;
        border: 1px solid var(--bark-border);
        border-radius: 999px;
        background: var(--bark-surface);
    }
    .bark-catbar a:hover,
    .bark-catbar a[aria-current="page"] {
        color: var(--bark-on-primary);
        background: var(--bark-primary);
        border-color: var(--bark-primary);
    }
}

/* Footer (inc/footer.php): pine band, four columns with the seller identity, shop, about and
   documents, on the same grid as the header. Text is cream on pine (10.8:1). */
footer.site-footer,
footer.site-footer .site-below-footer-wrap,
footer.site-footer .ast-builder-grid-row-container {
    background: var(--bark-primary);
    color: var(--bark-surface);
}
footer.site-footer a,
footer.site-footer .ast-footer-copyright,
footer.site-footer .ast-footer-copyright a { color: var(--bark-on-primary); }
.bark-footer-nap {
    max-width: calc(var(--bark-content-width) + 2 * var(--bark-gutter));
    margin: 0 auto;
    padding: 2.5rem var(--bark-gutter) .5rem;
    box-sizing: border-box;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--bark-surface);
}
.bark-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    text-align: left;
    padding: 1rem 0 1.5rem;
}
.bark-footer-heading {
    font-family: var(--bark-font-display);
    font-size: 1.1rem;
    margin: 0 0 .6rem;
    color: var(--bark-on-primary);
}
.bark-footer-col p { margin: 0 0 .6rem; }
.bark-footer-col ul { list-style: none; margin: 0; padding: 0; }
.bark-footer-col li { margin: 0 0 .35rem; }
.bark-footer-nap a { text-decoration: none; color: var(--bark-on-primary); }
.bark-footer-nap a:hover { text-decoration: underline; }
.bark-footer-identity { font-size: .85rem; opacity: .9; }
.bark-footer-payments {
    margin-top: .4rem;
    padding: .6rem .8rem;
    display: inline-block;
    background: var(--bark-background);
    border-radius: var(--bark-radius);
}
.bark-footer-payments .bark-payment-mark-text { color: var(--bark-text); }
@media (max-width: 921px) {
    .bark-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .bark-footer-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Payment brand marks (footer + checkout) */
.bark-payment-marks { display: inline-flex; align-items: center; gap: .6rem; margin-top: .3rem; }
.bark-payment-marks img { height: 20px; width: auto; }
.bark-payment-mark-text { font-size: .8rem; color: var(--bark-muted); }

/* Shop stage notice (verification stage): sits under the disabled order button. */
.bark-shop-stage-notice { margin: .8rem 0 0; font-size: .9rem; }

/* Cookie consent (cookie-law-info). The preference centre's category headers are <button>s:
   keep the theme's button skin off them so the plugin's own styles apply. */
.cky-preference-center .cky-accordion-btn,
.cky-preference-center .cky-accordion-btn:hover,
.cky-preference-center .cky-accordion-btn:focus {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* On phones the stock banner covered half the screen: tighter type, buttons in a row. */
@media (max-width: 600px) {
    .cky-consent-container .cky-consent-bar { padding: 12px 16px; }
    .cky-consent-bar .cky-title { font-size: 15px; line-height: 20px; margin: 0 0 6px; }
    .cky-consent-bar .cky-notice-des,
    .cky-consent-bar .cky-notice-des p { font-size: 13px; line-height: 18px; }
    .cky-consent-bar .cky-notice-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .cky-consent-bar .cky-notice-btn-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
    .cky-consent-bar .cky-notice-btn-wrapper .cky-btn {
        flex: 1 1 calc(50% - 4px);
        margin: 0;
        padding: 9px 8px;
        font-size: 13px;
        line-height: 1.2;
    }
    .cky-consent-bar .cky-notice-btn-wrapper .cky-btn-accept { flex-basis: 100%; }
}