/* ==========================================================================
   AYEBEE, shop layer.
   Everything the storefront bag, the confirmation page and the shop manager
   need. Kept separate from style.css so the brand stylesheet stays untouched.
   Loads after style.css, so later rules of equal weight win.
   ========================================================================== */

/* Header bag button ------------------------------------------------------- */

.nav-bag [data-bag-count]:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.btn.is-added {
  background: transparent;
  color: var(--ink);
}

/* Bag page ---------------------------------------------------------------- */

.bag-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.bag-media {
  position: relative;
  width: 88px;
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bag-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bag-media .product-ph {
  position: absolute;
  inset: 0;
}

.bag-name {
  font: 800 clamp(17px, 2.2vw, 21px) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
}

.bag-each {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}

.bag-qty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.qty-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: 600 18px/1 var(--font-body);
  cursor: pointer;
}

.qty-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}

.qty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.qty-value {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bag-remove {
  margin-left: 4px;
  background: none;
  border: 0;
  padding: 10px 2px;
  color: var(--muted);
  font: 600 11.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bag-remove:hover {
  color: var(--ink);
}

.bag-line {
  font: 800 18px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}

.bag-summary {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 32px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--card);
  border: 1px solid var(--line);
}

.bag-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.bag-total {
  font: 900 clamp(28px, 5vw, 40px) / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bag-fine {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

#bag-checkout {
  width: 100%;
}

@media (min-width: 640px) {
  #bag-checkout {
    width: auto;
    min-width: 320px;
  }
}

@media (max-width: 560px) {
  .bag-row {
    grid-template-columns: 68px 1fr;
    gap: 14px;
  }
  .bag-media {
    width: 68px;
  }
  .bag-line {
    grid-column: 2;
    font-size: 16px;
  }
}

/* Confirmation ------------------------------------------------------------ */

.confirm-panel {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 720px;
}

.receipt {
  width: 100%;
  margin: 8px 0;
  padding: 22px clamp(18px, 3vw, 28px);
  background: var(--card);
  border: 1px solid var(--line);
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.45;
}

.receipt-row:last-child {
  border-bottom: 0;
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  font: 700 11.5px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.receipt-total {
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  font: 800 17px/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.receipt-when {
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* Shop manager ------------------------------------------------------------ */

.admin-header-cta {
  margin-left: auto;
}

.admin-gate {
  justify-items: stretch;
  text-align: left;
  max-width: 460px;
  margin-top: 8px;
  gap: 14px;
}

.admin-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}

.admin-tabs {
  margin: 0;
}

.admin-list-head {
  margin-top: 46px;
}

.admin-form-card {
  margin-bottom: 28px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 560px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Form controls, shared by the gate and the product form */
#gate-form label,
#product-form label,
.admin-photo-label {
  display: grid;
  gap: 7px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

#gate-form input,
#product-form input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
#product-form textarea,
#product-form select {
  width: 100%;
  max-width: 100%;
  padding: 15px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  /* 16px keeps iOS from zooming the page on focus */
  font: 400 16px/1.45 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}

#gate-form input:focus-visible,
#product-form input:focus-visible,
#product-form textarea:focus-visible,
#product-form select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#product-form {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.admin-photo {
  display: grid;
  gap: 12px;
}

.admin-file {
  cursor: pointer;
}

.admin-photo-url {
  margin-top: 2px;
}

.admin-preview {
  width: min(280px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--card);
}

.admin-check {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.admin-check input {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--ink);
}

.admin-save-row {
  gap: 12px;
}

.admin-card {
  overflow: hidden;
}

.admin-sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.admin-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 14px 0;
  border: 1px solid var(--line);
}

.admin-actions {
  margin-top: 18px;
  gap: 10px;
}

.admin-danger {
  border-color: #7f1d1d;
  color: #fca5a5;
}

.admin-danger:hover {
  background: #7f1d1d;
  border-color: #7f1d1d;
  color: #fff;
}

.admin-footer {
  padding: 32px 0;
  margin-top: 60px;
}

.demo-notice.is-error {
  border-color: #ef4444;
  color: #fecaca;
}

@media (max-width: 600px) {
  #manager .admin-save-row .btn,
  #gate-form .btn {
    width: 100%;
  }
  .admin-actions .btn {
    flex: 1 1 auto;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Nothing in the shop UI may push the page sideways on a phone. */
.bag-row,
.receipt,
.admin-card,
.admin-form-card {
  max-width: 100%;
  min-width: 0;
}

/* Reaching the bag, and comfortable tap targets, on a phone -------------- */

.mobile-bar .mb-bag {
  display: none;
}

@media (max-width: 1200px) {
  /* The header bag lives inside the collapsed menu, so the bottom bar
     carries it once there is something in it. */
  .has-bag .mobile-bar {
    grid-template-columns: 1.1fr 1fr 0.8fr;
  }

  .has-bag .mobile-bar .mb-bag {
    display: flex;
    background: transparent;
    color: var(--ink);
    border-left: 1px solid #262626;
    gap: 7px;
  }

  .mobile-bar .mb-bag [data-bag-count]:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: #ffffff;
    color: #050505;
    font-size: 11px;
  }

  /* 44px minimum on touch sizes, without changing the look on desktop. */
  .btn-sm {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .filter-tabs button {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .bag-remove {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* The bottom bar is fixed, so pages need room beneath their content. */
@media (max-width: 1200px) {
  .site-footer {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* Several component classes set display, which otherwise beats the hidden
   attribute: an empty Bag button, a blank notice box and the "nothing in
   your bag" panel all leaked through before this. */
[hidden] {
  display: none !important;
}