/* pooq-newsletter 1.0.7: footer form, slide-in card, cart coupon toggle. Brand: brown #876333, accent #9A5A32, cream #F3EFEA. */
.pooq-nl-form { margin: 0; }
.pooq-nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pooq-nl-title { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.pooq-nl-lead { margin: 0 0 12px; font-size: 14px; }
.pooq-nl-row { display: flex; gap: 8px; }
.pooq-nl-row input[type="email"] { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid rgba(0,0,0,.15); border-radius: 22px; font-size: 15px; background: #fff; color: #2B1D14; }
.pooq-nl-row input[type="email"]:focus { outline: 2px solid #9A5A32; outline-offset: 1px; }
.pooq-nl-submit { height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: #9A5A32; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.pooq-nl-submit:hover { background: #874C28; }
.pooq-nl-submit[disabled] { opacity: .6; cursor: default; }
/* Alignment fix, shared by the footer card and the slide-in: the theme's global button styles set a
   line-height that pushes the label down inside our fixed-height pill button. !important only on the
   properties the theme actually wins on (line-height, padding); the rest wins on selector specificity alone. */
.pooq-nl-form .pooq-nl-submit { display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; padding: 0 22px !important; height: 44px; white-space: nowrap; }
.pooq-nl-consent { margin: 10px 0 0; font-size: 12px; line-height: 1.45; opacity: .85; }
.pooq-nl-consent a { text-decoration: underline; }
.pooq-nl-msg { margin: 8px 0 0; font-size: 14px; min-height: 1em; }
.pooq-nl-msg.is-error { color: #b3261e; }
.pooq-nl-msg.is-ok { color: #2e7d32; }

/* footer card: a cream card sitting on the footer's brown footer-bottom colour scheme */
.pooq-nl-form--footer { background: #F3EFEA; color: #2B1D14; max-width: 560px; border-radius: 14px; padding: 20px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.pooq-nl-form--footer .pooq-nl-title { font-size: 20px; }
.pooq-nl-form--footer .pooq-nl-title::before { content: "✉ "; }
.pooq-nl-form--footer .pooq-nl-lead { font-size: 15px; }
.pooq-nl-form--footer .pooq-nl-row input[type="email"] { background: #fff; border: 1px solid rgba(43,29,20,.2); }
.pooq-nl-form--footer .pooq-nl-consent { font-size: 12px; color: rgba(43,29,20,.7); }
/* The footer's colour scheme colours links light (rgb(243,239,234) on this #F3EFEA card), making the
   consent link invisible. Force the brand brown, and pin the surrounding text colour too so a future
   scheme change on the footer row cannot take it down with it. */
.pooq-nl-form--footer .pooq-nl-consent a { color: #874C28 !important; text-decoration: underline !important; }
.pooq-nl-form--footer, .pooq-nl-form--footer .pooq-nl-title, .pooq-nl-form--footer .pooq-nl-lead { color: #2B1D14 !important; }

/* footer card, desktop: the band (.pooq-nl-footer-row) is much wider than the 560px card, leaving
   most of it empty brown. From 900px up, let the card span the container as two columns: title+lead
   on the left, the input row + consent + message on the right. The honeypot (.pooq-nl-hp) stays
   absolutely positioned off-screen above and is unaffected by the grid. */
@media (min-width: 900px) {
  .pooq-nl-form--footer {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto;
    column-gap: 40px;
    align-items: center;
    padding: 28px 36px;
  }
  .pooq-nl-form--footer .pooq-nl-title { grid-column: 1; grid-row: 1; margin: 0; align-self: end; font-size: 22px; }
  .pooq-nl-form--footer .pooq-nl-lead { grid-column: 1; grid-row: 2; margin: 4px 0 0; align-self: start; font-size: 15px; }
  .pooq-nl-form--footer .pooq-nl-row { grid-column: 2; grid-row: 1; }
  .pooq-nl-form--footer .pooq-nl-consent { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .pooq-nl-form--footer .pooq-nl-msg { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1400px) {
  .pooq-nl-form--footer { column-gap: 56px; padding: 32px 44px; }
  .pooq-nl-form--footer .pooq-nl-row input[type="email"] { min-width: 320px; }
}

/* slide-in card */
.pooq-nl-slidein { position: fixed; z-index: 9000; left: 0; right: 0; bottom: 0; max-height: 30vh; overflow: auto; background: #F3EFEA; color: #2B1D14; padding: 16px 48px 16px 16px; box-shadow: 0 -6px 24px rgba(0,0,0,.18); border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .3s ease; }
.pooq-nl-slidein.is-open { transform: translateY(0); }
.pooq-nl-slidein[hidden] { display: none; }
.pooq-nl-slidein .pooq-nl-title { font-size: 15px; }
.pooq-nl-slidein .pooq-nl-lead { font-size: 13px; margin-bottom: 8px; }
.pooq-nl-slidein .pooq-nl-consent { font-size: 11px; }
.pooq-nl-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 26px; line-height: 44px; color: #2B1D14; cursor: pointer; }
@media (min-width: 768px) {
  .pooq-nl-slidein { left: auto; right: 24px; bottom: 24px; width: 360px; max-height: none; border-radius: 16px; transform: translateY(24px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
  .pooq-nl-slidein.is-open { transform: none; opacity: 1; }
}

/* cart: hide WooCommerce's coupon field until the toggle is pressed.
   !important: the theme's own .woocommerce .actions .coupon rule (higher specificity, loaded after
   this file) would otherwise always win and keep the field visible. */
.woocommerce-cart-form .coupon { display: none !important; }
.woocommerce-cart-form .coupon.is-open { display: flex !important; gap: 8px; flex-wrap: wrap; align-items: center; }
.pooq-nl-coupon-toggle { background: none; border: 0; padding: 0; color: #876333; text-decoration: underline; cursor: pointer; font-size: 14px; }
.pooq-nl-coupon-toggle[aria-expanded="true"] { display: none; }

/* footer: on quiet pages (cart, checkout, account, endpoint pages) the [pooq_newsletter_form]
   shortcode returns '' but WPBakery still renders the row's colour scheme, height and padding
   around the now-empty column, leaving a bare coloured strip. Hide the whole row instead.
   !important: the theme prints this row's own css (colour scheme, height, padding) late, with
   !important, so a plain rule here would lose to it. */
body.pooq-nl-quiet .pooq-nl-footer-row { display: none !important; }
/* the row itself: the inserted vc_row carries 32px top / 8px bottom; balance it (theme row CSS uses !important) */
.l-section.pooq-nl-footer-row.pooq-nl-footer-row { padding-top: 28px !important; padding-bottom: 28px !important; }
@media (min-width: 900px) { .l-section.pooq-nl-footer-row.pooq-nl-footer-row { padding-top: 44px !important; padding-bottom: 44px !important; } }