/*
 * happydrewienko - site chrome.
 *
 * Global stylesheet: header, navigation, hero, sections, footer, typography, buttons,
 * forms and tables. Loaded on every page, so it stays lean - page-specific styling
 * (product, cart, checkout, thank-you) lives in the happydrewienko-core plugin and is
 * enqueued conditionally.
 *
 * Colours come exclusively from assets/css/tokens.css. Never introduce a colour here.
 * Component classes owned by the plugin (.hd-btn, .hd-card, .hd-field, .hd-note,
 * .hd-trust, .hd-safety, .hd-drawer) are deliberately NOT styled in this file; the
 * button rules below exclude .hd-btn with :not() so the two never fight.
 *
 * Mobile first. Verified target: no horizontal overflow at 360px.
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts
 * Nunito is not bundled (no external downloads allowed - see the
 * contract §11 and assets/fonts/README.md).
 *
 * The @font-face rules are NOT here: functions.php prints them inline and
 * only for the weights whose .woff2 file is actually on disk. Declaring
 * them from this stylesheet made the browser request files that are not
 * shipped, which produced a 404 and a console error on every page load.
 * Until the owner adds the files, the rounded fallback stack inside
 * --hd-font-head renders instead.
 * [DO UZUPEŁNIENIA: pliki fontu Nunito w motywie]
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* overflow-x:clip (not hidden) keeps overflow-y visible, so the sticky header works. */
  overflow-x: clip;
  background-color: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--hd-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background-color: var(--hd-border);
}

::selection {
  background-color: var(--hd-border);
  color: var(--hd-text);
}

/* Storefront's container: widen it to our token and guarantee a 16px side gutter. */
.col-full {
  max-width: var(--hd-maxw);
  padding-right: 16px;
  padding-left: 16px;
}

@media (min-width: 768px) {
  .col-full {
    padding-right: 24px;
    padding-left: 24px;
  }
}

/* ------------------------------------------------------------------ *
 * 3. Typography
 * ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.6em;
  color: var(--hd-text);
  font-family: var(--hd-font-head);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* The larger headings carry the 30% colour (tokens.css); h4-h6 stay in the text colour. */
h1,
h2,
h3 {
  color: var(--hd-accent-dark);
}

h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
}

h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
}

h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
}

h4 {
  font-size: 1.1rem;
}

h5,
h6 {
  font-size: 1rem;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
}

small,
.hd-small {
  font-size: 0.875rem;
  color: var(--hd-text-muted);
}

blockquote {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--hd-accent-dark);
  background-color: var(--hd-surface);
  border-radius: var(--hd-radius-sm);
  color: var(--hd-text);
}

