/* Component styling for the Greenhouse component library. Ships with styles.css so that
   real :hover / :focus-visible / :active / :disabled states are available to consumers.
   Every value resolves through the semantic tokens — no literals here. */

/* ---- Button ---- */
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gh-space-2);font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);letter-spacing:var(--gh-tracking-heading);border-radius:var(--gh-radius-pill);border:var(--gh-border-heavy) solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--gh-duration-fast) var(--gh-ease-out),color var(--gh-duration-fast) var(--gh-ease-out),border-color var(--gh-duration-fast) var(--gh-ease-out),transform var(--gh-duration-fast) var(--gh-ease-out)}
.gh-btn--sm{height:36px;padding:0 var(--gh-space-4);font-size:var(--gh-text-body-s)}
.gh-btn--md{height:44px;padding:0 var(--gh-space-6);font-size:var(--gh-text-body-m)}
.gh-btn--lg{height:54px;padding:0 var(--gh-space-8);font-size:var(--gh-text-body-l)}
.gh-btn--block{width:100%}
.gh-btn--primary{background:var(--gh-green-700);color:var(--gh-cream);border-color:var(--gh-green-700)}
.gh-btn--primary:hover{background:var(--gh-green-800);border-color:var(--gh-green-800)}
.gh-btn--accent{background:var(--gh-accent);color:var(--gh-text-on-accent);border-color:var(--gh-accent)}
.gh-btn--accent:hover{background:var(--gh-accent-hover);border-color:var(--gh-accent-hover)}
.gh-btn--secondary{background:transparent;color:var(--gh-text-primary);border-color:var(--gh-border-strong)}
.gh-btn--secondary:hover{background:var(--gh-text-primary);color:var(--gh-cream)}
.gh-btn--ghost{background:transparent;color:var(--gh-text-primary);border-color:transparent;padding-left:var(--gh-space-3);padding-right:var(--gh-space-3)}
.gh-btn--ghost:hover{background:var(--gh-green-50)}
.gh-btn:active{transform:scale(.975)}
.gh-btn[disabled],.gh-btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.gh-inverse .gh-btn--primary{background:var(--gh-cream);color:var(--gh-green-700);border-color:var(--gh-cream)}
.gh-inverse .gh-btn--primary:hover{background:var(--gh-chlorophyll);border-color:var(--gh-chlorophyll);color:var(--gh-text-on-accent)}
.gh-inverse .gh-btn--secondary{color:var(--gh-cream);border-color:var(--gh-cream)}
.gh-inverse .gh-btn--secondary:hover{background:var(--gh-cream);color:var(--gh-green-700)}
.gh-inverse .gh-btn--ghost{color:var(--gh-cream)}
.gh-inverse .gh-btn--ghost:hover{background:var(--gh-green-800)}

/* ---- IconButton ---- */
.gh-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gh-radius-pill);border:var(--gh-border-heavy) solid transparent;background:transparent;color:var(--gh-text-primary);cursor:pointer;transition:background-color var(--gh-duration-fast) var(--gh-ease-out),color var(--gh-duration-fast) var(--gh-ease-out),transform var(--gh-duration-fast) var(--gh-ease-out)}
.gh-iconbtn--sm{width:36px;height:36px}
.gh-iconbtn--md{width:44px;height:44px}
.gh-iconbtn--lg{width:54px;height:54px}
.gh-iconbtn--plain:hover{background:var(--gh-green-50)}
.gh-iconbtn--outline{border-color:var(--gh-border-strong)}
.gh-iconbtn--outline:hover{background:var(--gh-text-primary);color:var(--gh-cream)}
.gh-iconbtn--solid{background:var(--gh-green-700);color:var(--gh-cream);border-color:var(--gh-green-700)}
.gh-iconbtn--solid:hover{background:var(--gh-green-800)}
.gh-iconbtn:active{transform:scale(.94)}
.gh-iconbtn[disabled]{opacity:.4;pointer-events:none}
.gh-inverse .gh-iconbtn{color:var(--gh-cream)}
.gh-inverse .gh-iconbtn--plain:hover{background:var(--gh-green-800)}

