/* Shopping bag page, header mini bag, and the PDP sample-add status
   region. Studied 15_rug_history.css / 16_rug_detail.css / 12_account_shell.css
   / 04_components.css for conventions and stayed consistent with them —
   native nesting, --space-*, --color-*, --radius-*, --shadow-* tokens only,
   the gray-4/gray-8 hairline-border recipe, and the #fdf3f3 / #a30000
   error-tint pair already established by .account-error-summary. */

/* -- Status message (shared by the bag page and the PDP) --
   Sits inline right where the visitor is already looking — under the bag
   title, under the sample CTA — instead of floating somewhere they have to
   go find it. Fades in on arrival; success/notice fade back out on a timer,
   errors hold until acted on. No JS: Turbo swaps the text and the animation
   restarts on insertion for free. */

@keyframes bag-status-lifecycle {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  8% {
    opacity: 1;
    transform: none;
  }

  88% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes bag-status-arrive {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bag-status-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-3);
  line-height: var(--line-height-body);
  color: var(--color-black);
  opacity: 0;
  animation: bag-status-lifecycle 5s var(--motion-ease-standard) both;

  &::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background-color: currentcolor;
  }

  &.is-success {
    color: var(--color-primary);
  }

  &.is-notice {
    color: var(--color-secondary);
  }

  &.is-error {
    color: var(--color-red);
    animation: bag-status-arrive var(--motion-duration-standard) var(--motion-ease-standard) both;
  }

  /* The dot carries the status color; the message reads in ink. */
  & span {
    color: var(--color-black);
  }
}

.pdp-bag-status {
  max-width: 26rem;
}

/* The PDP sample CTA's own gating message (DON down, over sample limit,
   forbidden, etc.) — rendered inside the dark expandable-btn-primary pill,
   so it needs light text rather than .bag-status-message's default. Not a
   transient status: it persists as long as the CTA is blocked. */
.sample-blocked-message {
  margin: 0;
  padding: var(--space-2) 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--font-size-3);
  line-height: var(--line-height-body-loose);
}

/* -- Bag page shell -- */

.bag-page {

  .section-inner {
    max-width: 68rem;
  }

  .bag-title {
    margin-bottom: var(--space-6);
  }

  .bag-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    align-items: start;
    gap: clamp(var(--space-6), 5vw, var(--space-8));
  }
}

/* -- Empty state -- */

.bag-empty {
  max-width: 32rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-8);

  h2 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-5);
    font-weight: 700;
  }

  p {
    margin: 0 0 var(--space-5);
    color: var(--color-gray-20);
  }
}

/* -- Line-item groups -- */

.bag-group+.bag-group {
  margin-top: var(--space-6);
}

.bag-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--color-gray-20);

  span {
    color: var(--color-gray-16);
    font-weight: 400;
  }
}

.bag-group-list {
  border-top: 1px solid var(--color-gray-4);
}

/* -- Line item (full, editable) -- */

.bag-line {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-gray-4);
  transition: background-color var(--transition-fast), opacity var(--transition-fast);

  &.is-unavailable {
    opacity: 0.6;
  }

  &:not(.is-compact):hover {
    background-color: var(--color-gray-1);
  }
}

.bag-line-image {
  width: 6rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-gray-4);
  transition: box-shadow var(--transition-fast);

  a {
    display: block;
    width: 100%;
    height: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.bag-line:not(.is-compact) .bag-line-image:hover {
  box-shadow: 0 8px 16px -10px rgba(25, 24, 23, .4);
}

.bag-line-image-empty {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-2);
}

.bag-line-info {
  min-width: 0;

  p {
    margin: 0;
  }
}

.bag-line-brand {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-2);
  color: var(--color-gray-20);
}

.bag-line-product {
  font-size: var(--font-size-4);
  font-weight: 700;

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-text-primary-hover);
    }
  }
}

.bag-line-sku {
  margin-top: var(--space-1);
  font-size: var(--font-size-3);
  color: var(--color-gray-20);
}

.bag-line-flag {
  margin-top: var(--space-2);
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--color-red);
}