a {
  color: var(--hd-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus {
  color: var(--hd-text);
}

/* ------------------------------------------------------------------ *
 * 4. Accessibility helpers
 * ------------------------------------------------------------------ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background-color: var(--hd-surface);
  color: var(--hd-accent-dark);
  border: 2px solid var(--hd-accent-dark);
  border-radius: var(--hd-radius-sm);
  font-family: var(--hd-font-head);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 8px;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
}

:focus-visible {
  outline: 3px solid var(--hd-accent-dark);
  outline-offset: 2px;
}

/* Only hide the ring where the browser understands the modern selector. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------------ *
 * 5. Header
 * ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: .5rem 0;
  background-color: var(--hd-bg);
  border-bottom: 1px solid var(--hd-border);
  transition: box-shadow .15s ease;
}
.site-header.is-stuck { box-shadow: var(--hd-shadow); }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 0; } }

/* Equal outer columns keep the wordmark centred independently of either menu. */
body .site-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0 8px;
  min-height: 66px;
  padding: 0 max(24px, calc((100% - var(--hd-maxw)) / 2));
  background: var(--hd-accent);
  color: var(--hd-on-accent);
  border-bottom: 0;
}
body .site-header::before,
body .site-header::after { display: none; }
.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
  float: none; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0;
  grid-area: 1 / 2; justify-self: center;
}
.hd-branding__link { display: flex; align-items: center; gap: 10px; min-height: 66px; text-decoration: none; }
.hd-branding__mark { width: 40px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.site-header .custom-logo-link { display: flex; align-items: center; justify-content: center; min-height: 66px; max-width: 200px; }
.site-header .custom-logo { width: auto; height: auto; max-width: 100%; max-height: 56px; object-fit: contain; }
.hd-branding__name { color: var(--hd-brand-gold); font-family: var(--hd-font-head); font-size: 20px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.site-header a:not(.button),
.site-header .hd-nav-toggle,
.site-header .hd-cart-toggle { color: var(--hd-on-accent); }
.site-header :focus-visible { outline: 2px solid var(--hd-buy); outline-offset: 4px; }
.site-header .hd-header__actions { display: contents; margin: 0; padding: 0; float: none; width: auto; }
.hd-nav-toggle,
.hd-cart-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  font-family: var(--hd-font-head); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
}
.site-header .hd-nav-toggle:hover,
.site-header .hd-cart-toggle:hover { background: #ffffff0d; }
.hd-nav-toggle { grid-area: 1 / 1; display: none; }
.hd-js .hd-nav-toggle { display: inline-flex; }
.hd-nav-toggle__bars { position: relative; display: block; width: 22px; height: 2px; background: currentColor; }
.hd-nav-toggle__bars::before,
.hd-nav-toggle__bars::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.hd-nav-toggle__bars::before { top: -7px; }
.hd-nav-toggle__bars::after { top: 7px; }
.hd-nav-toggle[aria-expanded="true"] .hd-nav-toggle__bars { background: transparent; }
.hd-nav-toggle[aria-expanded="true"] .hd-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.hd-nav-toggle[aria-expanded="true"] .hd-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
.site-header .hd-cart-toggle { grid-area: 1 / 3; position: relative; justify-self: end; }
.site-header button.hd-cart-toggle { display: none; }
.hd-js .site-header button.hd-cart-toggle { display: inline-flex; }
.site-header noscript { grid-area: 1 / 3; justify-self: end; }
.hd-cart-toggle__icon { width: 28px; height: 28px; flex: 0 0 auto; }
.hd-cart-toggle__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--hd-buy); color: var(--hd-on-buy); border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.site-header .hd-cart-toggle__count { position: absolute; top: 4px; right: 0; }
.hd-nav-toggle__label,
.site-header .hd-cart-toggle__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
}

/* Both groups remain one ordered set of WordPress links, without duplicate mobile links. */
.site-header .hd-nav { float: none; width: 100%; margin: 0; padding: 0; grid-column: 1 / -1; }
.site-header .hd-nav--start { grid-row: 2; }
.site-header .hd-nav--end { grid-row: 3; }
.hd-js .site-header .hd-nav { display: none; }
.hd-js .site-header .hd-nav.is-open { display: block; }
.hd-nav__list { list-style: none; margin: 0; padding: 0; }
.hd-nav__list li { margin: 0; }
.site-header .hd-nav__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 12px 0; border-top: 1px solid #dde8da26;
  color: var(--hd-on-accent); font-family: var(--hd-font-head); font-weight: 600; text-decoration: none;
}
.hd-nav__list a::after { content: ''; width: 7px; height: 7px; margin-right: 5px; border: solid var(--hd-buy); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); flex: 0 0 auto; }
.site-header .hd-nav--end .hd-nav__list { padding-bottom: 8px; }
.site-header .hd-nav__list a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-header .hd-nav__list .current-menu-item > a { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 379px) {
  body .site-header { padding-inline: 12px; gap: 0 6px; }
  .hd-branding__link { gap: 6px; }
  .hd-branding__mark { width: 30px; height: 38px; }
  .hd-branding__name { font-size: 17px; }
}
@media (min-width: 1200px) {
  body .site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 32px; min-height: 78px; }
  .hd-branding__link { min-height: 78px; gap: 12px; }
  .hd-branding__mark { width: 46px; height: 56px; }
  .site-header .custom-logo-link { min-height: 78px; }
  .hd-branding__name { font-size: 24px; }
  .site-header .hd-nav--start { grid-area: 1 / 1; }
  .site-header .hd-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; grid-area: 1 / 3; }
  .site-header .hd-nav--end { width: auto; }
  .site-header .hd-nav, .hd-js .site-header .hd-nav { display: block; }
  .hd-nav-toggle, .hd-js .hd-nav-toggle { display: none; }
  .hd-nav__list { display: flex; gap: 32px; }
  .site-header .hd-nav--end .hd-nav__list { gap: 24px; padding: 0; }
  .site-header .hd-nav__list a { min-height: 44px; padding: 8px 0; border: 0; white-space: nowrap; font-size: 15px; }
  .hd-nav__list a::after { display: none; }
  .site-header .hd-cart-toggle { position: static; min-height: 32px; padding-left: 20px; border-left: 1px solid #dde8da26; border-radius: 0; gap: 10px; }
  .site-header .hd-cart-toggle__label { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; }
  .site-header .hd-cart-toggle__count { position: static; }
}

