/* Roasted Root product options (Rev. October 2026)
   Styles the tiles, groups, pills, quantity stepper, and doodle Add to Cart
   built by assets/js/product-options.js. Colors come from tokens.css.

   Decisions (Oct 2026):
   - Selected pills: Espresso with Cream text, price in Gold.
   - Selected temperature tile: Terracotta ring on Soft Terracotta.
   - Required groups start open; optional groups start closed with a summary.
   To change a decision, change the variables in the first block below. */

.rr-options {
  --rr-selected: var(--espresso);
  --rr-selected-text: var(--cream);
  --rr-selected-price: var(--gold);
  --rr-ring: var(--terracotta);
  --rr-ring-fill: var(--soft-terracotta);
  --rr-line: rgba(48, 31, 23, 0.15);
  --rr-line-strong: rgba(48, 31, 23, 0.22);
  --rr-muted: var(--espresso-text);
}

/* The originals stay in the form (they do the real work) but are hidden
   from view once the script has run. Visually hidden, not display: none,
   so required inputs are still part of the form. */
.rr-options.is-enhanced .rr-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* !important above is deliberate: WooCommerce gives its variations table
   full width with a long selector, and these must always win. */
/* Tables won't shrink below their contents, so the hidden variations table
   becomes a block first; otherwise it pokes past the screen edge. */
.rr-options.is-enhanced table.rr-native { display: block !important; }
.rr-options.is-enhanced .reset_variations,
.rr-options.is-enhanced .woocommerce-variation-price { display: none !important; }

/* ---------- Section headings (Temperature, Make it yours) ---------- */
.rr-options .rr-options__heading,
.rr-options .pws-modifier-sets > :is(h2, h3, h4, h5, p, legend):first-child {
  margin: 0 0 12px;
  font: 800 13px/1.3 var(--font-archivo-narrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--espresso);
}
.rr-options .rr-options__section { margin-bottom: 28px; }

/* ---------- Temperature tiles ---------- */
.rr-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.rr-tile {
  flex: 1 1 96px;
  max-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border: 1.5px solid var(--rr-line);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--espresso);
  font: 700 14px/1.2 var(--font-archivo);
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease);
}
.rr-tile:hover { border-color: var(--rr-line-strong); }
.rr-tile[aria-pressed="true"] {
  border-color: var(--rr-ring);
  background: var(--rr-ring-fill);
  box-shadow: 0 0 0 2px var(--rr-ring);
}
.rr-tile:disabled { opacity: 0.45; cursor: not-allowed; }

/* Icons are masks, so they take the text color. Replace the SVG files in
   assets/images/temperature/ to change the artwork. A new option (say
   "blended") gets an icon by adding blended.svg and one line below. */
