/* Commerce7 component styling for the new build.
 *
 * Ported 2026-09-20 from the WPCode snippet the WordPress site carries, which is what makes
 * Commerce7's buttons, forms and product grid look like ours rather than Commerce7's stock
 * grey. Rules that only existed to hide WordPress's own page titles (body.page-id-...) are
 * dropped; everything else is kept as written, because it is tuned and proven.
 *
 * The colour and font variables these read from are set per page, next to the commerce7.css
 * link. Commerce7 leaves them undefined and its own defaults are a blue built for a light
 * theme, so they have to be given real values or the widgets come through blue and in Times.
 */

/* ---------- links and buttons ---------- */

button.c7-link,
a.c7-link {
  padding: 0;
  background: transparent;
  color: var(--c7-primary-color);
}

button.c7-link:hover, button.c7-link:focus, button.c7-link:active,
a.c7-link:hover, a.c7-link:focus, a.c7-link:active {
  background: transparent;
  color: var(--c7-primary-color);
}

button.c7-btn,
.c7-btn {
  color: var(--c7-primary-button-text-color) !important;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  font-size: 14px !important;
  /* Commerce7's own padding is 11px 20px and it lets the label wrap. On WordPress that never
   * showed, because Elementor's global button style (18px 45px) and the theme's
   * white-space:nowrap were sitting on top of it. We have neither, so "Add to Cart" folded
   * onto three lines inside the hover panel. Set both here rather than inherit an accident. */
  white-space: nowrap;
  padding: 14px 30px;
}

.c7-btn:hover, .c7-btn:active, .c7-btn:focus {
  border-radius: var(--c7-button-border-radius) !important;
}

button.c7-btn.c7-btn--alt, .c7-btn.c7-btn--alt,
button.c7-btn.c7-btn--alt--small, .c7-btn.c7-btn--alt--small {
  border: 1px solid var(--c7-primary-color);
  background: var(--c7-alt-button-bg) !important;
  color: var(--c7-alt-button-text-color) !important;
  padding: 12px 25px !important;
}

button.c7-btn.c7-btn--alt:hover, button.c7-btn.c7-btn--alt:active, button.c7-btn.c7-btn--alt:focus,
.c7-btn.c7-btn--alt:hover, .c7-btn.c7-btn--alt:active, .c7-btn.c7-btn--alt:focus,
button.c7-btn.c7-btn--alt--small:hover, button.c7-btn.c7-btn--alt--small:active,
button.c7-btn.c7-btn--alt--small:focus,
.c7-btn.c7-btn--alt--small:hover, .c7-btn.c7-btn--alt--small:active,
.c7-btn.c7-btn--alt--small:focus {
  border: 1px solid var(--c7-primary-color);
  background: var(--c7-alt-button-bg-hover) !important;
  color: #fff !important;
}

.c7-tab[aria-selected='true'] {
  background: #000 !important;
}

/* ---------- forms ---------- */

.c7-form input[type='text'], .c7-form input[type='email'], .c7-form input[type='number'],
.c7-form input[type='tel'], .c7-form input[type='username'], .c7-form input[type='password'],
.c7-form textarea, .c7-form--stripe, .c7-order-item input, .c7-form select, .c7-order-item select {
  letter-spacing: 0 !important;
  padding: 11px 10px !important;
  text-transform: none !important;
  font-weight: normal !important;
}

.c7-form select, .c7-order-item select { padding-right: 30px !important; }

