/* Beata Amber static shop — renders products.json into the existing
   WooCommerce/Astra markup classes already styled by the site's own CSS.
   The Contacts page this is spliced into uses Elementor's full-width
   template, so .ast-container never gets the theme's boxed max-width —
   .beata-shop-wrap re-establishes that boxed + sidebar layout explicitly,
   matching the real /shop/ page instead of inheriting the donor page's. */
.beata-shop-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.beata-shop-sidebar {
  flex: 0 0 240px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding-right: 32px;
}

.beata-shop-main {
  flex: 1;
  min-width: 0;
}

.beata-sidebar-heading {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 0 0 14px;
}

.beata-cat-tree,
.beata-cat-subtree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.beata-cat-subtree {
  margin: 2px 0 14px;
}

.beata-cat-tree li {
  margin: 0;
}

.beata-cat-link {
  display: block;
  padding: 6px 0;
  color: #c8823a;
  text-decoration: none;
  font-size: 15px;
}

.beata-cat-subtree .beata-cat-link {
  padding-left: 16px;
  color: #e8e8e8;
  font-size: 14px;
}

.beata-cat-link:hover {
  text-decoration: underline;
}

.beata-cat-link--active {
  font-weight: 700;
  text-decoration: underline;
}

.beata-cat-count {
  opacity: 0.6;
  font-size: 0.9em;
}

.beata-breadcrumb {
  color: #a0a0a0;
  font-size: 13px;
  margin-bottom: 10px;
}

.beata-breadcrumb a {
  color: #a0a0a0;
}

.beata-shop-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.4em;
}

.beata-shop-count {
  color: #a0a0a0;
  font-size: 14px;
  margin: 0 0 24px;
}

.beata-shop-empty {
  padding: 40px 0;
  text-align: center;
  opacity: 0.7;
}

.beata-shop-loadmore-wrap {
  text-align: center;
  margin-top: 8px;
}

.beata-shop-loadmore {
  background: #c8823a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 32px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.beata-shop-loadmore:hover {
  background: #b06f2c;
}

