/* ============================================================
   Additive styles — footer widgets and the gallery lightbox.

   assets/css/main.css is a byte-for-byte copy of the prototype and must not
   change, so anything the prototype had no styling for lives here instead.
   Nothing in this file affects a default install: the six widget areas ship
   empty, and the lightbox only exists once a visitor opens it.
   ============================================================ */

/* Footer column titles (Shop / Information / Contact) sit tight against the
   first item because main.css's display-font h4 rule zeroes the margin — give
   them breathing room below the heading. */
footer .foot-main > div > h4 {
  margin-bottom: 22px;
}

footer .foot-main .widget {
  margin: 0 0 26px;
}

footer .foot-main .widget:last-child {
  margin-bottom: 0;
}

/* Widget titles adopt the designed <h4> look. */
footer .foot-main .widget h1,
footer .foot-main .widget h2,
footer .foot-main .widget h3,
footer .foot-main .widget h4,
footer .foot-main .wp-block-heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .01em;
  margin: 0 0 18px;
  color: inherit;
}

/* Lists — nav, categories, pages, archives — match .foot-links. */
footer .foot-main ul,
footer .foot-main ol,
footer .foot-main .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

footer .foot-main li {
  margin: 0;
  font-size: .87rem;
}

footer .foot-main a {
  color: inherit;
  opacity: .78;
  transition: opacity .2s ease, color .2s ease;
}

footer .foot-main a:hover {
  opacity: 1;
  color: var(--sage);
}

footer .foot-main p {
  font-size: .87rem;
  line-height: 1.75;
  opacity: .78;
}

/* Images and logos keep the footer rhythm. */
footer .foot-main img,
footer .foot-main .wp-block-image img {
  border-radius: 8px;
}

/* Search and subscribe inputs inherit the site's field styling. */
footer .foot-main input[type="search"],
footer .foot-main input[type="email"],
footer .foot-main input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: .87rem;
}

footer .foot-main input::placeholder {
  color: inherit;
  opacity: .5;
}

footer .foot-main button,
footer .foot-main input[type="submit"] {
  margin-top: 10px;
  padding: 11px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--olive);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}

/* Social icon blocks sit inline. */
footer .foot-main .wp-block-social-links {
  display: flex;
  gap: 12px;
  flex-direction: row;
}

/* The two copyright cells keep .foot-bottom's typography. */
footer .foot-bottom .widget,
footer .foot-bottom p {
  margin: 0;
  font-size: inherit;
}

footer .foot-bottom ul {
  list-style: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Gallery lightbox — built at runtime by initLightbox() in main.js.
   Colours are pulled from the prototype's :root palette so the overlay
   belongs to the same design system.
   ============================================================ */

.axos-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
  background: rgba(38, 48, 36, .93);
  backdrop-filter: blur(6px);
}

.axos-lightbox.open {
  display: flex;
}

.axos-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  object-fit: contain;
}

.axos-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #f7f4ec;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.axos-lightbox button:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4);
}

.axos-lb-close {
  top: 24px;
  right: 24px;
  font-size: 1.6rem;
}

.axos-lb-prev { left: 24px; }
.axos-lb-next { right: 24px; }

@media (max-width: 640px) {
  .axos-lightbox { padding: 4vh 4vw; }
  .axos-lightbox button { width: 44px; height: 44px; font-size: 1.5rem; }
  .axos-lb-prev { left: 10px; }
  .axos-lb-next { right: 10px; }
  .axos-lb-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .axos-lightbox button { transition: none; }
}

/* ============================================================
   Shop dropdown — a compact card of the main product categories under the
   Shop nav item. Categories that have children get a nested fly-out submenu.
   Built by axos_shop_mega_menu(); anchored to the Shop <li>.
   ============================================================ */

.nav-has-mega { position: relative; }

.nav-drop {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 10px;
  min-width: 236px;
  list-style: none;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-small);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}

.nav-has-mega:hover .nav-drop,
.nav-has-mega:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop li { position: relative; margin: 0; }

.nav-drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.nav-drop a:hover,
.nav-drop a:focus-visible {
  background: rgba(95, 107, 59, .09);
  color: var(--olive);
}

/* Kill the top-level nav's animated underline inside the dropdown. */
.nav-drop a:after { display: none; }

.nav-drop-caret {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--faint);
}

/* Nested submenu — flies out to the right of its parent row. */
.nav-drop-sub {
  position: absolute;
  left: 100%;
  top: -9px;
  margin-left: 6px;
  min-width: 214px;
  max-height: 66vh;
  overflow-y: auto;
  list-style: none;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-small);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-drop li.has-sub:hover > .nav-drop-sub,
.nav-drop li.has-sub:focus-within > .nav-drop-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop-sub a {
  font-weight: 500;
  color: var(--faint);
}

.nav-drop-sub a:hover,
.nav-drop-sub a:focus-visible { color: var(--olive); }

