/* ==========================================================================
   Vista Blocks: shared shop components (buttons, breadcrumbs, stars, quantity,
   accordion). Loaded by the product page and the shop / collection pages.
   ========================================================================== */
:root { --radius: 2px; --card: var(--wp--preset--color--card, #EEE7DB); --sage-deep: var(--wp--preset--color--sage-deep, #666B55); --terracotta-deep: var(--wp--preset--color--terracotta-deep, #8C4D35); }
.shop-container, .pdp-container { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.btn-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.btn.btn--light { background: var(--ivory); color: var(--charcoal); }
.btn.btn--light:hover { background: var(--terracotta); color: var(--ivory); }
.btn.is-busy { opacity: .6; pointer-events: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  padding: 15px 34px; font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent !important; border-radius: var(--radius); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn.btn--dark, .pdp-reviews .btn--dark { background: var(--charcoal); color: var(--ivory); }
.btn.btn--dark:hover { background: var(--terracotta); color: var(--ivory); }
.btn.btn--dark[disabled] { background: var(--ink-soft); cursor: not-allowed; }
.btn.btn--outline { border-color: var(--charcoal) !important; color: var(--charcoal); background: transparent; }
.btn.btn--outline:hover { background: var(--charcoal); color: var(--ivory); }
.btn.btn--link { padding: 0 0 4px; border: 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0; align-self: flex-start; }
.btn.btn--link:hover { color: var(--terracotta); }

.stars { position: relative; display: inline-flex; gap: 1px; color: var(--line); vertical-align: -2px; }
.stars svg { width: 14px !important; height: 14px !important; fill: currentColor !important; stroke: none !important; }
.stars__fill { position: absolute; inset: 0; display: inline-flex; gap: 1px; overflow: hidden; width: var(--r); color: var(--brass); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.crumbs a:hover { color: var(--terracotta); }
.crumbs span[aria-current] { color: var(--charcoal); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); height: 52px; }
.qty button { width: 42px; height: 100%; font-size: 18px; color: var(--ink-soft); transition: color .2s; }
.qty button:hover { color: var(--terracotta); }
.qty input { width: 34px; height: 100%; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 500; color: var(--charcoal); -moz-appearance: textfield; appearance: textfield; padding: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 1px solid var(--brass); }

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0 !important; font-size: 12px !important; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-align: left; }
.accordion__btn svg { width: 16px !important; height: 16px !important; transition: transform .3s var(--ease); flex: none; }
.accordion__item.is-open .accordion__btn svg { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel .accordion__content { padding: 0 0 22px; color: var(--ink-soft); font-weight: 300; line-height: 1.75; }
.accordion__content p + p { margin-top: 12px; }