@media (max-width: 860px) {
  .beata-shop-wrap {
    flex-direction: column;
    gap: 24px;
  }
  .beata-shop-sidebar {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-right: 0;
    padding-bottom: 20px;
  }
  .beata-cat-tree {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
  .beata-cat-subtree {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-bottom: 10px;
  }
}

/* Shared "pill" button used by the Gallery page's sub-nav; kept here too
   since a couple of legacy nav links may still resolve to shop.php. */
.beata-pill {
  border: 1px solid var(--ast-global-color-6, #d1dae5);
  background: var(--ast-global-color-5, #fff);
  color: var(--ast-global-color-3, #364151);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.beata-pill:hover {
  border-color: var(--ast-global-color-0, #0067ff);
}

.beata-pill--active {
  background: var(--ast-global-color-0, #0067ff);
  border-color: var(--ast-global-color-0, #0067ff);
  color: #fff;
}

/* Product grid: the scraped donor page carries no WooCommerce archive grid
   CSS, so the columns layout is defined here instead. 3 columns matches
   the real /shop/ page's sidebar+grid proportions. */
ul.products.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 2em;
}

@media (max-width: 980px) {
  ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  ul.products.columns-3 {
    grid-template-columns: 1fr;
  }
}

ul.products.columns-3 li.product {
  margin-bottom: 0 !important;
}

.astra-shop-thumbnail-wrap {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 3 / 4;
}

.astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  margin: 0 !important;
}

/* The original site shows the product title, sku and price in plain white
   (WooCommerce's default green price and the title link's amber color both
   get overridden site-wide), and has no stock badge on the grid card at
   all -- only price then the CTA button, each on its own line. */
ul.products .beata-product .woocommerce-loop-product__title,
ul.products .beata-product .price,
ul.products .beata-product .price .woocommerce-Price-amount,
ul.products .beata-product .price bdi {
  color: #fff !important;
}

ul.products .beata-product .price {
  display: block;
}

/* The theme's default .button styling (near-black text on a near-black
   background) is unreadable both on the dark page and in the white modal,
   so the enquire CTA gets its own explicit, high-contrast styling. display:
   block guarantees it starts on its own line after the price above it,
   regardless of the price element's own inline/block behavior. */
.beata-enquire-btn,
.beata-enquire-btn:visited {
  display: block;
  width: fit-content;
  margin-top: 10px;
  background: #c8823a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 14px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.beata-enquire-btn:hover {
  background: #b06f2c !important;
}

ul.products .beata-product .astra-shop-thumbnail-wrap img {
  cursor: pointer;
}

/* ---- shared modal chrome (used by the order/inquiry form) ---- */

.beata-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 6, 20, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* The theme's sticky-header plugin (mystickymenu) toggles its own fixed
     clone with a JS-assigned inline z-index at unpredictable times, so the
     modal needs the highest possible value to always paint above it. */
  z-index: 2147483647;
}

.beata-modal-overlay[hidden] {
  display: none;
}

body.beata-modal-open {
  overflow: hidden;
}

/* Wraps the dialog box and its close button together so the button can be
   positioned outside the box (see .beata-modal-close-btn below) instead of
   floating on top of the dialog's own content, where its color always
   clashed with whatever was directly underneath it (white card, product
   photo, etc). The frame has no size of its own -- it just hugs whatever
   dialog it wraps, which keeps its own width/max-width rules. */
.beata-modal-frame {
  position: relative;
  max-width: 960px;
  width: 100%;
}

.beata-order-frame {
  max-width: 560px;
}

.beata-modal {
  background: #fff;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 6px;
  position: relative;
  padding: 32px;
}

/* Sits just outside the dialog's top-right corner, on the dark overlay
   backdrop -- never over the dialog's own (variable) background, so one
   solid, high-contrast style works for every modal without ever clashing.
   Fully sized as a real box (not a bare oversized glyph), so the visible
   circle *is* the entire clickable area, with no dead zone or overflow. */
.beata-modal-close-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  z-index: 1;
}

.beata-modal-close-btn:hover {
  background: #c8823a;
}

@media (max-width: 600px) {
  .beata-modal {
    padding: 20px;
  }
  .beata-modal-close-btn {
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

/* ---- order / inquiry form ---- */

.beata-order-dialog {
  color: #222;
}

.beata-order-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 600;
  color: #222;
}

.beata-order-product {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #f7f4f0;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 20px;
}

.beata-order-product img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}

.beata-order-product > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #444;
}

.beata-order-product-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.beata-order-product strong {
  font-size: 15px;
  color: #222;
}

.beata-order-product-price {
  color: #c8823a;
  font-weight: 600;
}

.beata-order-field {
  margin-bottom: 14px;
}

.beata-order-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.beata-required {
  color: #c0392b;
  margin-left: 2px;
}

.beata-order-field input,
.beata-order-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d5d0c8;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: #222;
  background: #fff;
  /* 16px+ input font-size prevents iOS Safari from auto-zooming on focus */
}

.beata-order-field input:focus,
.beata-order-field textarea:focus {
  outline: 2px solid #c8823a;
  outline-offset: 1px;
}

.beata-order-field textarea {
  resize: vertical;
}

/* Spam decoy: kept in the tab/layout flow (not display:none) since some
   bots skip fields that are invisible that way, but pushed off-screen so
   no real visitor ever sees or reaches it. */
.beata-order-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.beata-order-error {
  background: #fdecea;
  color: #a12a1f;
  border: 1px solid #f3b4ac;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 14px;
}

.beata-order-submit {
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 6px;
  padding: 13px 18px;
  font-size: 16px;
  background: #c8823a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.beata-order-submit:hover {
  background: #b06f2c !important;
}

.beata-order-success {
  text-align: center;
  padding: 20px 0;
}

.beata-order-success h2 {
  color: #222;
  margin: 0 0 10px;
}

.beata-order-success p {
  color: #444;
  margin: 0 0 24px;
}

.beata-order-success .button {
  background: #c8823a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 10px 24px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

@media (max-width: 600px) {
  .beata-order-dialog {
    padding: 20px;
  }
  .beata-order-product {
    flex-wrap: wrap;
  }
}