.rr-tile__icon {
  width: 44px;
  height: 44px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
.rr-tile[data-option="hot"] .rr-tile__icon { -webkit-mask-image: url("../images/temperature/hot.svg"); mask-image: url("../images/temperature/hot.svg"); }
.rr-tile[data-option="iced"] .rr-tile__icon { -webkit-mask-image: url("../images/temperature/iced.svg"); mask-image: url("../images/temperature/iced.svg"); }
.rr-tile[data-option="frappe"] .rr-tile__icon { -webkit-mask-image: url("../images/temperature/frappe.svg"); mask-image: url("../images/temperature/frappe.svg"); }
.rr-tile:not([data-option="hot"], [data-option="iced"], [data-option="frappe"]) .rr-tile__icon { display: none; }

/* ---------- Modifier groups ---------- */
.rr-group {
  margin-bottom: 10px;
  border: 1.5px solid var(--rr-line);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}
.rr-group__toggle {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  color: var(--espresso);
}
.rr-group__toggle:focus-visible { outline: 3px solid rgba(173, 88, 41, 0.42); outline-offset: -3px; border-radius: var(--radius-md); }
.rr-group__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.rr-group__title { font: 700 16px/1.2 var(--font-archivo); }
.rr-group__required {
  font: 800 11px/1 var(--font-archivo-narrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.rr-group.is-complete .rr-group__required { display: none; }
.rr-group__summary { font: 600 13px/1.3 var(--font-archivo); color: var(--rr-muted); }
.rr-group__chevron {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
  position: relative;
  transition: transform var(--ease);
}
.rr-group__chevron::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: translateY(-2px) rotate(45deg);
}
.rr-group.is-open .rr-group__chevron { transform: rotate(180deg); }
.rr-group__panel { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.rr-group__panel[hidden] { display: none; }

/* ---------- Pills ---------- */
.rr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1.5px solid var(--rr-line-strong);
  border-radius: 999px;
  background: var(--cream);
  color: var(--espresso);
  font: 600 14px/1 var(--font-archivo);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.rr-pill:hover { border-color: var(--espresso); }
.rr-pill__price { font-weight: 700; color: var(--rr-muted); }
.rr-pill[aria-pressed="true"] {
  background: var(--rr-selected);
  border-color: var(--rr-selected);
  color: var(--rr-selected-text);
}
.rr-pill[aria-pressed="true"] .rr-pill__price { color: var(--rr-selected-price); }
.rr-pill.is-unavailable { opacity: 0.45; cursor: not-allowed; }

/* ---------- Quantity, Add to Cart, total ---------- */
/* The row that holds quantity, Add to Cart, and the total. On simple products
   that's the form itself; on variable products it's WooCommerce's inner row.
   Everything else in that row (option sections) takes the full width. */
.rr-options.is-enhanced:not(.variations_form),
.rr-options.is-enhanced .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
:is(.rr-options.is-enhanced:not(.variations_form), .rr-options.is-enhanced .woocommerce-variation-add-to-cart) > * { flex-basis: 100%; }
:is(.rr-options.is-enhanced:not(.variations_form), .rr-options.is-enhanced .woocommerce-variation-add-to-cart) > :is(.quantity, .single_add_to_cart_button, .rr-total) { flex-basis: auto; }
.rr-options.is-enhanced .woocommerce-variation-add-to-cart { margin-top: 24px; }

:is(.woocommerce div.product, .rr-quick) form.cart.rr-options .quantity.rr-qty {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1.5px solid var(--rr-line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
}
.rr-qty__button {
  all: unset;
  width: 40px;
  height: 46px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--espresso);
  font: 700 18px/1 var(--font-archivo);
}
.rr-qty__button:focus-visible { outline: 3px solid rgba(173, 88, 41, 0.42); border-radius: var(--radius-md); }
:is(.woocommerce div.product, .rr-quick) form.cart.rr-options .rr-qty input.qty {
  width: 2.2em;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  color: var(--espresso);
  font: 700 15px/1 var(--font-archivo);
  -moz-appearance: textfield;
}
.rr-qty input.qty::-webkit-inner-spin-button,
.rr-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The selectors below also cover the menu's quick order window (.rr-quick),
   which shows these same options outside a product page. */
/* WooCommerce styles its button with long selectors, so the doodle shape
   needs an equally specific rule to clear them. The shape itself still
   comes from doodle-button.css (.doodle-btn). */
:is(.woocommerce div.product, .rr-quick) form.cart.rr-options .single_add_to_cart_button.doodle-btn,
:is(.woocommerce div.product, .rr-quick) form.cart.rr-options .single_add_to_cart_button.doodle-btn:hover {
  height: var(--h);
  padding: 0 calc(var(--cap-l) * 0.85);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--label);
  font: 800 15px/1 var(--font-archivo);
  letter-spacing: 0.08em;
}
:is(.woocommerce div.product, .rr-quick) form.cart.rr-options .single_add_to_cart_button:is(.is-waiting, .disabled) { opacity: 0.5; }

.rr-total { font: 800 16px/1 var(--font-archivo); color: var(--espresso); }
.rr-options__notice:not(:empty) {
  flex-basis: 100%;
  margin: 4px 0 0;
  font: 600 14px/1.4 var(--font-archivo);
  color: var(--terracotta-dark);
}

@media (max-width: 480px) {
  .rr-tile { padding: 12px 6px 10px; font-size: 13px; }
  .rr-tile__icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-tile, .rr-pill, .rr-group__chevron { transition: none; }
}