/* aroma tone – overrides on top of the re-skinned Sullivan (brand-sullivan.sh).
   Colours sampled from the home-page mockup (nc_shared_files/wyczajone/mockup.png):
   tło #FCF4EB, powierzchnia #FFFAF4, tekst #2A1810, tekst 2 #4E3D32, linie #E6D7C4,
   złoto #C1822B, akcent #9E3F22; barwy herbat: biała #E6D9A2, zielona #C3C267,
   żółta #DDB443, ulung #C7862F, czarna #9E3F22, ciemna #4A2317. */

:root {
  --at-bg: #FCF4EB;
  --at-surface: #FFFAF4;
  --at-ink: #2A1810;
  --at-ink-2: #4E3D32;
  --at-line: #E6D7C4;
  --at-gold: #C1822B;
  --at-accent: #9E3F22;
  --at-serif: Newsreader, Georgia, serif;
  --at-sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --at-brand: Cinzel, 'Trajan Pro', Georgia, serif;
}

/* ---------- base ---------- */

body, .body-inner { background: var(--at-bg); color: var(--at-ink); }
#site-footer.bg-black { background-color: var(--at-ink); color: var(--at-bg); }

h1, h2, h3, .entry-title, .product_title, .page-title {
  font-family: var(--at-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
h4, h5, h6, .excerpt, .woocommerce-store-notice, blockquote { font-family: var(--at-sans); }
.excerpt { font-size: 24px; }

.entry-content a, .woocommerce-info a, .woocommerce-message a { color: var(--at-accent); }
body a:hover, .entry-content a:hover { color: var(--at-accent); }

/* buttons: warm dark, accent on hover */
button, .button, input[type="submit"], input[type="button"], .wp-block-button__link,
.wp-block-search__button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background-color: var(--at-ink);
  color: var(--at-bg);
  border: none;
}
button:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.wp-block-button__link:hover, .wp-block-search__button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background-color: var(--at-accent);
  color: var(--at-bg);
}
.woocommerce span.onsale { background-color: var(--at-gold); color: var(--at-ink); }

/* ---------- header: one row (logo | menu | search, account, basket) on desktop ---------- */

.site-header { background: var(--at-bg); border-bottom: none; }
.site-header .site-description { display: none; }   /* the logo carries "HERBACIARNIA" */
.site-header .custom-logo-link img { max-height: 64px; width: auto; }

@media (min-width: 1000px) {
  .site-header {
    display: flex; align-items: center; gap: 28px;
    max-width: 1280px; width: 90%; margin: 0 auto; padding: 26px 0;
  }
  .site-header .header-inner, .site-header .header-titles { display: contents; }
  .site-header .nav-toggle { display: none; }

  .site-header .custom-logo-link { order: 1; margin: 0 auto 0 0; }
  .site-header .custom-logo-link img { margin: 0; max-height: 58px; }

  .site-header .site-nav {
    order: 2; display: flex; gap: 36px; margin: 0 24px 0 0; padding: 0;
    border: none; background: none; width: auto; position: static; justify-content: flex-end;
  }
  .site-header .site-nav > li { margin: 0; }
  .site-header .site-nav a { font-family: var(--at-serif); font-size: 18px; color: var(--at-ink); padding: 8px 0; }

  .site-header .header-search,
  .site-header .header-account,
  .site-header .header-cart {
    position: relative; top: auto; right: auto; left: auto; bottom: auto; transform: none; margin: 0;
  }
  .site-header .header-search { order: 3; }
  .site-header .header-account { order: 4; }
  .site-header .header-cart { order: 5; }
  /* search collapses to its icon, opens on focus */
  .site-header .header-search input[type="search"] { width: 30px; transition: width .2s ease; cursor: pointer; background-color: transparent; }
  .site-header .header-search input[type="search"]:focus { background-color: var(--at-surface); }
  .site-header .header-search input[type="search"]::placeholder { color: transparent; }
  .site-header .header-search input[type="search"]:focus { width: 220px; cursor: text; }
  .site-header .header-search input[type="search"]:focus::placeholder { color: var(--at-ink-2); }
}

/* sub-menu (Produkty -> categories) */
.site-nav ul { background: var(--at-surface); border: 1px solid var(--at-line); }
.site-nav ul a { font-family: var(--at-sans); font-size: 15px; }

/* ---------- six-bowl tea marker (products) ---------- */

