/* =========================================================
   AW Banner Explore (Unified / Clean)
   File: public/aw-components.css
   Prefix: aw-bnr*
========================================================= */

/* Root */
.aw-bnr{
  /* Theme vars (can be overridden inline from twig) */
  --aw-bnr-bg: #004956;
  --aw-bnr-txt: #ffffff;
  --aw-bnr-btn-bg: #F5F3FF;
  --aw-bnr-btn-txt: #6D28D9;

  /* Glass vars (match header feel) */
  --aw-bnr-pill-radius: 18px;
  --aw-bnr-blur: 14px;

  width: 100%;
  color: var(--aw-bnr-txt);
  font-weight: 600;
  font-size: 14px;
  position: relative;
  z-index: 40;

  /* Default look: gradient-ish */
  background: linear-gradient(
    90deg,
    var(--aw-bnr-bg),
    color-mix(in srgb, var(--aw-bnr-bg) 20%, white)
  );
}

/* Inner layout */
.aw-bnr__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  position: relative;
  text-align: center;
}

/* Text */
.aw-bnr__text{
  margin: 0;
  line-height: 1.4;
}

/* Button */
.aw-bnr__btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;
  border-radius: 10px;

  background: var(--aw-bnr-btn-bg);
  color: var(--aw-bnr-btn-txt);
  text-decoration: none;
  white-space: nowrap;

  transition: transform .15s ease, opacity .15s ease;
}
.aw-bnr__btn:hover{ opacity: .92; }
.aw-bnr__btn:active{ transform: scale(.97); }

.aw-bnr__icon{ display:block; }

/* Close button (optional) */
.aw-bnr__close{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 10px;

  width: 28px;
  height: 28px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Mobile stack */
@media (max-width: 640px){
  .aw-bnr__inner{
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .aw-bnr__close{
    top: 10px;
    transform: none;
  }
}

/* =========================================================
   Animations (controlled by data-anim on .aw-bnr)
   Applies to inner (safer)
========================================================= */
.aw-bnr[data-anim="fade"] .aw-bnr__inner{ animation: awBnrFade .45s ease both; }
@keyframes awBnrFade{ from{opacity:0} to{opacity:1} }

.aw-bnr[data-anim="slide-up"] .aw-bnr__inner{ animation: awBnrUp .45s ease both; }
@keyframes awBnrUp{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)} }

.aw-bnr[data-anim="slide-right"] .aw-bnr__inner{ animation: awBnrRight .45s ease both; }
@keyframes awBnrRight{ from{opacity:0; transform: translateX(-12px)} to{opacity:1; transform: translateX(0)} }

.aw-bnr[data-anim="zoom"] .aw-bnr__inner{ animation: awBnrZoom .45s ease both; }
@keyframes awBnrZoom{ from{opacity:0; transform: scale(.98)} to{opacity:1; transform: scale(1)} }

