/* ==========================================================================
   GrainCo — core stylesheet
   Design direction: minimal, corporate-clean, monochrome-forward with a
   single dark-green action color. Flat cards, sharp sans-serif type,
   generous whitespace. Breakpoint-specific overrides live in responsive.css.
   ========================================================================== */

:root {
  --primary: #16301f;
  --primary-hover: #0d1f13;
  --secondary: #f1efe5;
  --accent: #b5791f;
  --background: #faf8f2;
  --surface: #ffffff;
  --border: #e4e0d3;
  --input-bg: #f5f3ea;
  --text: #17190f;
  --text-muted: #6b6f62;
  --success: #2f6b45;
  --danger: #b3452f;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(23, 25, 15, 0.06);
  --shadow-md: 0 10px 28px rgba(23, 25, 15, 0.10);
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Belt-and-suspenders: a scroll-reveal element (AOS) sits translated
     off its final position until it animates in, which can transiently
     widen the scrollable area before the user ever scrolls it into view.
     Clipping horizontal overflow at the root is the standard, safe fix —
     it only affects horizontal scroll, never vertical, and never clips
     anything that should actually be visible in normal layout. */
  overflow-x: hidden;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a {
  color: var(--text);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--primary);
}

/* Visible focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/*
 * If the AOS (scroll-reveal) CDN script fails to load or throws, its own
 * stylesheet would still hide every [data-aos] element permanently (their
 * initial opacity:0 never gets removed). app.js adds this class in that
 * case so content is never lost to a failed third-party script.
 */
body.grn-no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Respect users who've asked for less motion — collapse every custom
   transition/animation/scroll-behavior to nearly instant. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Buttons ---- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding-block: 0.6rem;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--text-muted);
  border-color: var(--text-muted);
}
.btn-outline-secondary {
  border: 1.5px solid var(--text);
  color: var(--text);
  background-color: transparent;
}
.btn-outline-secondary:hover {
  background-color: var(--text);
  border-color: var(--text);
  color: var(--surface);
}
.btn-link {
  color: var(--text-muted);
  text-decoration: underline;
}
.btn-outline-danger {
  border-radius: var(--radius-sm);
}

/* ---- Forms ---- */
.form-control,
.form-select {
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding-block: 0.6rem;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22, 48, 31, 0.12);
}
.form-control.is-invalid {
  border-color: var(--danger);
}
.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.input-group-text {
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.form-check-input {
  border-color: var(--border);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(22, 48, 31, 0.12);
}

/* ---- Navbar ---- */
.grn-navbar {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  position: sticky;
  top: 0;
  z-index: 1020;
  transition: box-shadow 0.2s ease;
}
.grn-navbar.grn-navbar-scrolled {
  box-shadow: var(--shadow-sm);
}

.grn-nav-toggle {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}
.grn-nav-toggle:hover {
  color: var(--primary);
  transform: rotate(90deg);
}

.grn-brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.grn-brand:hover {
  color: var(--text);
}
.grn-brand i {
  color: var(--primary);
}

.navbar-nav .nav-link {
  color: var(--text-muted);
  font-weight: 600;
  margin-inline: 0.5rem;
  position: relative;
  transition: color 0.15s ease;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--text);
}
.navbar-nav .nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -2px;
  height: 2px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar-nav .nav-link:not(.dropdown-toggle).active::after {
  transform: scaleX(1);
}

/*
 * Bootstrap intentionally renders dropdown-menus inside a `.navbar` with
 * `position: static` (it skips Popper for navbar dropdowns). That's fine
 * for Bootstrap's own `.navbar-collapse` layout, but our header is a
 * custom flex row — a statically-positioned menu inserts real height into
 * that row and reflows/wraps the rest of the header. Force it back to a
 * normal absolute overlay so opening it never changes header layout.
 */
.grn-navbar .dropdown-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
}

.grn-nav-search {
  max-width: 240px;
}