.at-bowls { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.at-bowl {
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--at-ink); background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.at-bowl > span { width: 15px; height: 15px; border-radius: 50%; background: transparent; }
.at-bowl.is-on > span { background: var(--at-tea); }
.at-bowls__label {
  margin-left: 8px; font-family: var(--at-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--at-ink-2);
}
ul.products .at-bowls { justify-content: center; margin: 6px 0 8px; gap: 4px; }
ul.products .at-bowl { width: 16px; height: 16px; border-width: 1px; }
ul.products .at-bowl > span { width: 11px; height: 11px; }
ul.products .at-bowls__label { display: none; }

/* ---------- home page (brand/front-page.php) ---------- */
/* category rows: bowls + kind only (no repeated AROMA TONE wordmark) */

#site-content.at-home { background: var(--at-bg); padding: 0; }

.at-hero { position: relative; overflow: hidden; }
.at-hero__inner {
  position: relative; z-index: 1; max-width: 1280px; width: 90%; margin: 0 auto;
  min-height: 520px; display: flex; flex-direction: column; justify-content: center; padding: 40px 0 60px;
}
.at-hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background: url(hero.jpg) center right / cover no-repeat;
}
.at-hero__media::before {   /* only soften the cut on the left, where the photo meets the text */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--at-bg) 0%, rgba(252, 244, 235, 0) 22%);
}
/* as in the mockup the photo runs up behind the header (header transparent on the home page) */
@media (min-width: 1000px) {
  .home .site-header { position: relative; z-index: 5; background: transparent; }
  .at-hero { overflow: visible; }
  .at-hero__media { top: -110px; }
}
.at-hero__title {
  font-family: var(--at-serif); font-weight: 500; font-size: 68px; line-height: 1.04;
  letter-spacing: -0.015em; color: var(--at-ink); margin: 0; max-width: 520px;
}
.at-hero__rule { width: 100px; height: 2px; background: var(--at-gold); border: 0; margin: 34px 0 30px; }
.at-hero__lead {
  font-family: var(--at-sans); font-size: 13px; font-weight: 500; line-height: 2;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--at-ink); margin: 0 0 40px; max-width: 440px;
}
.at-pill {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  background: var(--at-ink); color: var(--at-bg); border-radius: 999px; padding: 15px 30px;
  font-family: var(--at-serif); font-size: 19px; text-decoration: none; transition: background-color .15s;
}
.at-pill:hover, body .at-pill:hover { background: var(--at-accent); color: var(--at-bg); text-decoration: none; }
.at-arrow { display: inline-block; width: 22px; height: 12px; position: relative; }
.at-arrow::before { content: ""; position: absolute; left: 0; right: 2px; top: 50%; height: 1.5px; background: currentColor; }
.at-arrow::after {
  content: ""; position: absolute; right: 1px; top: 50%; width: 8px; height: 8px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg);
}

.at-teas { list-style: none; max-width: 880px; width: 90%; box-sizing: border-box; margin: 30px auto 90px; padding: 0; }
.at-tea { margin: 0; }
.at-tea a {
  display: grid; grid-template-columns: 250px 2px 1fr 40px; align-items: center; gap: 0 60px;
  padding: 34px 0; color: var(--at-ink); text-decoration: none;
}
.at-tea__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.at-tea__wordmark { font-family: var(--at-brand); font-weight: 600; font-size: 21px; letter-spacing: 0.04em; line-height: 1; }
.at-tea__brand .at-bowls { margin: 0; gap: 10px; }
.at-tea__brand .at-bowl { width: 22px; height: 22px; border-width: 1.5px; }
.at-tea__brand .at-bowl > span { width: 15px; height: 15px; }
.at-tea__brand .at-bowls__label { display: none; }
.at-tea__kind { font-family: var(--at-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.at-tea__rule { width: 2px; height: 70px; background: var(--at-gold); }
.at-tea__name { font-family: var(--at-serif); font-weight: 500; font-size: 40px; line-height: 1.1; }
.at-tea__tagline { display: inline-block; margin-top: 12px; font-family: var(--at-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; }
.at-tea .at-arrow { width: 30px; height: 16px; transition: transform .15s; }
.at-tea a:hover .at-tea__name { color: var(--at-accent); }
.at-tea a:hover .at-arrow { transform: translateX(6px); color: var(--at-accent); }

@media (max-width: 999px) {
  .at-hero__inner { min-height: 0; padding: 0 0 40px; }
  .at-hero__media { position: relative; width: 100%; height: 260px; }
  .at-hero__media::before { background: none; }
  .at-hero__title { font-size: 44px; }
  .at-hero__lead { letter-spacing: 0.22em; font-size: 12px; }
  .at-tea a { grid-template-columns: minmax(0, 1fr) 30px; gap: 14px 12px; padding: 26px 0; border-bottom: 1px solid var(--at-line); }
  .at-tea__text { min-width: 0; }
  .at-tea__brand { grid-column: 1 / -1; align-items: flex-start; }
  .at-tea__rule { display: none; }
  .at-tea__name { font-size: 30px; }
  .at-tea__tagline { font-size: 11px; letter-spacing: 0.22em; }
}

/* ---------- content pages (O nas): lead paragraph and signature ---------- */
.entry-content .at-lead {
  font-family: var(--at-serif); font-size: 26px; line-height: 1.45; color: var(--at-ink);
  padding-bottom: 28px; margin-bottom: 36px; border-bottom: 2px solid var(--at-gold);
}
.entry-content h2 { font-size: 30px; margin-top: 48px; }
.entry-content .at-signature { font-family: var(--at-serif); font-style: italic; font-size: 21px; margin-top: 48px; }
.entry-content .at-signature strong { font-family: var(--at-brand); font-style: normal; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 17px; }