/* ------------------------------------------------------------------ *
 * 7. Content shell, hero, sections
 * ------------------------------------------------------------------ */

.site-content {
  padding: 1.5rem 0 2.5rem;
}

.site-main {
  min-width: 0;
}

.hd-hero {
  margin: 0 0 2rem;
  padding: 1.5rem;
  background-color: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-lg);
  box-shadow: var(--hd-shadow);
}

.hd-hero__title {
  margin-top: 0;
}

.hd-hero__lead {
  max-width: 56ch;
  color: var(--hd-text-muted);
  font-size: 1.125rem;
}

.hd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.hd-hero__media img {
  border-radius: var(--hd-radius);
}

@media (min-width: 900px) {
  .hd-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
  }
}

.hd-section {
  margin: 0 0 2.5rem;
}

.hd-section--alt {
  padding: 1.5rem;
  background-color: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-lg);
}

.hd-section__title {
  margin-top: 0;
}

.hd-section__lead {
  max-width: 62ch;
  color: var(--hd-text-muted);
}

/* Keep regulation numbers inside the reading column and separate each provision. */
.hd-terms {
  max-width: 76ch;
  margin-inline: auto;
}

.hd-terms .hd-section + .hd-section {
  padding-top: 1.75rem;
  border-top: 1px solid var(--hd-border);
}

.hd-terms .hd-section > ol,
.hd-terms .hd-section > ul {
  margin: 1rem 0;
  padding-inline-start: 1.6rem;
}

.hd-terms .hd-section > ol {
  list-style: decimal outside;
}

.hd-terms .hd-section > ul {
  list-style: disc outside;
}

.hd-terms li {
  padding-inline-start: 0.25rem;
}

.hd-terms li + li {
  margin-top: 0.85rem;
}

.hd-terms li::marker {
  color: var(--hd-accent-dark);
  font-weight: 700;
}

.hd-terms a {
  overflow-wrap: anywhere;
}

.hd-terms .hd-terms__seller > h2 {
  margin-bottom: 0.75rem;
}

.hd-terms .hd-terms__seller > p {
  margin-bottom: 0.5rem;
}

.hd-terms .hd-terms__seller > ul {
  margin: 0.5rem 0 0;
}

.hd-terms .hd-terms__seller li + li {
  margin-top: 0.375rem;
}

.hd-terms__seller-note {
  display: block;
  margin-top: 0.125rem;
  color: var(--hd-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.hd-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .hd-grid--2,
  .hd-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .hd-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hd-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ *
 * 8. Buttons
 * Mapped onto Storefront / WooCommerce classes so shop buttons inherit
 * our brand. .hd-btn is excluded everywhere: those rules belong to the
 * plugin's base.css and must never be overridden from here.
 * ------------------------------------------------------------------ */

button:not(.hd-btn):not(.hd-nav-toggle):not(.hd-cart-toggle):not(.menu-toggle),
input[type="button"]:not(.hd-btn),
input[type="reset"]:not(.hd-btn),
input[type="submit"]:not(.hd-btn),
.button:not(.hd-btn),
.woocommerce a.button:not(.hd-btn),
.woocommerce button.button:not(.hd-btn),
.woocommerce input.button:not(.hd-btn),
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  background-color: var(--hd-surface);
  color: var(--hd-accent-dark);
  border: 2px solid var(--hd-accent-dark);
  border-radius: var(--hd-radius);
  box-shadow: none;
  text-shadow: none;
  font-family: var(--hd-font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

button:not(.hd-btn):not(.hd-nav-toggle):not(.hd-cart-toggle):not(.menu-toggle):hover,
input[type="submit"]:not(.hd-btn):hover,
.button:not(.hd-btn):hover,
.woocommerce a.button:not(.hd-btn):hover,
.woocommerce button.button:not(.hd-btn):hover,
.woocommerce input.button:not(.hd-btn):hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--hd-bg);
  color: var(--hd-accent-dark);
  filter: none;
}

/* Primary action: white on --hd-accent-dark passes AA (7.9:1). */
input[type="submit"]:not(.hd-btn),
.button.alt:not(.hd-btn),
.woocommerce a.button.alt:not(.hd-btn),
.woocommerce button.button.alt:not(.hd-btn),
.woocommerce input.button.alt:not(.hd-btn),
.woocommerce #respond input#submit.alt {
  background-color: var(--hd-accent-dark);
  color: #fff;
  border-color: var(--hd-accent-dark);
}