/* ---- Field shell (Input, Select, Textarea) ---- */
.gh-field{display:flex;flex-direction:column;gap:var(--gh-space-2)}
.gh-field__label{font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-size:var(--gh-text-body-s);color:var(--gh-text-primary)}
.gh-field__hint{font-size:var(--gh-text-caption);color:var(--gh-text-secondary)}
.gh-field__error{font-size:var(--gh-text-caption);color:var(--gh-status-error)}
.gh-input{font-family:var(--gh-font-body);font-size:var(--gh-text-body-m);color:var(--gh-text-primary);background:var(--gh-surface-card);border:var(--gh-border-hairline) solid var(--gh-border-subtle);border-radius:var(--gh-radius-sm);height:44px;padding:0 var(--gh-space-4);width:100%;transition:border-color var(--gh-duration-fast) var(--gh-ease-out)}
textarea.gh-input{height:auto;min-height:110px;padding:var(--gh-space-3) var(--gh-space-4);line-height:var(--gh-leading-body);resize:vertical}
.gh-input::placeholder{color:var(--gh-text-muted)}
.gh-input:hover{border-color:var(--gh-green-400)}
.gh-input:focus{outline:none;border-color:var(--gh-border-strong);box-shadow:0 0 0 3px var(--gh-chlorophyll-200)}
.gh-input[disabled]{background:var(--gh-surface-muted);color:var(--gh-text-muted);cursor:not-allowed}
.gh-input--invalid{border-color:var(--gh-status-error)}
.gh-select-wrap{position:relative;display:block}
.gh-select-wrap select.gh-input{appearance:none;padding-right:var(--gh-space-10);cursor:pointer}
.gh-select-wrap::after{content:"";position:absolute;right:var(--gh-space-4);top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--gh-text-primary);border-bottom:2px solid var(--gh-text-primary);transform:rotate(45deg);pointer-events:none}

/* ---- Checkbox / Radio / Switch ---- */
.gh-choice{display:inline-flex;align-items:flex-start;gap:var(--gh-space-3);cursor:pointer;font-size:var(--gh-text-body-m);color:var(--gh-text-primary)}
.gh-choice input{position:absolute;opacity:0;width:0;height:0}
.gh-choice__box{flex:none;width:22px;height:22px;margin-top:1px;border:var(--gh-border-heavy) solid var(--gh-border-strong);background:var(--gh-surface-card);display:grid;place-items:center;transition:background-color var(--gh-duration-fast) var(--gh-ease-out)}
.gh-choice--checkbox .gh-choice__box{border-radius:var(--gh-radius-xs)}
.gh-choice--radio .gh-choice__box{border-radius:var(--gh-radius-pill)}
.gh-choice__box svg{opacity:0;transition:opacity var(--gh-duration-fast) var(--gh-ease-out)}
.gh-choice input:checked+.gh-choice__box{background:var(--gh-green-700)}
.gh-choice input:checked+.gh-choice__box svg{opacity:1;color:var(--gh-chlorophyll)}
.gh-choice--radio input:checked+.gh-choice__box{background:var(--gh-surface-card)}
.gh-choice__dot{width:10px;height:10px;border-radius:var(--gh-radius-pill);background:var(--gh-green-700);opacity:0;transition:opacity var(--gh-duration-fast) var(--gh-ease-out)}
.gh-choice input:checked+.gh-choice__box .gh-choice__dot{opacity:1}
.gh-choice input:focus-visible+.gh-choice__box{outline:2px solid var(--gh-focus-ring);outline-offset:2px}
.gh-choice:has(input[disabled]){opacity:.4;cursor:not-allowed}
.gh-switch__track{flex:none;width:46px;height:26px;border-radius:var(--gh-radius-pill);background:var(--gh-green-200);border:var(--gh-border-heavy) solid var(--gh-green-700);padding:2px;display:flex;transition:background-color var(--gh-duration-base) var(--gh-ease-out)}
.gh-switch__thumb{width:18px;height:18px;border-radius:var(--gh-radius-pill);background:var(--gh-green-700);transition:transform var(--gh-duration-base) var(--gh-ease-out),background-color var(--gh-duration-base) var(--gh-ease-out)}
.gh-choice input:checked+.gh-switch__track{background:var(--gh-chlorophyll)}
.gh-choice input:checked+.gh-switch__track .gh-switch__thumb{transform:translateX(20px)}
.gh-choice input:focus-visible+.gh-switch__track{outline:2px solid var(--gh-focus-ring);outline-offset:2px}

/* ---- Card ---- */
.gh-card{background:var(--gh-surface-card);border:var(--gh-border-hairline) solid var(--gh-border-subtle);border-radius:var(--gh-radius-md);overflow:hidden}
.gh-card--flat{border-color:transparent}
.gh-card--zone{background:var(--gh-surface-zone);border-color:transparent}
.gh-card--inverse{background:var(--gh-green-800);border-color:var(--gh-green-600);color:var(--gh-cream)}
.gh-card--raised{box-shadow:var(--gh-shadow-raised)}
.gh-card--interactive{cursor:pointer;transition:border-color var(--gh-duration-base) var(--gh-ease-out),transform var(--gh-duration-base) var(--gh-ease-out)}
.gh-card--interactive:hover{border-color:var(--gh-border-strong)}
.gh-card--interactive:active{transform:scale(.995)}