.grn-cart-icon-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.3rem;
  position: relative;
  padding: 0.25rem 0.4rem;
  text-decoration: none;
}
.grn-cart-icon-btn:hover {
  color: var(--primary);
}

.grn-cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background-color: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}

@keyframes grn-badge-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.grn-badge-pulse {
  animation: grn-badge-pulse 0.35s ease-in-out;
}

.grn-secure-checkout-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- Offcanvas menu ---- */
.offcanvas {
  background-color: var(--background);
}
.grn-offcanvas-nav .nav-link {
  color: var(--text);
  font-weight: 600;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--border);
}

/* ---- Hero ---- */
.grn-hero {
  padding-block: 4rem;
}
.grn-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.1;
}
.grn-hero p.lead {
  color: var(--text-muted);
  max-width: 42ch;
  font-size: 1.05rem;
}
.grn-hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.grn-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Section headings ---- */
.grn-section-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.grn-section-subtitle {
  color: var(--text-muted);
}
.grn-section-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.grn-section-link:hover {
  color: var(--primary);
}

/* ---- Feature strip ---- */
.grn-features-section {
  background-color: var(--secondary);
}
.grn-feature-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
}
.grn-feature-card i {
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 0.75rem;
  display: block;
}
.grn-feature-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.grn-feature-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---- Category showcase (homepage) ---- */
.grn-category-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.grn-category-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--text);
}
.grn-category-card-body {
  padding: 1.5rem;
}
.grn-category-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.grn-category-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grn-category-card:hover .grn-category-card-image img {
  transform: scale(1.05);
}
.grn-category-card-overlay {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grn-category-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}

@media (min-width: 768px) {
  .grn-category-card-split {
    flex-direction: row;
  }
  .grn-category-card-split .grn-category-card-body {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .grn-category-card-split .grn-category-card-image {
    flex: 1 1 55%;
    aspect-ratio: auto;
  }
}

/* ---- Sidebar category tiles (used elsewhere) ---- */
.grn-tile-grid a {
  text-decoration: none;
}

/* ---- Product cards ---- */
.grn-product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--surface);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.grn-product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.grn-card-img-link {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--secondary);
}
.grn-product-card .card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grn-product-card:hover .card-img-top {
  transform: scale(1.05);
}
.grn-badge-category {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
}
.grn-card-title a {
  color: var(--text);
}
.grn-card-title a:hover {
  color: var(--primary);
}
.grn-card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.grn-card-rating i {
  color: var(--accent);
  font-size: 0.8rem;
}
.grn-price {
  color: var(--text);
}
.grn-price-unit {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ---- Weight selector (shared: cards, product page, cart) ---- */
.grn-weight-label {
  font-weight: 600;
  color: var(--text);
  font-size: 0.8rem;
}
.grn-weight-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 0.4rem;
}
.grn-chip {
  border: 1px solid var(--border);
  background-color: var(--input-bg);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.grn-chip:hover {
  border-color: var(--text);
}
.grn-chip:active {
  transform: scale(0.95);
}
.grn-chip.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.grn-weight-custom {
  margin-top: 0.6rem;
}
.grn-weight-custom .input-group-text {
  font-size: 0.8rem;
}
.grn-weight-error {
  font-size: 0.78rem;
  color: var(--danger);
  margin-top: 0.4rem;
  font-weight: 600;
}

/* ---- Shop layout ---- */
.grn-filters-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.grn-filters-card h2 {
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
}
.grn-filters-group-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.grn-filter-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.3rem;
}
.grn-filter-check label {
  cursor: pointer;
  font-weight: 500;
}
.grn-price-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.form-range {
  accent-color: var(--primary);
}
.grn-shop-search-group {
  max-width: 320px;
}