/* =========================================================
   ✅ Mobile Pill + Glass (same as header)
   Enable by: data-pill-mobile="1"
========================================================= */
@media (max-width: 1024px){

  /* remove full-width gradient on mobile pill */
  .aw-bnr[data-pill-mobile="1"]{
    background: transparent !important;

    /* small breathing room like bottom nav */
    padding: 8px 12px 0;
  }

  .aw-bnr[data-pill-mobile="1"] .aw-bnr__inner{
    /* ✅ Make it "pill" like header (NOT full width) */
    width: min(560px, calc(100vw - 24px));
    max-width: none;              /* override 1200px */
    margin: 0 auto;               /* center */
    justify-content: space-between;
    text-align: center;

    /* ✅ Glass background */
    background: color-mix(in srgb, var(--aw-bnr-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(var(--aw-bnr-blur));
    backdrop-filter: blur(var(--aw-bnr-blur));

    border-radius: var(--aw-bnr-pill-radius);
    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
      0 12px 30px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.15);

    /* ✅ padding inside pill (override base padding) */
    padding: 12px 16px;
  }

  /* Better stacking inside pill on small screens */
  @media (max-width: 640px){
    .aw-bnr[data-pill-mobile="1"] .aw-bnr__inner{
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 12px 14px;
    }

    .aw-bnr[data-pill-mobile="1"] .aw-bnr__close{
      top: 10px;
      transform: none;
    }
  }
}

/* =========================================================
   END — AW Banner Explore
========================================================= */

/* ======= AW_BNR_SEPARATOR_END ======= */

/* =========================================================
   AW Quick Order (V2)
   File: public/aw-components.css
   Prefix: aw-qo*
========================================================= */

.aw-qo{
  --aw-qo-bg: #ffffff;
  --aw-qo-text: #111827;
  --aw-qo-btn-bg: #4F46E5;
  --aw-qo-btn-text: #ffffff;

  --aw-qo-blur: 14px;
  --aw-qo-radius: 16px;
  --aw-qo-pill-radius: 18px;

  width: 100%;
  color: var(--aw-qo-text);
  position: relative;
  z-index: 30;

  /* ✅ spacing from block above */
  margin-top: 18px;
}

.aw-qo__card{
  max-width: 420px;
  width: 100%;
  margin: 0 auto;

  background: var(--aw-qo-bg);
  border: 1px solid rgba(17,24,39,.10);
  border-radius: var(--aw-qo-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;
}

.aw-qo__head{
  padding: 14px 16px;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.aw-qo__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.aw-qo__link{
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  opacity: .85;
  white-space: nowrap;
}
.aw-qo__link:hover{ opacity: 1; text-decoration: underline; }

.aw-qo__form{ padding: 14px 16px 16px; }

.aw-qo__productName{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
  opacity: .95;
}

/* Options container */
.aw-qo__options{
  background: rgba(17,24,39,.03);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  padding: 10px 10px 6px;
  margin-bottom: 12px;
}

/* ✅ hide attachments/uploads inside injected options */
.aw-qo__options input[type="file"],
.aw-qo__options salla-file-upload,
.aw-qo__options .s-file-upload,
.aw-qo__options .file-upload,
.aw-qo__options .product__attachments,
.aw-qo__options .attachments,
.aw-qo__options digital-files-settings{
  display:none !important;
}

/* make radios/checkboxes look tidy */
.aw-qo__options label{
  cursor: pointer;
}
.aw-qo__options .form-group,
.aw-qo__options .s-form-group,
.aw-qo__options .option,
.aw-qo__options .product-option{
  margin-bottom: 10px;
}
.aw-qo__options input[type="radio"],
.aw-qo__options input[type="checkbox"]{
  transform: translateY(1px);
}

/* Rows */
.aw-qo__row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 0;
  border-top: 1px dashed rgba(17,24,39,.12);
}

.aw-qo__label{
  font-size: 13px;
  font-weight: 900;
  opacity: .92;
}

/* Qty control */
.aw-qo__qtyWrap{
  display:flex;
  align-items:center;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.aw-qo__qtyBtn{
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.aw-qo__qtyBtn:hover{ opacity: 1; }
.aw-qo__qtyInput{
  width: 64px;
  height: 40px;
  border: 0;
  text-align: center;
  font-weight: 900;
  outline: none;
}

/* Total + Price */
.aw-qo__total{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
}

.aw-qo__priceLine{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(17,24,39,.06);
  margin-top: 6px;
}
.aw-qo__priceLabel{
  font-size: 13px;
  font-weight: 900;
  opacity: .92;
}
.aw-qo__priceValue{
  font-size: 14px;
  font-weight: 900;
}

/* CTA */
.aw-qo__cta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-direction: column;
}

.aw-qo__btn{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;

  background: var(--aw-qo-btn-bg);
  color: var(--aw-qo-btn-text);

  font-weight: 900;
  font-size: 14px;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.aw-qo__btn:hover{ filter: brightness(.98); }
.aw-qo__btn:active{ transform: scale(.98); }

.aw-qo__miniCheckout{ width: 100%; }
.aw-qo[data-open="mini"] .aw-qo__miniCheckout{ display:block; }
.aw-qo[data-open="cart"] .aw-qo__miniCheckout,
.aw-qo[data-open="stay"] .aw-qo__miniCheckout{ display:none; }

/* Skeleton */
.aw-qo__skeleton{
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  font-weight: 800;
  opacity: .7;
}

/* Mobile Pill + Glass */
@media (max-width: 1024px){
  .aw-qo[data-pill-mobile="1"]{
    padding: 10px 12px;
  }

  .aw-qo[data-pill-mobile="1"] .aw-qo__card{
    border-radius: var(--aw-qo-pill-radius);
  }

  .aw-qo[data-pill-mobile="1"][data-glass="1"] .aw-qo__card{
    background: color-mix(in srgb, var(--aw-qo-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(var(--aw-qo-blur));
    backdrop-filter: blur(var(--aw-qo-blur));

    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
      0 12px 30px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
}

/* =========================================================
   END — AW Quick Order (V2)
========================================================= */

/* =========================================================
   AW FAQ
   File: public/aw-components.css
   Prefix: aw-faq*
========================================================= */

.aw-faq{
  width: 100%;
  padding: 24px 0;

  /* Color vars (from twig inline style) */
  --aw-faq-eyebrow: #4F46E5;
  --aw-faq-heading: #111827;
  --aw-faq-subtext: #64748B;
  --aw-faq-q: #111827;
  --aw-faq-a: #64748B;
  --aw-faq-divider: rgba(148,163,184,.45);
  --aw-faq-icon: #1D293D;
}

.aw-faq__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aw-faq__media{ width: 100%; }
.aw-faq__img{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}

.aw-faq__content{
  width: 100%;
}

.aw-faq__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--aw-faq-eyebrow);
}

.aw-faq__title{
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 850;
  line-height: 1.2;
  color: var(--aw-faq-heading);
}

.aw-faq__sub{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--aw-faq-subtext);
  max-width: 560px;
}

.aw-faq__list{
  border-top: 1px solid var(--aw-faq-divider);
}

.aw-faq__item{
  border-bottom: 1px solid var(--aw-faq-divider);
}

.aw-faq__q{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
}

.aw-faq__qtext{
  font-size: 14px;
  font-weight: 750;
  color: var(--aw-faq-q);
}

.aw-faq__chev{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s ease;
  color: var(--aw-faq-icon);
}

.aw-faq__a{
  overflow: hidden;
  padding: 0 0 14px;
}

.aw-faq__atext{
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--aw-faq-a);
  max-width: 560px;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}

.aw-faq__item.is-open .aw-faq__chev{
  transform: rotate(180deg);
}

.aw-faq__item.is-open .aw-faq__atext{
  transform: translateY(0);
  opacity: 1;
}

/* Desktop layout like the screenshot */
@media (min-width: 768px){
  .aw-faq__wrap{
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
  }
  .aw-faq__media{
    flex: 0 0 360px;
  }
  .aw-faq__img{
    max-width: 360px;
  }
  .aw-faq__content{
    flex: 1 1 auto;
  }
}

/* =========================================================
   END — AW FAQ
========================================================= */