input[type="submit"]:not(.hd-btn):hover,
.button.alt:not(.hd-btn):hover,
.woocommerce a.button.alt:not(.hd-btn):hover,
.woocommerce button.button.alt:not(.hd-btn):hover,
.woocommerce input.button.alt:not(.hd-btn):hover,
.woocommerce #respond input#submit.alt:hover {
  /* Darkening with a filter keeps us inside the token palette. */
  background-color: var(--hd-accent-dark);
  color: #fff;
  filter: brightness(0.92);
}

/*
 * Purchase: gold with the dark label (7.2:1) - the 10% colour, printed on the buttons that buy and
 * nowhere else (tokens.css). WooCommerce marks both buttons .button.alt as well, so the selectors
 * name that pair too and outrank the green primary rule above.
 */
.woocommerce .button.alt.single_add_to_cart_button:not(.hd-btn),
.woocommerce .button.alt.checkout-button:not(.hd-btn) {
  background-color: var(--hd-buy);
  background-image: var(--hd-buy-sheen);
  color: var(--hd-on-buy);
  border-color: var(--hd-buy);
}

.woocommerce .button.alt.single_add_to_cart_button:not(.hd-btn):hover,
.woocommerce .button.alt.checkout-button:not(.hd-btn):hover {
  background-color: var(--hd-buy);
  color: var(--hd-on-buy);
  filter: brightness(0.94);
}

/*
 * Disabled state.
 *
 * An opacity of 0.55 over the first palette's sage dropped the label to 2.1:1 against the button,
 * far below AA. A muted grey from the palette is used instead of fading the colour: it reads
 * unmistakably as inactive (the brand hue is gone) and the label keeps ~6.8:1.
 */
button[disabled]:not(.hd-btn),
input[type="submit"][disabled]:not(.hd-btn),
.button.disabled:not(.hd-btn),
.woocommerce a.button.disabled:not(.hd-btn),
.woocommerce button.button:disabled:not(.hd-btn),
.woocommerce button.button.disabled:not(.hd-btn) {
  background-color: var(--hd-text-muted);
  border-color: var(--hd-text-muted);
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  filter: none;
}

/*
 * Storefront ships "button.disabled, button:disabled { opacity: .5 !important }" in its own
 * style.css. No amount of specificity beats !important, and at 50% the label dropped to 2.3:1
 * against the button - an AA failure Lighthouse reports on every product page, because WooCommerce
 * marks the add-to-cart button disabled until the variation resolves.
 *
 * The override is therefore !important as well, and deliberately narrow: only the buttons this
 * theme colours, never a generic control. The muted grey already signals "inactive", so nothing is
 * lost by rendering it at full opacity.
 */
.woocommerce button.button.alt.disabled:not(.hd-btn),
.woocommerce button.button.alt:disabled:not(.hd-btn),
.woocommerce button.single_add_to_cart_button.disabled:not(.hd-btn),
.woocommerce button.single_add_to_cart_button:disabled:not(.hd-btn),
.woocommerce button.single_add_to_cart_button.wc-variation-selection-needed:not(.hd-btn),
.woocommerce .button.alt.single_add_to_cart_button.disabled:not(.hd-btn),
.woocommerce .button.alt.single_add_to_cart_button:disabled:not(.hd-btn),
.woocommerce .button.alt.single_add_to_cart_button.wc-variation-selection-needed:not(.hd-btn) {
  background-color: var(--hd-text-muted);
  background-image: none;
  border-color: var(--hd-text-muted);
  color: #fff;
  opacity: 1 !important;
}