@media (max-width: 900px) {
  .nav-drop { display: none; }
}

/* ============================================================
   Header wishlist + cart buttons — kept on the same optical baseline so
   the two glyphs balance. The cart button in main.css renders its SVG
   inline (baseline-aligned); we make both flex-centred with matching box
   metrics so the heart and the bag line up at the same height.
   ============================================================ */

.nav-actions .wishlist-btn,
.nav-actions .cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}

.nav-actions .wishlist-btn svg,
.nav-actions .cart-btn svg { width: 20px; height: 20px; }

.wishlist-btn svg { fill: none; stroke: currentColor; }

.wishlist-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #a8603f;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  display: none;
}

.wishlist-count.has-items { display: block; }

/* Cart badge — recoloured to the deep-olive brand green. */
.nav-actions .cart-count {
  top: -4px;
  right: -6px;
  background: #374023;
}

/* ============================================================
   Product-page stock status + out-of-stock buy button.

   main.css only styles the green "In stock" pill; the out-of-stock variant
   recolours the dot and label to a muted clay, and the disabled buy button
   drops its hover lift and greys out so it clearly can't be used.
   ============================================================ */

.pd-stock.out-of-stock { color: #a8603f; }
.pd-stock.out-of-stock:before { background: #a8603f; }

.btn-primary.pd-add-oos,
.btn-primary.pd-add-oos:hover {
  background: #d7d4ca;
  color: #6f7268;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Product-page "Save to wishlist" button — saved state.

   The prototype fills the whole square clay when active; the owner wants
   only the heart to change colour and the button chrome to stay exactly as
   it looks before saving, so we neutralise main.css's .wish-btn.on fill and
   colour just the glyph.
   ============================================================ */

.wish-btn.on {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.wish-btn.on svg { fill: #a8603f; stroke: #a8603f; }

/* ============================================================
   Wishlist page — filled at runtime by the [axos_wishlist] shortcode.
   ============================================================ */

.axos-wishlist-empty {
  grid-column: 1 / -1;
  padding: 70px 24px;
  text-align: center;
  background: var(--paper);
  color: var(--faint);
}

#wishlistGrid .product { position: relative; }

.wish-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-small);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.wish-remove:hover {
  background: var(--olive);
  color: #fff;
}

/* ============================================================
   WooCommerce cart & checkout buttons — recoloured to the site's
   primary-button palette (olive), overriding WooCommerce's default
   near-black. Covers both the classic and the block-based cart/checkout.
   ============================================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-cart .wc-block-components-button.contained,
.wc-block-checkout .wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button {
  background-color: var(--olive-dark) !important;
  color: #fff !important;
  border-radius: 2px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-cart .wc-block-components-button.contained:hover,
.wc-block-checkout .wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--olive) !important;
}

/* The block button wraps its label in a span, so keep it white too. */
.wc-block-components-button.contained .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  color: #fff !important;
}

/* ============================================================
   Long-form information pages — Payment Methods, Shipping, Returns,
   Privacy Policy, Terms & Conditions.

   These are ordinary block pages rendered through page.php's fallback
   branch. main.css sizes h2 for landing-page section titles —
   clamp(2.45rem, 4vw, 4.8rem), up to 77px — and zeroes every heading
   margin, because in the designed sections spacing comes from the section
   wrapper. In a document with a heading every other paragraph that reads
   as a wall of oversized type with no air around it.

   So inside .page-prose the display face and letterspacing stay, but the
   scale drops to document sizes and each heading gets the space above it
   that marks a new section. Child selectors keep this off anything a
   shortcode renders inside the same wrapper — the Wishlist page puts a
   whole product grid here, and those cards keep their own type.
   ============================================================ */

.page-prose > h2,
.page-prose > h3,
.page-prose > h4 {
  line-height: 1.22;
  letter-spacing: -.015em;
}

.page-prose > h2 {
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  margin: 2.9rem 0 .85rem;
}

.page-prose > h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  margin: 2.2rem 0 .7rem;
}

.page-prose > h4 {
  font-size: 1.1rem;
  margin: 1.8rem 0 .6rem;
}

/* The intro paragraph already sits below the page hero — no gap on top. */
.page-prose > *:first-child { margin-top: 0; }

/* A heading immediately after a heading is a group, not a new section. */
.page-prose > h2 + h3,
.page-prose > h3 + h4 { margin-top: 1.1rem; }

/* Core list blocks: pull the bullets in from the browser's 40px indent and
   let the items breathe, since most of them run to a full line or more. */
.page-prose > ul,
.page-prose > ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}

.page-prose > ul li,
.page-prose > ol li { margin-bottom: .45em; }

.page-prose > ul li:last-child,
.page-prose > ol li:last-child { margin-bottom: 0; }

/* ============================================================
   Header language switcher — WPML.

   Sits first in .nav-actions, before the wishlist heart. The trigger is
   typographic rather than another glyph (the row already carries a heart
   and a bag), using the same uppercase, wide-tracked treatment as the
   topbar and the logo sub-line. The card reuses the .nav-drop card look
   and, like it, opens on :hover and :focus-within so no JavaScript is
   involved — tabbing to the button reveals the links, then Tab walks them.
   Rendered by axos_language_switcher(); absent unless WPML is active with
   two or more languages.
   ============================================================ */

.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.lang-switch:hover .lang-current,
.lang-switch:focus-within .lang-current { color: var(--olive); }

/* Clicking the trigger is what opens the card on touch, so the focus ring
   would otherwise flash on every tap — keep it for keyboard users only. */
.lang-current:focus { outline: none; }

.lang-current:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 3px;
}

