/* The product stays prominent; controls are a quiet, borderless icon row. */
.tin-toolbar {
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 3px auto 0;
  opacity: .65;
  transition: opacity .18s ease;
}
.tin-toolbar button,
.tin-toolbar button:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: background .18s ease;
}
.tin-toolbar button svg { display: block; pointer-events: none; }
.tin-viewer:hover .tin-toolbar,
.tin-viewer:focus-within .tin-toolbar { opacity: 1; }
.tin-toolbar button:hover:not(:disabled) { background: #233e320d; }
.tin-toolbar button:disabled { opacity: .35; }
.hero-tins .tin-toolbar button { border: 0; background: transparent; }
.hero-tins .tin-toolbar button:hover:not(:disabled) { background: #f3ebdd12; }
.tin-hint,
.hero-tins .tin-hint {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: .01em;
  opacity: .56;
}
@media (pointer: coarse) {
  .tin-toolbar { opacity: .8; }
  .tin-toolbar button,
  .tin-toolbar button:first-child {
    flex-basis: 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tin-toolbar, .tin-toolbar button { transition: none; }
}

/* Rounded, restrained calls to action in the brand's cream and mate green. */
.button {
  min-height: 48px;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border-color: transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.35;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button-light { background: var(--cream); color: var(--mate); }
.button-light:hover { background: #fff9ee; color: var(--mate); border-color: transparent; transform: translateY(-1px); }
.button-dark { background: var(--mate); color: var(--cream); border-color: transparent; }
.button-dark:hover { background: #304e3d; color: var(--cream); border-color: transparent; transform: translateY(-1px); }
.tin-product-copy .button { min-height: 46px; padding: 13px 18px; border-radius: 999px; }
.button .wa-icon { width: 19px; height: 19px; }
.button > span[aria-hidden="true"] { margin-left: 2px; opacity: .65; }
.languages { border-color: #233e322b; border-radius: 999px; padding: 3px; gap: 2px; }
.languages button { min-width: 36px; border-radius: 999px; padding: 7px 9px; font-size: 11px; letter-spacing: .06em; }
.whatsapp-float {
  min-height: 48px;
  gap: 9px;
  border: 1px solid #f3ebdd55;
  padding: 12px 19px;
  font-weight: 500;
  box-shadow: 0 4px 16px #11181324;
}
.whatsapp-float:hover { background: #304e3d; transform: translateY(-1px); }
.whatsapp-float .wa-icon { width: 22px; height: 22px; }
@media (width <= 560px) {
  .whatsapp-float { width: 48px; height: 48px; min-height: 48px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .whatsapp-float { transition: none; }
  .button:hover, .whatsapp-float:hover { transform: none; }
}

/* Public retail details. Wholesale terms are provided only through a quotation. */
.tin-product-copy .tin-price { margin: 12px 0 3px; font-size: 28px; font-weight: 500; letter-spacing: -.025em; }
.tin-price-unit { display: block; font-size: 12px; opacity: .75; }
.tin-product-copy .tin-shipping-note { margin: 10px 0 18px; font-size: 12px; line-height: 1.6; }
.retail-order-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; margin-top: 40px; padding-top: 28px; border-top: 1px solid #233e3226; }
.retail-order-details h3 { margin: 0 0 10px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.retail-order-details p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.8; opacity: .8; }
@media (width <= 700px) {
  .retail-order-details { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; padding-top: 24px; }
}