.c7-form label:not(.c7-radio, .c7-checkbox, .duet-date__mobile-heading),
.c7-label, .c7-form legend {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.c7-product__add-to-cart__form__quantity input[type=text] {
  padding: 19px 10px !important;
  height: auto !important;
  width: 55px !important;
}

/* ---------- the slide-out basket ---------- */

.c7-side-cart__header button:active,
.c7-side-cart__header button:hover,
.c7-side-cart__header button:focus:not(:focus-visible) {
  background: transparent !important;
}

.c7-order-summary__buttons a,
.c7-order-summary__buttons a.c7-btn,
.c7-order-summary__buttons a.c7-btn.c7-btn--alt {
  font-size: 13px;
  padding: 15px 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- the product grid ----------
 * One across on a phone, two on a tablet, three on a desktop. On a desktop, hovering a bottle
 * fades it back and brings the add-to-cart forward over it; on touch the form sits under the
 * name instead, because there is no hover to reveal it.
 */

.c7-product-collection__product-list {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 0 !important;
  margin: 0 auto;
  align-items: stretch;
}

.c7-product-collection__product-list .c7-product {
  width: 100%;
  margin: 0 auto 2rem;
  flex-direction: column;
}

@media screen and (min-width: 48.0625em) {
  .c7-product-collection__product-list .c7-product { width: calc(50% - 2rem); margin: 0 0.5rem 2rem; }
}

@media screen and (min-width: 64.0625em) {
  .c7-product-collection__product-list .c7-product { width: calc(33.33% - 2.25rem); margin: 0 0.5rem 2rem; }
}

.c7-product-collection__product-list .c7-product .c7-product__image {
  margin: 0 auto;
  position: relative;
  transition: opacity 0.2s ease-out;
}

.c7-product-collection__product-list .c7-product .c7-product__image picture {
  transition: opacity 0.2s ease-out;
}

.c7-product-collection__product-list .c7-product .c7-product__infoHoverWrapper {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  transition: all 400ms ease-out;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  pointer-events: none;
}

@media screen and (min-width: 64.0625em) {
  .c7-product-collection__product-list .c7-product .c7-product__image:hover picture { opacity: 0.1; }
  .c7-product-collection__product-list .c7-product .c7-product__image:hover .c7-product__infoHoverWrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .c7-product-collection__product-list .c7-product .c7-product__details .c7-product__add-to-cart__form {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c7-product-collection__product-list .c7-product .c7-product__image,
  .c7-product-collection__product-list .c7-product .c7-product__image picture,
  .c7-product-collection__product-list .c7-product .c7-product__infoHoverWrapper {
    transition: none;
  }
}

.c7-product-collection__product-list .c7-product .c7-product__infoHoverWrapper .c7-product__add-to-cart__price {
  display: none;
}

.c7-product-collection__product-list .c7-product .c7-product__add-to-cart__form { justify-content: center; }

.c7-product-collection__product-list .c7-product .c7-product__details {
  text-align: center;
  margin-top: auto;
  flex: 0;
}

.c7-product-collection__product-list .c7-product .c7-product__details .c7-product__title {
  font-size: 23px !important;
  font-weight: 600;
}

.c7-product-collection__product-list .c7-product .c7-product__details .c7-product__title a {
  font-size: inherit !important;
  font-weight: inherit !important;
}

.c7-product-collection__product-list .c7-product span.c7-product__add-to-cart__price__variant {
  position: relative;
  top: -4px;
}

/* ---------- a single wine ---------- */

.c7-product-detail .c7-product__add-to-cart__price { display: flex; }

@media screen and (max-width: 1024px) {
  .c7-product-detail h1.c7-product__title { font-size: 30px !important; }
}

@media screen and (max-width: 768px) {
  .c7-product-detail .c7-product__details { text-align: center; }
  .c7-product-detail .c7-product__add-to-cart__price,
  .c7-product-detail .c7-product__add-to-cart__form { justify-content: center; }
  .c7-product__specs { margin: 0 auto; }
}

/* ---------- accounts ---------- */

.c7-account-login { padding-top: 2rem; padding-bottom: 2rem; }

@media screen and (min-width: 1025px) {
  .c7-account-login { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media screen and (max-width: 480px) {
  .c7-account__menu ul { text-align: center; }
}

a.c7-link.c7-user-nav__account__dropdown__logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- checkout ---------- */

.c7-form select, .c7-order-item select { color: black; }
.c7-form label { font-size: 12px !important; text-transform: none !important; line-height: 2 !important; letter-spacing: 0 !important; }
.c7-checkout__footer { padding: 0 1rem 1rem; }
.c7-checkout-mobile__summary-toggle svg { stroke: white !important; }

/* ---------- booking a tasting ----------
 * The date picker is react-day-picker, which Commerce7 embeds, hence the rdp- names.
 */

button.c7-date-picker-toggle { background: none; padding: 5px; }

.rdp-weeknumber, .rdp-day {
  padding: 0 !important;
  letter-spacing: 0 !important;
  font-weight: normal !important;
}

.rdp-cell { padding: 3px !important; }

.rdp-weeknumber:hover, .rdp-day:hover,
.rdp-weeknumber:active, .rdp-day:active,
.rdp-weeknumber:focus, .rdp-day:focus {
  border-radius: 100% !important;
  background: #000 !important;
}

.rdp-nav_button {
  padding: 0.25em !important;
  background: transparent !important;
  color: black !important;
}

button.rdp-day_button { padding: 0; }

.c7-reservation__search button.c7-btn.c7-btn--primary { padding: 12px 30px; }