.bag-line-qty {

  .qty-control {
    margin: 0;
    justify-content: flex-start;
    gap: var(--space-2);

    button {
      width: 1.75rem;
      height: 1.75rem;
      border: 1px solid var(--color-gray-8);
      border-radius: var(--radius-round);
      color: var(--color-black);
      transition: border-color var(--transition-fast);

      &:hover:not(:disabled) {
        border-color: var(--color-black);
      }
    }

    input[type="number"] {
      color: var(--color-black);
    }
  }
}

.bag-line-qty-label {
  font-size: var(--font-size-2);
  color: var(--color-gray-20);
  white-space: nowrap;
}

.bag-line-price {
  font-size: var(--font-size-4);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.bag-line-remove-form {
  margin: 0;
}

.bag-line-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-round);
  background: none;
  color: var(--color-gray-16);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);

  svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.5px;
    fill: none;
  }

  &:hover {
    background-color: var(--color-gray-2);
    color: var(--color-red);
  }

  &:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

/* -- Line item (compact, header mini bag) -- */

.bag-line.is-compact {
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding-block: var(--space-3);

  .bag-line-image {
    width: 3.5rem;
  }

  .bag-line-product {
    font-size: var(--font-size-3);
  }

  .bag-line-sku {
    font-size: var(--font-size-2);
  }
}

/* -- Summary panel -- */

.bag-summary {
  position: sticky;
  top: calc(var(--layout-header-height) + var(--space-5));

  .bag-summary-panel {
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--color-gray-4);
    border-radius: var(--radius-3);
    background-color: var(--color-white);
    box-shadow: var(--shadow-1);
  }

  .bag-summary-panel {
    padding: var(--space-6) var(--space-5);
    border: 1px solid var(--color-gray-4);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-3);
    background-color: var(--color-white);
    box-shadow: var(--shadow-1);

    .bag-checkout-cta {
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px -5px rgba(25, 24, 23, 0.45);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }
    }
  }

  .bag-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-4);
    font-size: var(--font-size-4);
  }

  .bag-summary-total {
    font-weight: 700;
  }

  .bag-summary-total {
    font-size: var(--font-size-5);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  p {
    margin: 0;
  }

  p+p {
    margin-top: var(--space-1);
  }
}

.bag-checkout-cta {
  width: 100%;
  margin-bottom: var(--space-4);

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.bag-summary-note {
  margin: 0;
  font-size: var(--font-size-2);
  line-height: var(--line-height-body);
  color: var(--color-gray-20);
}

.bag-line.is-unavailable .bag-line-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);

  &::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-round);
    background-color: currentcolor;
  }
}

/* -- Header: bag count badge -- */

.bag-count-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--radius-round);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  &.is-empty {
    display: none;
  }
}

/* -- Header: mini bag tray panel -- */

.bag-panel {
  display: block;
  width: 22rem;
  max-width: 100%;

  .bag-panel-empty {
    font-size: var(--font-size-3);
    color: var(--color-gray-20);
  }

  .bag-panel-list {
    display: flex;
    flex-direction: column;
    max-height: 22rem;
    overflow-y: auto;
  }

  .bag-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-3);

    .cta {
      height: 40px;
      padding-right: 20px;
      padding-left: 20px;
      font-size: var(--font-size-2);
    }
  }

  .bag-panel-subtotal {
    font-size: var(--font-size-3);
    font-weight: 700;
  }

}

/* -- Responsive -- */

@media (max-width: 48rem) {
  .bag-page .bag-layout {
    grid-template-columns: 1fr;
  }

  .bag-summary {
    position: static;
  }
}

@media (max-width: 30rem) {
  .bag-line:not(.is-compact) {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "image info"
      "image qty"
      "image price"
      "remove remove";
    row-gap: var(--space-2);
  }

  .bag-line:not(.is-compact) .bag-line-image {
    grid-area: image;
    width: 4.5rem;
  }

  .bag-line:not(.is-compact) .bag-line-info {
    grid-area: info;
  }

  .bag-line:not(.is-compact) .bag-line-qty {
    grid-area: qty;
  }

  .bag-line:not(.is-compact) .bag-line-price {
    grid-area: price;
    text-align: left;
  }

  .bag-line:not(.is-compact) .bag-line-remove {
    grid-area: remove;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {

  .bag-page *,
  .bag-panel *,
  .pdp-bag-status * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  /* The blanket 1ms override above would make the auto-dismiss timeline
     flash and vanish before it could be read — show it plainly instead. */
  .bag-status-message {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}