/* elc_variants: weight tiles / pills + grind select */
:root {
  --elc-v-brand: #432323;
  --elc-v-brand-dark: #2a1515;
  --elc-v-surface: #f5f3f1;
  --elc-v-border: #ddd6d0;
  --elc-v-text: #1c1414;
  --elc-v-muted: #6f6565;
  --elc-v-badge: #f1dcc4;
  --elc-v-badge-text: #4a2f1c;
}

/* ---------- product page: weight tiles ---------- */
/* the theme sizes .product-variants-item to its select; the tiles need the full width */
.product-variants > .product-variants-item:has(.elc-wp) {
  display: block;
  float: none;
  width: 100%;
  margin-right: 0;
}
.elc-wp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}
.elc-wp__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 12px 12px 10px;
  border: 1px solid var(--elc-v-border);
  border-radius: 6px;
  background: var(--elc-v-surface);
  color: var(--elc-v-text);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.elc-wp__tile:hover {
  border-color: var(--elc-v-brand);
}
.elc-wp__tile.is-selected {
  border-color: var(--elc-v-brand);
  box-shadow: inset 0 0 0 1px var(--elc-v-brand);
  background: #fff;
}
.elc-wp__tile.is-unavailable {
  opacity: 0.6;
}
.elc-wp__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.elc-wp__tile:focus-within {
  outline: 2px solid var(--elc-v-brand);
  outline-offset: 2px;
}
.elc-wp__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elc-wp__radio {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--elc-v-muted);
  border-radius: 50%;
  background: #fff;
}
.elc-wp__tile.is-selected .elc-wp__radio {
  border-color: var(--elc-v-brand);
  box-shadow: inset 0 0 0 4px #fff;
  background: var(--elc-v-brand);
}
.elc-wp__label {
  font-size: 16px;
  font-weight: 600;
}
.elc-wp__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.elc-wp__price {
  font-size: 15px;
  font-weight: 600;
}
.elc-wp__regular {
  font-size: 12px;
  color: var(--elc-v-muted);
}
.elc-wp__per-kg {
  font-size: 12px;
  color: var(--elc-v-muted);
}
.elc-wp__badge {
  display: block;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--elc-v-badge);
  color: var(--elc-v-badge-text);
  font-size: 11px;
  line-height: 1.35;
}
.elc-wp__badge--muted {
  background: #ebe7e4;
  color: var(--elc-v-muted);
}

/* Phones: swipeable row */
@media (max-width: 575px) {
  .elc-wp {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-right: -15px;
    padding-right: 15px;
  }
  .elc-wp__tile {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* ---------- product page: grind select (ets_extraoptions) ---------- */
#add-to-cart-or-refresh .block-product-attribute-custom {
  margin: 14px 0 6px;
}
#add-to-cart-or-refresh .block-product-attribute-custom .form-group {
  margin: 0 0 6px;
}
#add-to-cart-or-refresh .block-product-attribute-custom h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}
#add-to-cart-or-refresh .block-product-attribute-custom select {
  width: 100%;
  max-width: 360px;
  height: 46px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--elc-v-border);
  border-radius: 6px;
  background-color: #fff;
  color: var(--elc-v-text);
  font-size: 14px;
}
#add-to-cart-or-refresh .block-product-attribute-custom select:focus {
  border-color: var(--elc-v-brand);
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 35, 35, 0.15);
}
#add-to-cart-or-refresh .block-product-attribute-custom .attribute-custom-price {
  display: none;
}
#add-to-cart-or-refresh .block-product-attribute-custom .list-attribute-custom,
#add-to-cart-or-refresh .block-product-attribute-custom .from-group-option {
  display: block;
  width: 100%;
}
#add-to-cart-or-refresh .block-product-attribute-custom .list-attribute-custom::after {
  content: "Mielenie na życzenie – wybierz metodę parzenia, a zmielimy kawę pod nią.";
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--elc-v-muted);
}
body.lang-en #add-to-cart-or-refresh .block-product-attribute-custom .list-attribute-custom::after {
  content: "Ground to order – choose your brewing method and we will grind the coffee for it.";
}

/* ---------- product lists ---------- */
/* The picker has its own add-to-cart button - hide the theme's hover button on those miniatures. */
.js-product-miniature:has(.elc-wpl) .img_block .cart {
  display: none;
}
.elc-wpl {
  margin-top: 8px;
}
.elc-wpl__save-row {
  /* fixed height: showing the badge must not change the card height - the theme's float grid would
     push the next row sideways even for a 1 px difference */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin-bottom: 6px;
}
.elc-wpl__save {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--elc-v-badge);
  color: var(--elc-v-badge-text);
  font-size: 11px;
  line-height: 18px;
}
.elc-wpl__save[hidden] {
  /* keep its space so every card stays the same height */
  display: inline-block;
  visibility: hidden;
}
.elc-wpl__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.elc-wpl__pills,
.elc-wpl__single {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
  padding: 3px;
  border-radius: 6px;
  background: var(--elc-v-surface);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.elc-wpl__pills::-webkit-scrollbar {
  display: none;
}
.elc-wpl__single {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 42px;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--elc-v-text);
}
.elc-wpl__pill {
  flex: 1 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--elc-v-text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}
.elc-wpl__pill:hover {
  border-color: var(--elc-v-border);
}
.elc-wpl__pill.is-selected {
  border-color: var(--elc-v-brand);
  background: #fff;
  font-weight: 600;
}
.elc-wpl__pill.is-unavailable {
  color: var(--elc-v-muted);
  text-decoration: line-through;
}
.elc-wpl__pill:focus-visible {
  outline: 2px solid var(--elc-v-brand);
  outline-offset: 1px;
}
.elc-wpl__form {
  flex: 0 0 auto;
  margin: 0;
}
.elc-wpl__add {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--elc-v-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.elc-wpl__add:hover,
.elc-wpl__add:focus-visible {
  background: var(--elc-v-brand-dark);
}
.elc-wpl__add:disabled {
  background: #b9b0ab;
  cursor: not-allowed;
}


/* ---------- cart lines (thecheckout): weight / grind selects ---------- */
.elc-cart-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0 4px;
}
.elc-cart-opts__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 140px;
  font-weight: 400;
}
.elc-cart-opts__label {
  font-size: 12px;
  color: var(--elc-v-muted);
}
.elc-cart-opts__value {
  font-size: 14px;
}
.elc-cart-opts__select {
  height: 34px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--elc-v-border);
  border-radius: 5px;
  background-color: #fff;
  color: var(--elc-v-text);
  font-size: 13px;
}
.elc-cart-opts__select:focus {
  border-color: var(--elc-v-brand);
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 35, 35, 0.15);
}
.elc-cart-opts.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.elc-cart-opts__error {
  flex-basis: 100%;
  margin: 0;
  color: #b3261e;
  font-size: 12px;
}