/* ---- Badge / Tag ---- */
.gh-badge{display:inline-flex;align-items:center;gap:var(--gh-space-1);font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-size:var(--gh-text-caption);letter-spacing:var(--gh-tracking-eyebrow);text-transform:uppercase;padding:5px var(--gh-space-3);border-radius:var(--gh-radius-pill)}
.gh-badge--accent{background:var(--gh-accent);color:var(--gh-text-on-accent)}
.gh-badge--solid{background:var(--gh-green-700);color:var(--gh-cream)}
.gh-badge--quiet{background:var(--gh-green-50);color:var(--gh-text-primary)}
.gh-badge--outline{background:transparent;color:var(--gh-text-primary);box-shadow:inset 0 0 0 1px var(--gh-border-subtle)}
.gh-badge--success{background:var(--gh-status-success-surface);color:var(--gh-status-success)}
.gh-badge--warning{background:var(--gh-status-warning-surface);color:var(--gh-status-warning)}
.gh-badge--error{background:var(--gh-status-error-surface);color:var(--gh-status-error)}
.gh-tag{display:inline-flex;align-items:center;gap:var(--gh-space-2);font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-size:var(--gh-text-body-s);padding:6px var(--gh-space-4);border-radius:var(--gh-radius-pill);border:var(--gh-border-hairline) solid var(--gh-border-subtle);background:var(--gh-surface-card);color:var(--gh-text-primary);cursor:pointer;transition:background-color var(--gh-duration-fast) var(--gh-ease-out),border-color var(--gh-duration-fast) var(--gh-ease-out)}
.gh-tag:hover{border-color:var(--gh-border-strong)}
.gh-tag[aria-pressed=true]{background:var(--gh-green-700);border-color:var(--gh-green-700);color:var(--gh-cream)}
.gh-tag__x{display:grid;place-items:center;opacity:.6}
.gh-tag__x:hover{opacity:1}

/* ---- Tabs ---- */
.gh-tabs{display:flex;gap:var(--gh-space-6);border-bottom:var(--gh-border-hairline) solid var(--gh-border-subtle)}
.gh-tab{appearance:none;background:none;border:0;padding:0 0 var(--gh-space-3);font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-size:var(--gh-text-body-m);color:var(--gh-text-secondary);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color var(--gh-duration-fast) var(--gh-ease-out),border-color var(--gh-duration-fast) var(--gh-ease-out)}
.gh-tab:hover{color:var(--gh-text-primary)}
.gh-tab[aria-selected=true]{color:var(--gh-text-primary);border-bottom-color:var(--gh-accent)}

/* ---- Dialog ---- */
.gh-dialog__scrim{position:fixed;inset:0;background:rgba(43,53,38,.55);display:grid;place-items:center;padding:var(--gh-space-6);z-index:60;animation:gh-fade var(--gh-duration-base) var(--gh-ease-out)}
.gh-dialog{background:var(--gh-surface-card);border-radius:var(--gh-radius-md);box-shadow:var(--gh-shadow-overlay);width:100%;max-width:520px;overflow:hidden;animation:gh-rise var(--gh-duration-slow) var(--gh-ease-out)}
.gh-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gh-space-4);padding:var(--gh-space-6) var(--gh-space-6) var(--gh-space-3)}
.gh-dialog__body{padding:0 var(--gh-space-6) var(--gh-space-6);color:var(--gh-text-secondary)}
.gh-dialog__foot{display:flex;justify-content:flex-end;gap:var(--gh-space-3);padding:var(--gh-space-4) var(--gh-space-6);border-top:var(--gh-border-hairline) solid var(--gh-border-subtle);background:var(--gh-green-50)}
@keyframes gh-fade{from{opacity:0}to{opacity:1}}
@keyframes gh-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Toast ---- */
.gh-toast{display:flex;align-items:flex-start;gap:var(--gh-space-3);background:var(--gh-green-700);color:var(--gh-cream);border-radius:var(--gh-radius-sm);padding:var(--gh-space-4);box-shadow:var(--gh-shadow-overlay);min-width:300px;max-width:420px;animation:gh-rise var(--gh-duration-slow) var(--gh-ease-out)}
.gh-toast--accent{background:var(--gh-accent);color:var(--gh-text-on-accent)}
.gh-toast__title{font-family:var(--gh-font-display);font-weight:var(--gh-weight-bold);font-size:var(--gh-text-body-m)}
.gh-toast__body{font-size:var(--gh-text-body-s);opacity:.85}

/* ---- Tooltip ---- */
.gh-tooltip{position:relative;display:inline-flex}
.gh-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--gh-green-900);color:var(--gh-cream);font-size:var(--gh-text-caption);line-height:1.4;padding:var(--gh-space-2) var(--gh-space-3);border-radius:var(--gh-radius-xs);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--gh-duration-fast) var(--gh-ease-out);z-index:40}
.gh-tooltip:hover .gh-tooltip__bubble,.gh-tooltip:focus-within .gh-tooltip__bubble{opacity:1}

