/* Homepage: the Labor Day sale callout.

   Enqueued only on the front page (functions.php, is_front_page()), the same
   one-sheet-per-template rule as shop.css and the others. The band takes the
   theme's established callout pattern, a light grey panel with a 3px brand-red
   left rule, and the 6px radius and #cccccc hairline of the product tiles it
   sits above, so it reads as part of that grid rather than as a banner
   dropped on top of it.

   Vertical rhythm is the template's: the band carries mt-12 like every other
   homepage section, so it sits 48px below the hero and the tiles sit 48px
   below it, at every width. */

.g80-sale {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 20px 21px;
  border: 1px solid #cccccc;
  border-left: 3px solid #9f0712;
  border-radius: 6px;
  background: linear-gradient(to bottom, #f8f8f8, #f5f5f5);
}

@media (min-width: 768px) {
  .g80-sale {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 20px 24px 20px 28px;
  }
}

.g80-sale__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.g80-sale__eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #9f0712;
}

.g80-sale__headline {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: #1a1a1a;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .g80-sale__headline {
    font-size: 22px;
    line-height: 28px;
  }
}

.g80-sale__note {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
}

.g80-sale__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .g80-sale__actions {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

/* The code. Dashed like a coupon, white so it is the brightest thing on the
   grey panel, and a 44px target because it is the tap that matters. */
.g80-sale__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px dashed #9f0712;
  border-radius: 6px;
  background: #ffffff;
  color: #1a1a1a;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  -webkit-user-select: all;
  user-select: all;
}

.g80-sale__code:hover,
.g80-sale__code:focus-visible {
  background: #fdeaea;
}

.g80-sale__code-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #666666;
}

.g80-sale__code.is-copied .g80-sale__code-hint {
  color: #15703f;
}

.g80-sale__code-hint svg {
  flex-shrink: 0;
}

.g80-sale__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  background: #9f0712;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.g80-sale__cta:hover,
.g80-sale__cta:focus-visible {
  background: #8a0610;
  color: #ffffff;
}