/* ---- Product details page ---- */
.grn-gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--secondary);
  aspect-ratio: 1 / 1;
}
.grn-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grn-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.grn-gallery-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background-color: var(--secondary);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.75;
}
.grn-gallery-thumb:hover {
  opacity: 1;
}
.grn-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grn-gallery-thumb.active {
  border-color: var(--text);
  opacity: 1;
}

.grn-eyebrow-badge {
  background-color: var(--secondary);
  color: var(--text);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
}
.grn-origin-tag {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.grn-price-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: var(--surface);
}
.grn-price-box-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.grn-price-box-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
}
.grn-price-box-value span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}
.grn-price-box-meta {
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-muted);
}

#grn-product-rating-stars i {
  color: var(--accent);
}
.grn-qty-stepper {
  max-width: 150px;
}
.grn-qty-stepper input[type='number']::-webkit-outer-spin-button,
.grn-qty-stepper input[type='number']::-webkit-inner-spin-button,
.grn-weight-stepper input[type='number']::-webkit-outer-spin-button,
.grn-weight-stepper input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.grn-weight-stepper input[type='number'],
.grn-qty-stepper input[type='number'] {
  -moz-appearance: textfield;
}

.grn-secure-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Accordion (specifications / storage) */
.grn-accordion .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.grn-accordion .accordion-button {
  background-color: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
}
.grn-accordion .accordion-button:not(.collapsed) {
  background-color: var(--surface);
  color: var(--text);
  box-shadow: none;
}
.grn-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(22, 48, 31, 0.12);
}
.grn-accordion .accordion-body {
  background-color: var(--surface);
}
.grn-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
}
.grn-spec-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.grn-spec-value {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---- Cart page ---- */
.grn-cart-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.grn-cart-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
  flex-shrink: 0;
}
.grn-summary-card,
.grn-order-summary-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.grn-summary-row {
  display: flex;
  justify-content: space-between;
  padding-block: 0.4rem;
  color: var(--text-muted);
}
.grn-summary-row.grn-total {
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
}
.grn-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px dashed var(--border);
}
.grn-summary-line:last-child {
  border-bottom: none;
}
.grn-summary-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---- Empty states ---- */
.grn-empty-state {
  text-align: center;
  padding: 4rem 1rem;
}
.grn-empty-state i {
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 1rem;
  display: inline-block;
}

/* ---- Checkout ---- */
.grn-checkout-section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.grn-checkout-section h2 {
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.grn-checkout-section h2 i {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.grn-demo-notice {
  background-color: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.grn-delivery-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  cursor: pointer;
  background-color: var(--input-bg);
}
.grn-delivery-option:has(input:checked) {
  border-color: var(--primary);
  background-color: var(--surface);
}

/* ---- Order success ---- */
.grn-order-success-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

/* ---- Footer ---- */
.grn-footer {
  background-color: var(--secondary);
  color: var(--text);
  margin-top: 4rem;
  border-top: 1px solid var(--border);
}
.grn-footer h6 {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}
.grn-footer-links li {
  margin-bottom: 0.4rem;
}
.grn-footer-links a {
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 0.9rem;
}
.grn-footer-links a:hover {
  color: var(--text);
}
.grn-social a {
  color: var(--text);
  font-size: 1.1rem;
}
.grn-about-section {
  background-color: var(--secondary);
}

/* ---- Misc ---- */
.grn-sticky-summary {
  position: sticky;
  top: 90px;
}

/* Briefly highlights a value right after it updates (price/weight/totals). */
@keyframes grn-value-flash {
  0% {
    background-color: rgba(22, 48, 31, 0.14);
  }
  100% {
    background-color: transparent;
  }
}
.grn-value-flash {
  animation: grn-value-flash 0.6s ease-out;
  border-radius: 4px;
}

/* Back-to-top button: hidden until the page has scrolled a bit. */
.grn-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
}
.grn-back-to-top:hover {
  background-color: var(--primary-hover);
  color: #fff;
}
.grn-back-to-top.grn-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* A cart line fading out right before it's removed from the DOM. */
.grn-row-removing {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}