.lang-caret {
  font-size: .78rem;
  line-height: 1;
  color: var(--faint);
  transition: transform .18s ease, color .18s ease;
}

.lang-switch:hover .lang-caret,
.lang-switch:focus-within .lang-caret {
  color: var(--olive);
  transform: rotate(180deg);
}

.lang-drop {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 12px;
  min-width: 172px;
  list-style: none;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-small);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}

.lang-switch:hover .lang-drop,
.lang-switch:focus-within .lang-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-drop li { margin: 0; }

.lang-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.lang-drop a:hover,
.lang-drop a:focus-visible {
  background: rgba(95, 107, 59, .09);
  color: var(--olive);
}

/* The nav's animated underline is a top-level-only effect. */
.lang-drop a:after { display: none; }

.lang-drop a.is-active {
  color: var(--olive);
  font-weight: 700;
}

.lang-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(38, 48, 36, .1);
}

/* Below 900px .nav-actions also carries the burger, so the row holds four
   controls in a two-column grid. Without this the extra element steals
   enough width from the auto logo column to wrap "SHOP · CRETE" onto a
   second line: the caret goes, the button loses its side padding, and the
   16px icon spacing tightens to 12px — together that returns ~27px to the
   logo, which is more than it needs. */
@media (max-width: 900px) {
  .nav-actions { gap: 12px; }
  .lang-current { padding: 6px 0; letter-spacing: .08em; }
  .lang-caret { display: none; }
  .lang-drop { margin-top: 8px; }
}

/* ------------------------------------------------------------------
   Contact Form 7 inside the contact-main block.

   The block renders the shortcode into <div class="contact-form">, so the
   descendant rules in main.css (.contact-form h2, .form-grid, .field,
   .form-note) still apply to the markup pasted into the CF7 form tab. What
   they do not expect is CF7's own scaffolding: each control is wrapped in an
   inline <span class="wpcf7-form-control-wrap">, which as a flex item in the
   column .field collapses to the input's intrinsic width. Everything below
   is that bridge plus a restyle of CF7's default blue-bordered messages.
   ------------------------------------------------------------------ */

.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7 stamps its own classes on the controls; keep main.css's underline look. */
.contact-form .wpcf7-form-control {
  font: inherit;
  color: inherit;
}

.contact-form .wpcf7-not-valid {
  border-bottom-color: #b3261e;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: .7rem;
  color: #b3261e;
}

/* The response line sits under the button, styled like .form-note rather
   than CF7's default 2px box. */
.contact-form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 15px;
  border: 0;
  border-left: 2px solid var(--olive);
  background: rgba(38, 48, 36, .05);
  font-size: .78rem;
  color: var(--ink-soft);
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output {
  border-left-color: #b3261e;
}

.contact-form form.sent .wpcf7-response-output {
  border-left-color: var(--olive);
}

/* The spinner is display:none until CF7 shows it; keep it on the button row. */
.contact-form .wpcf7-spinner {
  margin: 0 0 0 14px;
  vertical-align: middle;
}

/* CF7 prints an empty paragraph around its hidden fields; it must not open a
   gap above the heading. .screen-reader-response is deliberately left alone —
   CF7 clips it off-screen itself and it carries the aria-live announcements. */
.contact-form .wpcf7 > form > p:first-child:empty {
  display: none;
}

/* ------------------------------------------------------------------
   Shop toolbar sort dropdown.

   .sort-select shares its padding with .toolbar-right input in main.css,
   where 0 12px is right for a text field, and the caret sits too close to
   the border. padding-right alone cannot fix it: browsers paint a <select>'s
   native arrow against the border box and only move the option text, so the
   arrow does not budge. The control has to drop the native arrow entirely
   and draw its own, which also makes the position identical across browsers
   instead of OS-dependent.

   The chevron matches the ▾ used by .lang-caret in the header. It is a
   background-image longhand, so the `background: var(--paper)` shorthand in
   main.css still supplies the fill colour.
   ------------------------------------------------------------------ */

.sort-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23263024' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

/* Legacy Edge kept its own arrow next to the custom one. */
.sort-select::-ms-expand {
  display: none;
}