/* Atko Bros — the store's header, phone menu and footer, matching the
   tenant's own website (the atkobroslandscaping project), which is served on
   the same domain. Loaded after store.css for this tenant only.

   The header and footer rules below mirror that site's stylesheet, with
   class names of their own so they never collide with the store's. A change
   to the website's header or footer is made here as well. */

.store--theme-atko {
    --forest: #1a2e1a;
    --green: #2b824f;
    --green-dark: #226b40;
    --sage: #f2f6f4;
    --line: #dde5df;
    --ink: #1c2620;
    --muted: #5a6a5f;
    --white: #fff;
    --radius: 6px;
    --wrap: 80rem;
    --gutter: 1.25rem;
    --header-h: 4.75rem;
    /* The header is fixed, so the page starts below it (its height plus its bottom border). */
    padding-top: calc(var(--header-h) + 1px);
}
html:has(.store--theme-atko) { scroll-padding-top: calc(4.75rem + 1rem); }
@media (min-width: 62rem) { .store--theme-atko { --gutter: 2rem; } }

.atko-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.atko-icon { width: 1.2em; height: 1.2em; flex: none; }
.atko-header, .atko-footer { font-size: 1.0625rem; line-height: 1.6; }
.atko-header ul, .atko-footer ul { margin: 0; padding: 0; list-style: none; }
.atko-header a:hover, .atko-footer a:hover { text-decoration: none; }
.atko-footer p { margin: 0; }
.atko-footer h2 { line-height: 1.12; font-weight: 600; }

.atko-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    border: 1px solid var(--green);
    border-radius: var(--radius);
    background: var(--green);
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s;
}
.atko-btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.atko-btn--small { padding: 0.55rem 0.95rem; font-size: 0.92rem; }
.atko-menu-toggle svg[hidden] { display: none; }

/* ─── Header ─────────────────────────────────────────────────── */
.atko-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.atko-header__inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }

.atko-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.atko-brand:hover { color: var(--ink); }
.atko-brand img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.atko-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.atko-brand__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.atko-brand__sub { font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.atko-brand--light, .atko-brand--light:hover { color: var(--white); }
.atko-brand--light img { filter: invert(1); }
.atko-brand--light .atko-brand__sub { color: rgba(255, 255, 255, 0.65); }

.atko-nav, .atko-header__actions { display: none; }
.atko-nav ul { display: flex; gap: 0.25rem; }
.atko-nav a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}
.atko-nav a:hover { background: var(--sage); color: var(--ink); }
.atko-nav a[aria-current="page"] { color: var(--green-dark); box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
.atko-header__actions { align-items: center; gap: 1rem; }
.atko-header__phone { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.atko-header__phone .atko-icon { color: var(--green); }

.atko-menu-toggle { display: inline-flex; padding: 0.6rem; margin-right: -0.6rem; border: 0; background: none; color: var(--ink); cursor: pointer; }
.atko-menu-toggle .atko-icon { width: 1.6rem; height: 1.6rem; }

.atko-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px rgba(26, 46, 26, 0.25);
}
.atko-menu li + li { border-top: 1px solid var(--line); }
.atko-menu ul a { display: block; padding: 0.85rem 0.25rem; color: var(--ink); font-size: 1.1rem; font-weight: 500; text-decoration: none; }
.atko-menu ul a[aria-current="page"] { color: var(--green-dark); }
.atko-menu__actions { display: grid; gap: 0.9rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.atko-menu__phone { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.25rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.atko-menu__phone .atko-icon { color: var(--green); }

@media (min-width: 62rem) {
    .atko-nav, .atko-header__actions { display: flex; }
    .atko-menu-toggle, .atko-menu { display: none; }
    .atko-brand { margin-right: 0; }
    .atko-nav { margin: 0 auto; }
}
@media (min-width: 62rem) and (max-width: 72rem) {
    .atko-header__phone { display: none; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
.atko-footer { background: var(--forest); color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.atko-footer a { color: inherit; text-decoration: none; }
.atko-footer a:hover { color: var(--white); }
.atko-footer .atko-brand--light, .atko-footer .atko-brand--light:hover { color: var(--white); }
.atko-footer__call { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; padding: 2.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.atko-footer__call p { color: var(--white); font-size: 1.2rem; font-weight: 500; }
.atko-footer__call a { color: var(--white); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; }
.atko-footer__call a:hover { color: #7fd0a0; }
.atko-footer__grid { display: grid; gap: 2.5rem; padding: 3rem 0; }
.atko-footer__about p { margin-top: 1.25rem; max-width: 22rem; line-height: 1.6; }
.atko-footer__social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.atko-footer__social a { display: inline-flex; padding: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius); }
.atko-footer__social a:hover { border-color: var(--white); }
.atko-footer h2 { margin-bottom: 1rem; color: var(--white); font-size: 1.05rem; letter-spacing: 0; }
.atko-footer li + li { margin-top: 0.55rem; }
.atko-footer__contact li { display: flex; gap: 0.6rem; overflow-wrap: anywhere; }
.atko-footer__contact .atko-icon { margin-top: 0.2em; color: #7fd0a0; }
.atko-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding: 1.5rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }
.atko-footer__bar a + a { margin-left: 1.5rem; }
@media (min-width: 40rem) { .atko-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .atko-footer__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr); gap: 3rem; padding: 4rem 0; } }

/* ─── The store's banner ─────────────────────────────────────── */
/* Same format and measurements as the banner on the website's inner pages:
   a short strip of photo with the title over it. The delivery and payment
   facts the default banner carries are left to the order form, which states
   both where they are needed. */
.store--theme-atko .store-hero--photo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 10.5rem;
    min-height: 0;
    /* Up against the header: cancel the page's top padding on phones. */
    margin: -1.5rem 0 1.5rem calc(50% - 50vw);
    padding: 0;
    background-position: center 62%;
}
.store--theme-atko .store-hero--photo::before { background: linear-gradient(90deg, rgba(18, 32, 18, 0.9) 0%, rgba(18, 32, 18, 0.68) 42%, rgba(18, 32, 18, 0.2) 100%); }
.store--theme-atko .store-hero__inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.store--theme-atko .store-hero--photo h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; word-spacing: normal; }
.store--theme-atko .store-hero--photo .store-hero__lede { max-width: none; margin-top: 0.5rem; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; line-height: 1.6; }
.store--theme-atko .store-hero .store-facts,
.store--theme-atko .store-hero__strip { display: none; }
@media (min-width: 48rem) {
    .store--theme-atko .store-hero--photo { margin-top: 0; margin-bottom: 2.5rem; }
}
@media (min-width: 62rem) {
    .store--theme-atko .store-hero--photo { height: clamp(13rem, 19vw, 16rem); }
    .store--theme-atko .store-hero--photo .store-hero__lede { font-size: 1.15rem; }
}

/* ─── Store pages under this header ──────────────────────────── */
/* Line the store's content up with the header's logo and button. */
@media (min-width: 64rem) {
    .store--theme-atko.store--wide { --store-width: 80rem; }
    .store--theme-atko.store--wide .store__main { padding-left: 2rem; padding-right: 2rem; }
    /* The order summary follows the page down, stopping just under the header. */
    .store--theme-atko .store-order__aside { top: calc(var(--header-h) + 1px + 1.5rem); }
}