/* ------------------------------------------------------------------ *
 * 9. Forms
 * (.hd-field and its parts belong to the plugin's base.css.)
 * ------------------------------------------------------------------ */

label {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-family: var(--hd-font-head);
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  background-color: var(--hd-surface);
  color: var(--hd-text);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-sm);
  box-shadow: none;
  font-family: var(--hd-font-body);
  font-size: 1rem;
  line-height: 1.4;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--hd-accent-dark);
  background-color: var(--hd-surface);
}

input::placeholder,
textarea::placeholder {
  color: var(--hd-text-muted);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--hd-accent-dark);
}

fieldset {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-sm);
}

legend {
  padding: 0 0.4rem;
  font-family: var(--hd-font-head);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 10. Tables
 * ------------------------------------------------------------------ */

table {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  background-color: var(--hd-surface);
}

th,
td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--hd-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  font-family: var(--hd-font-head);
  font-weight: 700;
}

/* Wrap a wide table in this to keep the page itself from scrolling sideways. */
.hd-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 11. Footer
 * The safety notice in the footer is rendered by the plugin
 * (Happydrewienko\Safety_Notice) - it is deliberately not repeated here.
 * ------------------------------------------------------------------ */

/* Dark olive with white labels and a softer tint for secondary text. */
.site-footer {
  padding: 2rem 0 1rem;
  background-color: var(--hd-accent-dark);
  border-top: 0;
  color: var(--hd-on-accent);
  font-size: .95rem;
}
body:not(.hd-purchase-focus) .site-footer { padding-bottom: 1.5rem; font-size: 14px; line-height: 1.65; }
.site-footer a:not(.button):not(.components-button) { color: var(--hd-on-accent); }
.site-footer a:not(.button):not(.components-button):hover,
.site-footer a:not(.button):not(.components-button):focus { color: var(--hd-on-accent-muted); }
.site-footer :focus-visible { outline-color: var(--hd-on-accent); }
body:not(.hd-purchase-focus) .site-footer :focus-visible { outline: 2px solid var(--hd-buy-line); outline-offset: 4px; }
.site-footer h2, .site-footer h3 { color: var(--hd-on-accent); }
body:not(.hd-purchase-focus) .site-footer a { text-decoration: none; }
body:not(.hd-purchase-focus) .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
body:not(.hd-purchase-focus) .site-footer > .col-full {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  width: calc(100% - 48px); max-width: var(--hd-maxw); margin-inline: auto; padding: 0;
}
body:not(.hd-purchase-focus) .site-footer > .col-full::before,
body:not(.hd-purchase-focus) .site-footer > .col-full::after { display: none; }
.hd-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hd-footer__col { min-width: 0; }
.hd-footer__col + .hd-footer__col { border-top: 1px solid #dde8da26; padding-top: 16px; }
.hd-footer__title { margin: 0 0 10px; font-size: 16px; font-weight: 800; line-height: 1.5; text-transform: none; }
.hd-footer__col p { margin: 0 0 10px; color: var(--hd-on-accent-muted); overflow-wrap: anywhere; }
.hd-footer__col p:last-child { margin-bottom: 0; }
.hd-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hd-footer__brand .hd-footer__title { margin: 0; color: var(--hd-brand-gold); font-size: 22px; line-height: 1.2; }
.hd-footer__brand-mark { width: 40px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.hd-footer__col--brand > p:not(.hd-footer__claim) { max-width: 300px; }
.hd-footer__col .hd-footer__claim { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--hd-on-accent); font-weight: 600; }
.hd-footer__icon, .site-footer .hd-safety__icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--hd-buy-line); }
.hd-footer__contact { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--hd-on-accent-muted); }
.hd-footer__contact > span { min-width: 0; overflow-wrap: anywhere; }
.hd-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.hd-footer__menu { margin: 0; padding: 0; list-style: none; }
.hd-footer__menu li { margin: 0; }
.hd-footer__menu a { display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 44px; padding: 5px 0; line-height: 1.5; overflow-wrap: anywhere; }
.hd-footer__bottom { border-top: 1px solid #dde8da26; padding-top: 16px; color: var(--hd-on-accent-muted); font-size: 12px; }
.hd-footer__bottom p { margin: 0; }
.site-footer .hd-safety--footer { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--hd-on-accent-muted); }
.site-footer .hd-safety--footer .hd-safety__heading { color: var(--hd-on-accent); }
.site-footer .hd-safety--footer .hd-safety__text { margin: 0; color: var(--hd-on-accent-muted); font-size: 12px; line-height: 1.75; }
.site-footer .hd-safety__icon { margin-top: 2px; }
@media (min-width: 640px) {
  .hd-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .hd-footer__col + .hd-footer__col { border-top: 0; padding-top: 0; }
  .hd-footer__inner .hd-footer__col--info { grid-column: 1 / -1; border-top: 1px solid #dde8da26; padding-top: 16px; }
  .hd-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) {
  body:not(.hd-purchase-focus) .site-footer { padding-bottom: 20px; }
  body:not(.hd-purchase-focus) .site-footer > .col-full { grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 12px 32px; }
  .hd-footer__inner { grid-column: 1 / -1; grid-template-columns: 1fr 1.1fr .85fr; gap: clamp(24px, 4vw, 64px); padding-bottom: 16px; border-bottom: 1px solid #dde8da26; }
  .hd-footer__inner .hd-footer__col--info { grid-column: auto; border: 0; padding-top: 0; }
  .hd-footer__menu { display: block; }
  .hd-footer__menu a, .hd-footer__contact, .hd-footer__contact a { min-height: 30px; padding-block: 3px; }
  .hd-footer__bottom { margin: 0; padding: 0; border: 0; }
}

.site-footer .hd-checkout-chrome--footer {
  color: var(--hd-on-accent-muted);
}

.site-footer .hd-footer__payment-provider {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0.5rem 1rem;
  color: var(--hd-accent-dark);
  background-color: var(--hd-surface);
  border-radius: var(--hd-radius-sm);
  font-family: var(--hd-font-head);
  font-size: 1.1rem;
  font-weight: 700;
}

.hd-footer__payments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.hd-footer__payments li {
  margin: 0;
}

.hd-footer__payments img {
  display: block;
  width: auto;
  height: 34px;
}

.hd-footer__note {
  font-size: 0.85rem;
  color: var(--hd-on-accent-muted);
}

/* ------------------------------------------------------------------ *
 * 12. Storefront de-cluttering that needs CSS as well as hooks
 * ------------------------------------------------------------------ */

/*
 * The handheld footer bar duplicates our own cart trigger and adds a search
 * and an account icon we do not want. functions.php removes the hook; this is
 * the safety net in case the parent registers it at a different priority.
 */
.storefront-handheld-footer-bar {
  display: none !important;
}

/* Storefront's own menu trigger: replaced by .hd-nav-toggle. */
.site-header .menu-toggle {
  display: none !important;
}

/*
 * Storefront's WooCommerce stylesheet prints these links in #727272, inline and after this file:
 * 4.2:1 on the mint ground, below AA. The body element adds the specificity that wins; the muted
 * text colour reads 6.0:1 and keeps the breadcrumb quieter than the page's own links.
 */
body .woocommerce-breadcrumb a,
body a.woocommerce-review-link,
body .product_meta a {
  color: var(--hd-text-muted);
}

/* ------------------------------------------------------------------ *
 * 13. Motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * 12. Shop view (catalogue)
 *
 * Storefront lays the loop out with floats and percentage widths on
 * .columns-N. Those are reset here and replaced with a grid, because the
 * float layout cannot keep equal-height tiles without extra markup and
 * leaves a ragged last row. Everything else in this block exists to take
 * weight OFF the page: no tile borders, no card backgrounds, no button.
 * ------------------------------------------------------------------ */

.hd-shop-intro {
  max-width: 54ch;
  margin: 0 auto 3rem;
  text-align: center;
}

.hd-shop-intro__text {
  margin: 0;
  color: var(--hd-text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

/*
 * Reset Storefront's float grid so the CSS grid above is the only layout.
 *
 * Storefront sizes tiles from woocommerce.css with a long comma-separated rule whose variants are
 * scoped by a body class - `.storefront-full-width-content .site-main ul.products.columns-2
 * li.product { width: 47.8261%; margin-right: 4.34783% }` is the one that applies here. That is
 * four classes and two elements, exactly as much as any selector written against the same
 * elements, and Storefront's stylesheet is enqueued AFTER this one, so every tie went to it: the
 * tiles stayed at 48% of their own grid cell and the photographs rendered at half the width they
 * had been given.
 *
 * Matching the variants one by one was a losing game (there are several body-class scopes, and
 * guessing which one is active is guesswork). `body[class*="woocommerce"]` adds one element and one
 * attribute to every selector below, which outranks all of them at once and keeps working if
 * Storefront renames a scope. The percentage right margin has to go with the width - it belongs to
 * the float layout that the grid replaces.
 */
body[class*="woocommerce"] ul.products li.product,
body[class*="woocommerce"] ul.products[class*="columns-"] li.product,
body[class*="woocommerce"] .site-main ul.products li.product,
body[class*="woocommerce"] .site-main ul.products[class*="columns-"] li.product {
  position: relative;
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  margin-right: 0;
  padding: 0;
  text-align: left;
}

@media (min-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem 2.5rem;
  }
}

/* The image sits in a calm frame; the photograph is the whole sales pitch. */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
  border-radius: var(--hd-radius-lg);
  background-color: var(--hd-photo);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.woocommerce ul.products li.product a:hover img,
.woocommerce ul.products li.product a:focus-visible img {
  transform: scale(1.02);
  box-shadow: var(--hd-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product a img {
    transition: none;
  }

  .woocommerce ul.products li.product a:hover img,
  .woocommerce ul.products li.product a:focus-visible img {
    transform: none;
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--hd-text);
  font-family: var(--hd-font-head);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.woocommerce ul.products li.product a {
  text-decoration: none;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: var(--hd-accent-dark);
}

.woocommerce ul.products li.product .price {
  display: block;
  margin: 0;
  color: var(--hd-text-muted);
  font-size: 1rem;
  font-weight: 400;
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
  background: none;
}

/*
 * Quiet marker for the lamps that take an engraved name.
 *
 * It sits ON the photograph rather than in the text column on purpose: in the flow it added a line
 * to some tiles and not to others, so names and prices no longer shared a baseline across the row
 * and the grid looked accidental. Over the image it reads as a label on the object and every tile
 * keeps the same text rhythm.
 */
.hd-loop-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 1;
  padding: 0.25rem 0.7rem;
  /* A label, not a purchase: white with the 30% green, never gold (tokens.css). */
  border: 1px solid var(--hd-accent-dark);
  border-radius: 999px;
  background-color: var(--hd-surface);
  color: var(--hd-accent-dark);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  box-shadow: var(--hd-shadow);
  pointer-events: none;
}

/* The catalogue carries no add-to-cart button - see hd_theme_strip_catalogue_chrome().
   This is a belt-and-braces rule for any plugin that re-adds one. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
  display: none;
}

/* Category archives get the same treatment as the shop page. */
.woocommerce .term-description {
  max-width: 54ch;
  margin: 0 auto 3rem;
  color: var(--hd-text-muted);
  text-align: center;
}

/* Shared breadcrumbs and editorial typography, extracted from collection.css. */
:root { --hd-font-editorial: Georgia, 'Times New Roman', serif; }
body .storefront-breadcrumb { padding-block: 1.25rem; margin-bottom: 1.75rem; }
body .hd-breadcrumb { margin: 0px; font-size: 0.8rem; }
body .woocommerce-breadcrumb.hd-breadcrumb a::before { content: none; }
body .hd-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0px; margin: 0px; list-style: none; padding: 0px; }
body .hd-breadcrumb li { display: inline-flex; align-items: center; gap: 0.8rem; margin: 0px; line-height: 1.5; }
body .hd-breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1px solid var(--hd-accent-line); border-right: 1px solid var(--hd-accent-line); transform: rotate(45deg); margin-left: 0.8rem; flex-shrink: 0; }
body .hd-breadcrumb a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; text-decoration: none; color: var(--hd-text-muted); }
body .hd-breadcrumb a:hover { color: var(--hd-accent-dark); text-decoration: underline; text-underline-offset: 4px; }
body .hd-breadcrumb [aria-current] { padding: 0.35rem 0.65rem; background: rgba(255, 255, 255, 0.65); border-radius: 4px; color: var(--hd-accent-dark); }
@media (max-width: 767px) {
body .storefront-breadcrumb,
body .hd-breadcrumb { display: none; }
}