/* ---- QuantityStepper ---- */
.gh-stepper{display:inline-flex;align-items:center;border:var(--gh-border-heavy) solid var(--gh-border-strong);border-radius:var(--gh-radius-pill);height:44px;overflow:hidden}
.gh-stepper button{appearance:none;background:none;border:0;width:40px;height:100%;display:grid;place-items:center;cursor:pointer;color:var(--gh-text-primary);transition:background-color var(--gh-duration-fast) var(--gh-ease-out)}
.gh-stepper button:hover{background:var(--gh-green-50)}
.gh-stepper button[disabled]{opacity:.35;pointer-events:none}
.gh-stepper__val{min-width:34px;text-align:center;font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-variant-numeric:tabular-nums}

/* ---- VariantSelector ---- */
.gh-variants{display:flex;gap:var(--gh-space-2);flex-wrap:wrap}
.gh-variant{appearance:none;font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-size:var(--gh-text-body-s);padding:9px var(--gh-space-4);border-radius:var(--gh-radius-pill);border:var(--gh-border-hairline) solid var(--gh-border-subtle);background:var(--gh-surface-card);color:var(--gh-text-primary);cursor:pointer;transition:border-color var(--gh-duration-fast) var(--gh-ease-out),background-color var(--gh-duration-fast) var(--gh-ease-out)}
.gh-variant:hover{border-color:var(--gh-border-strong)}
.gh-variant[aria-checked=true]{border-color:var(--gh-border-strong);border-width:var(--gh-border-heavy);background:var(--gh-green-50)}
.gh-variant[disabled]{opacity:.4;text-decoration:line-through;pointer-events:none}

/* ---- ProductCard ---- */
.gh-product{display:flex;flex-direction:column;background:var(--gh-surface-card);border-radius:var(--gh-radius-md);overflow:hidden;border:var(--gh-border-hairline) solid transparent;transition:border-color var(--gh-duration-base) var(--gh-ease-out)}
.gh-product:hover{border-color:var(--gh-border-subtle)}
.gh-product__media{position:relative;aspect-ratio:2/3;background:var(--gh-surface-zone);display:grid;place-items:center;overflow:hidden}
.gh-product__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--gh-duration-slow) var(--gh-ease-out)}
.gh-product:hover .gh-product__media img{transform:scale(1.03)}
.gh-product__flag{position:absolute;top:var(--gh-space-3);left:var(--gh-space-3)}
.gh-product__body{display:flex;flex:1;flex-direction:column;gap:var(--gh-space-2);padding:var(--gh-space-4) var(--gh-space-1) var(--gh-space-2)}
.gh-product__name{font-family:var(--gh-font-display);font-weight:var(--gh-weight-bold);font-size:var(--gh-text-heading-m);letter-spacing:var(--gh-tracking-heading)}
.gh-product__meta{font-size:var(--gh-text-body-s);color:var(--gh-text-secondary)}
.gh-product__price{font-family:var(--gh-font-display);font-weight:var(--gh-weight-medium);font-variant-numeric:tabular-nums;margin-top:auto}

/* ---- Marquee ---- */
.gh-marquee{overflow:hidden;background:var(--gh-green-700);color:var(--gh-cream);padding:var(--gh-space-3) 0}
.gh-marquee--accent{background:var(--gh-accent);color:var(--gh-text-on-accent)}
.gh-marquee__track{display:flex;gap:var(--gh-space-8);width:max-content;animation:gh-scroll var(--gh-marquee-speed,26s) linear infinite}
.gh-marquee__item{font-family:var(--gh-font-display);font-weight:var(--gh-weight-bold);font-size:var(--gh-text-body-s);letter-spacing:var(--gh-tracking-eyebrow);text-transform:uppercase;white-space:nowrap}
@keyframes gh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gh-marquee__track{animation:none}}

/* ---- ImageSlot (placeholder for un-supplied photography) ---- */
.gh-imageslot{box-sizing:border-box;display:grid;place-items:center;text-align:center;background:var(--gh-green-50);border:1px dashed var(--gh-green-300);color:var(--gh-text-muted);font-family:var(--gh-font-mono);font-size:var(--gh-text-caption);letter-spacing:.04em;padding:var(--gh-space-4);min-height:80px}

/* ---- Logo ----
   The supplied SVGs carry class-based fills whose rules were stripped, so an <img> renders
   them black and they cannot inherit page colour. Masking the shape and painting the
   background gives us the mark in any brand colour, from one place, and it prints. */
.gh-logo{display:inline-block;background-color:var(--logo-fill,var(--gh-green-700));-webkit-mask:var(--logo-src) no-repeat center/contain;mask:var(--logo-src) no-repeat center/contain}
.gh-logo--cream{background-color:var(--gh-cream)}
.gh-logo--chlorophyll{background-color:var(--gh-chlorophyll)}