/* Grantha Storefront Stylesheet — Full Screen Layouts & Components */

/* Skip to main content keyboard accessibility link */
.skip-to-content-link {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
  position: fixed !important;
  top: 12px !important;
  left: 16px !important;
  z-index: 10000 !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 16px !important;
  margin: 0 !important;
  clip: auto !important;
  white-space: normal !important;
  background: var(--g-accent) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-md) !important;
  outline: 2px solid var(--g-text) !important;
  outline-offset: 2px !important;
}

/* Layout Containers & Grids */
.ranking-hero-banner {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}

[data-page] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}
@media (min-width: 1500px) {
  [data-page] { max-width: 1520px; }
}
@media (min-width: 1800px) {
  [data-page] { max-width: 1720px; }
}

[data-r="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 44px;
}
[data-r="sidebar"] {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
[data-r="detail"] {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
[data-r="cart"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 44px;
  align-items: start;
}
[data-r="search"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 38px;
  align-items: start;
}

/* ==========================================================================
   Core Magento Page Scaffolding

   Pages without a bespoke Nocturne template (account, wishlist, contact,
   orders, CMS) render into Magento's stock `.page-main` / `.columns`
   structure. The blank theme's styles-m.css is removed in
   default_head_blocks.xml, so without these rules those pages render
   full-bleed and unstyled. Bespoke pages use `[data-page]` instead.
   ========================================================================== */
.page-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}
@media (min-width: 1500px) {
  .page-main { max-width: 1520px; }
}
@media (min-width: 1800px) {
  .page-main { max-width: 1720px; }
}

.columns,
.column.main {
  min-width: 0;
}

/* Sidebar page layouts. Source order is main, then sidebars, so the columns
   are placed explicitly rather than relying on document order. */
.page-layout-2columns-left .columns,
.page-layout-2columns-right .columns,
.page-layout-3columns .columns {
  display: grid;
  gap: 34px;
  align-items: start;
}
.page-layout-2columns-left .columns { grid-template-columns: 246px minmax(0, 1fr); }
.page-layout-2columns-left .column.main { grid-column: 2; grid-row: 1; }
.page-layout-2columns-left .sidebar-main { grid-column: 1; grid-row: 1; }
.page-layout-2columns-left .sidebar-additional { grid-column: 2; grid-row: 2; }

.page-layout-2columns-right .columns { grid-template-columns: minmax(0, 1fr) 246px; }
.page-layout-2columns-right .column.main { grid-column: 1; grid-row: 1; }
.page-layout-2columns-right .sidebar-main,
.page-layout-2columns-right .sidebar-additional { grid-column: 2; }

.page-layout-3columns .columns { grid-template-columns: 226px minmax(0, 1fr) 226px; }
.page-layout-3columns .column.main { grid-column: 2; grid-row: 1; }
.page-layout-3columns .sidebar-main { grid-column: 1; grid-row: 1; }
.page-layout-3columns .sidebar-additional { grid-column: 3; grid-row: 1; }

/* Page titles & breadcrumbs on stock pages */
.page-main .page-title-wrapper { margin: 0 0 22px; }
.page-main .page-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.page-main .page-title .base { font-weight: 500; }

.breadcrumbs {
  font-size: 12.5px;
  color: var(--g-muted);
  margin: 0 0 16px;
}
.breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--g-faint);
}
.breadcrumbs a { color: var(--g-muted2); }
.breadcrumbs a:hover { color: var(--g-accent); }

@media (max-width: 900px) {
  .page-layout-2columns-left .columns,
  .page-layout-2columns-right .columns,
  .page-layout-3columns .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-layout-2columns-left .column.main,
  .page-layout-2columns-left .sidebar-main,
  .page-layout-2columns-left .sidebar-additional,
  .page-layout-2columns-right .column.main,
  .page-layout-2columns-right .sidebar-main,
  .page-layout-2columns-right .sidebar-additional,
  .page-layout-3columns .column.main,
  .page-layout-3columns .sidebar-main,
  .page-layout-3columns .sidebar-additional {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .page-main { padding: 18px 16px 60px; }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.grantha-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 28px;
  font-size: 12px;
  color: var(--g-muted2);
  border-bottom: 1px solid var(--g-line-2);
  background: var(--g-bg);
}
.grantha-topbar .announcement {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grantha-topbar .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.grantha-topbar a {
  color: var(--g-muted2);
  font-size: 12px;
}
.grantha-topbar a:hover {
  color: var(--g-text);
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-md);
  color: var(--g-muted2);
  font-family: inherit;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle-btn:hover {
  background: var(--g-hover-strong);
  color: var(--g-text);
}
.theme-toggle-btn i {
  font-size: 14px;
}

.grantha-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--g-header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--g-line);
}

.grantha-main-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 28px;
}

.grantha-logo {
  display: flex;
  align-items: center;
  flex: none;
  background: var(--g-logo-plate);
  border-radius: 6px;
  padding: 6px 10px;
}
.grantha-logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* Search Box */
.grantha-search-box {
  position: relative;
  flex: 1;
  max-width: 720px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-md);
  background: var(--g-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.grantha-search-box:focus-within {
  border-color: var(--g-accent);
  box-shadow: 0 0 0 1px var(--g-accent-line);
}
.search-input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  color: var(--g-text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  outline: none !important;
  box-shadow: none !important;
  min-height: auto;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.search-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--g-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 0 18px;
  cursor: pointer;
  border-left: 1px solid var(--g-line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: background-color var(--transition-fast);
}
.search-btn:hover {
  background: var(--g-accent-tint);
}

/* Autocomplete Typeahead Dropdown */
.search-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--g-surface-elevated);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: searchDropdownFadeIn 0.15s ease-out;
}

@keyframes searchDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Transliteration notification header */
.search-suggest-trans-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--g-accent-tint);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--g-accent-text);
  margin-bottom: 4px;
}
.search-suggest-trans-notice i {
  font-size: 15px;
  color: var(--g-accent);
}
.search-suggest-raw-note {
  color: var(--g-muted);
  font-size: 11.5px;
  margin-left: 4px;
}

/* Author & Publisher Quick Pills */
.search-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--g-line-3);
}
.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  color: var(--g-text);
  transition: all var(--transition-fast);
  text-decoration: none;
}
.search-pill:hover, .search-pill.is-active {
  background: var(--g-accent-tint);
  border-color: var(--g-accent);
  color: var(--g-accent-text);
}
.search-pill i {
  font-size: 13px;
  color: var(--g-accent);
}

/* Product rows in suggestion list */
.search-suggest-products {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-suggest-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast);
  color: var(--g-text);
}
.search-suggest-product-row:hover,
.search-suggest-product-row.is-active {
  background: var(--g-hover-strong);
}
.search-suggest-thumb {
  width: 38px;
  height: 57px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  background: var(--g-cover-bg);
}
.search-suggest-info {
  flex: 1;
  min-width: 0;
}
.search-suggest-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-title strong {
  color: var(--g-accent);
  font-weight: 600;
}
.search-suggest-meta {
  font-size: 11.5px;
  color: var(--g-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12px;
}
.search-suggest-price {
  font-weight: 600;
  color: var(--g-accent-text);
}
.search-suggest-was-price {
  font-size: 11px;
  color: var(--g-muted);
  text-decoration: line-through;
}
.search-suggest-discount {
  font-size: 10.5px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--g-badge-bg);
  color: var(--g-badge-text);
  font-weight: 500;
}
.search-suggest-stock.is-out {
  font-size: 11px;
  color: var(--g-muted);
  font-style: italic;
}

/* Footer view all link */
.search-suggest-footer {
  padding-top: 6px;
  border-top: 1px solid var(--g-line-3);
  margin-top: 2px;
}
.search-suggest-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--g-bg);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--g-accent-text);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.search-suggest-view-all:hover,
.search-suggest-view-all.is-active {
  background: var(--g-accent-tint);
}
.search-suggest-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--g-muted);
}

/* User Links & Cart */
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 13px;
}
.header-actions a {
  color: var(--g-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.header-actions a:hover {
  color: var(--g-accent);
}
/*
 * The account links toggle via the `hidden` attribute. `display: flex` above is
 * an author rule and so beats the user-agent default for [hidden], which left
 * both "Sign in" and "My Account" on screen at once. Restore it explicitly.
 */
.header-actions a[hidden] {
  display: none;
}
.header-cart-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--g-accent);
  color: var(--g-accent);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.header-cart-btn:hover {
  background: var(--g-accent-tint);
  color: var(--g-accent);
}
.header-cart-badge {
  background: var(--g-badge-bg);
  color: var(--g-badge-text);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

/* Main Navigation Bar */
.grantha-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 28px;
  font-size: 13.5px;
  border-top: 1px solid var(--g-line-3);
  overflow-x: auto;
  white-space: nowrap;
}
.nav-category-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--g-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.nav-category-toggle:hover {
  color: var(--g-accent);
}
.grantha-nav a {
  color: var(--g-soft);
  padding: 10px 12px;
  font-size: 13.5px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast);
}
.grantha-nav a:hover, .grantha-nav a.active {
  color: var(--g-accent);
}
.grantha-nav a.hot-deal-link {
  color: var(--g-accent);
  font-weight: 500;
}

/* ==========================================================================
   Homepage Sections
   ========================================================================== */

/* Homepage section rhythm. Was an inline `padding: 40px 0 10px` on every <section>, which no
   media query could reach — the mobile layout inherited desktop-sized gaps. */
.home-section {
  padding: 38px 0 10px;
}
.home-section:first-of-type,
.hero-section + .home-section {
  padding-top: 30px;
}

/* Hero Section */
.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--g-line-2);
}
.hero-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.25;
  color: var(--g-soft);
}
.hero-desc {
  font-size: 14px;
  color: var(--g-muted2);
  max-width: 60ch;
  margin: 0 0 18px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hero-stat-box {
  border-left: 2px solid var(--color-accent-700);
  padding-left: 14px;
}
.hero-stat-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--g-text);
}
.hero-stat-label {
  font-size: 11.5px;
  color: var(--g-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Section Headers */
.section-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
.section-subtitle {
  font-size: 12px;
  color: var(--g-muted);
}
.section-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--g-accent);
}
.rail-controls {
  display: flex;
  gap: 6px;
  margin-left: 14px;
}

/* SM FilterProducts widgets rendered as Nocturne rails. These blocks come from CMS page
   content and land outside <main data-page>, so they need their own vertical rhythm. */
.nocturne-rail-block {
  padding: 34px 0 10px;
}

/* Book Cards Grid */
.book-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 24px 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container {
  width: 100%;
  margin-bottom: 32px;
}

/* Book Cards
 *
 * One component for every listing on the site (Magento_Catalog::product/nocturne/book-card.phtml).
 * The card is a <div>, not an <a>, because the hover Add to Cart button lives inside it and a
 * <button> inside an <a> is invalid HTML. Whole-card clickability comes from the stretched title
 * link below: .book-title a::after covers the card at z-index 1, while .book-actions sits at
 * z-index 10 so the Add to Cart button still gets its own clicks. */
.book-card {
  position: relative;
  /* The nowrap author/publisher lines give the card a min-content width of the full
     untruncated string. In a `1fr` track (auto minimum) that pushes the column wider than
     the container and the grid overflows to the right — visible on the mobile two-column
     home page. min-width: 0 lets the card shrink to its track and the ellipses do their job. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--g-text);
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.book-card:hover {
  transform: translateY(-2px);
  color: var(--g-text);
}
.book-card .book-title {
  margin: 0;
  font-weight: 500;
}
.book-card .book-title a {
  color: inherit;
  text-decoration: none;
}
.book-card .book-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
}
.book-card:hover .book-title a {
  color: var(--g-accent-text);
}
.book-card .book-title a:focus-visible::after {
  outline: 2px solid var(--g-accent);
  outline-offset: 3px;
}
.book-stock--out {
  color: var(--g-muted);
}
/* Narrow columns (e.g. the homepage "Trending now" grid) — same component, tighter type. */
.book-card--compact .book-title {
  font-size: 13px;
}
.book-card--compact .book-price {
  font-size: 12px;
}

/* Product Grid Hover-Only Add to Cart Actions (Absolute Cover Overlay) */
.book-cover-actions,
.book-card .book-actions,
.book-card .product-item-actions,
.products-grid .product-item-actions {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.book-card:hover .book-cover-actions,
.book-card:hover .book-actions,
.book-card:hover .product-item-actions,
.book-card:focus-within .book-cover-actions,
.book-card:focus-within .book-actions,
.book-card:focus-within .product-item-actions,
.products-grid .product-item-info:hover .product-item-actions,
.products-grid .product-item:hover .product-item-actions,
.products-grid .product-item:focus-within .product-item-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Glassmorphic sleek Add to Cart button overlay.
   Deliberately NOT `.action.primary`: nocturne-account.css styles `.column.main .action.primary`
   at 13.5px and loads after this file, which silently blew the card button up on every
   catalog page. The card button is a Nocturne component and owns its own sizing. */
.book-cover-actions .action.tocart,
.book-actions .action.tocart,
.products-grid .action.tocart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  background: rgba(18, 18, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  line-height: 1.2;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

@container bookcover (max-width: 168px) {
  .book-cover-actions .action.tocart,
  .book-actions .action.tocart,
  .products-grid .action.tocart {
    font-size: 11px;
    padding: 6px 8px;
    gap: 5px;
  }
}
@container bookcover (max-width: 132px) {
  .book-cover-actions .action.tocart,
  .book-actions .action.tocart,
  .products-grid .action.tocart {
    font-size: 10px;
    padding: 5px 6px;
    gap: 0;
    border-radius: var(--radius-sm, 4px);
  }
  /* Below this width the icon is the first thing to go — the words carry the meaning,
     and "Out of stock" must stay readable rather than degrade to a bare glyph. */
  .book-cover-actions .action.tocart > .ph,
  .book-actions .action.tocart > .ph,
  .products-grid .action.tocart > .ph {
    display: none;
  }
}

.book-cover-actions .action.tocart:hover,
.book-actions .action.tocart:hover,
.products-grid .action.tocart:hover {
  background: var(--g-accent);
  border-color: var(--g-accent);
  color: #ffffff;
}

@media (max-width: 860px) {
  .book-cover-actions,
  .book-card .book-actions,
  .book-card .product-item-actions,
  .products-grid .product-item-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}
/* Out of stock is a permanent state, not a hover affordance — the shopper must be able to
   see it without pointing at the card (and on touch, where there is no hover at all). */
.book-card .book-actions--static {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.book-cover-actions .action.tocart.btn-out-of-stock,
.book-actions .action.tocart.btn-out-of-stock,
.products-grid .action.tocart.btn-out-of-stock {
  background: rgba(18, 18, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  cursor: not-allowed;
  box-shadow: none;
}
.book-cover-actions .action.tocart.btn-out-of-stock:hover,
.book-actions .action.tocart.btn-out-of-stock:hover,
.products-grid .action.tocart.btn-out-of-stock:hover {
  background: rgba(18, 18, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
}

.book-cover-wrap {
  position: relative;
  /* The overlay button sizes itself against the cover, not the viewport: the same card
     component is used at ~112px wide in the "Trending now" column and ~180px wide in a
     category grid, and a single fixed font size made the label wrap to two lines and
     swallow the artwork on the narrow ones. */
  container-type: inline-size;
  container-name: bookcover;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--g-cover-bg);
  box-shadow: 0 0 0 1px var(--g-line-2);
}
.book-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.book-discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--g-veil);
  color: var(--g-accent-text);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--g-accent-line);
}
.book-rank-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(18, 18, 22, 0.88);
  color: var(--g-accent-text);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--g-accent-line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
  letter-spacing: 0.5px;
}

/* Homepage Responsive Book Grid
 *
 * Explicit column counts, not `auto-fill`. auto-fill picked whatever fitted — 5 columns for a
 * 12-book section — and the leftovers left a ragged hole across the last row. The counts here are
 * all divisors of 12, so a section holding a multiple of 12 books fills every row completely at
 * every breakpoint. Keep the source counts in home.phtml multiples of 12 for the same reason. */
.home-book-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 18px;
}
@media (max-width: 1280px) {
  .home-book-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .home-book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 14px;
  }
}
@media (max-width: 640px) {
  .home-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }
}
.book-title {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--g-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-author {
  font-size: 12px;
  color: var(--g-muted);
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-publisher {
  font-size: 11.5px;
  color: var(--g-faint);
  margin-top: -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.book-price {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g-accent-text);
}
.book-was-price {
  font-size: 11.5px;
  color: var(--g-muted);
  text-decoration: line-through;
}
.book-stock {
  font-size: 11.5px;
  color: var(--g-muted2);
}

/* Bestsellers Ranked List */
.ranked-book-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  color: var(--g-text);
  border-bottom: 1px solid var(--g-hover-strong);
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.ranked-book-item:hover {
  background: var(--g-hover);
  color: var(--g-text);
}
.rank-num {
  width: 28px;
  font-size: 16px;
  font-weight: 700;
  color: var(--g-muted2);
  text-align: center;
  flex: none;
}
.ranked-book-item:nth-child(1) .rank-num {
  color: #eab308;
  font-size: 18px;
}
.ranked-book-item:nth-child(2) .rank-num {
  color: #cbd5e1;
  font-size: 17px;
}
.ranked-book-item:nth-child(3) .rank-num {
  color: #d97706;
  font-size: 17px;
}
.rank-thumb {
  width: 54px;
  height: 80px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 5px;
  flex: none;
  background: var(--g-cover-bg);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.2));
  border: 1px solid var(--g-line-2);
}
.rank-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.rank-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--g-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-meta {
  font-size: 12.5px;
  color: var(--g-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-price-col {
  margin-left: auto;
  text-align: right;
  flex: none;
}

/* ==========================================================================
   Collections & series landing page

   Cards carry three cover thumbnails, the series name and its size. The covers are
   decorative — the card's accessible name is its title, and the images are aria-hidden.
   ========================================================================== */
.collections-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px 0 60px;
}
.collections-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--g-text);
  margin: 0 0 10px;
}
.collections-intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--g-muted2);
  max-width: 58ch;
  margin: 0 0 30px;
}

.collection-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 22px 20px;
}

.collection-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  background: var(--g-surface);
  border: 1px solid var(--g-line-2);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.collection-card:hover {
  border-color: var(--g-accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.collection-covers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.collection-covers img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--g-cover-bg);
  box-shadow: var(--shadow-sm);
}
/* A series with fewer than three books should not stretch its covers across the row. */
.collection-covers img:only-child { max-width: 33%; }

.collection-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--g-text);
}
.collection-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--g-muted);
}
.collection-count {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--g-accent-text);
}

@media (max-width: 640px) {
  .collection-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .collections-title { font-size: 24px; }
}

/* Category Cards Grid */
.category-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.category-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--g-surface);
  color: var(--g-text);
  box-shadow: 0 0 0 1px var(--g-line-3);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.category-card:hover {
  box-shadow: 0 0 0 1px var(--g-accent-line);
  color: var(--g-text);
}
.category-card-name {
  font-size: 14.5px;
  font-weight: 500;
}
.category-card-count {
  font-size: 12px;
  color: var(--g-muted);
}

/* Mobile density — the homepage is a stack of dense listings on a phone, and desktop-scale
   section padding pushed every rail below the fold. Tightened once here rather than per section. */
@media (max-width: 860px) {
  [data-r="split"] {
    gap: 26px;
  }
  .home-section {
    padding: 26px 0 6px;
  }
  .hero-section + .home-section {
    padding-top: 20px;
  }
  .section-header {
    gap: 4px 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .section-header h2 {
    font-size: 18px;
  }
  .hero-section {
    padding-bottom: 18px;
  }
}
@media (max-width: 640px) {
  .home-section {
    padding: 22px 0 4px;
  }
  .section-header {
    margin-bottom: 10px;
  }
  .ranked-book-item {
    gap: 10px;
    padding: 8px 4px;
  }
  .rank-num {
    width: 20px;
    font-size: 14px;
  }
  .rank-thumb {
    width: 44px;
    height: 66px;
  }
}

/* Services / Value Proposition Bar */
.services-bar {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
  padding: 24px 0;
  border-top: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
}
@media (max-width: 640px) {
  .services-bar {
    margin-top: 26px;
    gap: 14px;
    padding: 18px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.service-title {
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--g-text);
}
.service-body {
  font-size: 12.5px;
  color: var(--g-muted);
  line-height: 1.5;
}

/* ==========================================================================
   Category & Layered Navigation
   ========================================================================== */

.category-breadcrumbs {
  font-size: 12px;
  color: var(--g-muted);
  margin-bottom: 16px;
}
.category-breadcrumbs a {
  color: var(--g-muted);
}
.category-breadcrumbs a:hover {
  color: var(--g-text);
}

.filter-group-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin-bottom: 10px;
}
.cat-tree-link {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--g-soft);
  text-decoration: none;
}
.cat-tree-link:hover, .cat-tree-link.active {
  color: var(--g-accent);
}
.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--g-soft);
  cursor: pointer;
  margin-bottom: 7px;
}
.filter-checkbox-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--g-line-strong2);
  flex: none;
}
/* Ticked state. Only the availability filter can be in it — every other filter moves its
   applied option into the state chips instead of leaving a checked box behind. */
.filter-checkbox-box.checked {
  position: relative;
  background: var(--g-accent);
  border-color: var(--g-accent);
}
.filter-checkbox-box.checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* — Layered navigation price slider —
   Replaces the checkbox list of price buckets. Two overlaid range inputs make the
   two-handle slider: the track is the div underneath, the inputs themselves are
   transparent and only their thumbs are painted. pointer-events is off on the input
   as a whole and back on for the thumbs, so whichever handle is under the cursor
   takes the drag even where the two inputs overlap. */
.price-filter {
  display: block;
}
.price-slider {
  position: relative;
  height: 26px;
  margin: 2px 6px 6px;
}
.price-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--radius-full);
  background: var(--g-line-strong);
}
.price-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-full);
  background: var(--g-accent);
}
.price-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}
.price-slider input[type="range"]:focus {
  outline: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--g-surface-elevated);
  border: 2px solid var(--g-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--g-surface-elevated);
  border: 2px solid var(--g-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.price-slider input[type="range"]::-moz-range-track {
  background: none;
  border: none;
}
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--g-accent-tint-strong);
}
.price-slider input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--g-accent-tint-strong);
}

.price-filter-inputs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.price-filter-input {
  flex: 1;
  min-width: 0;
  display: block;
}
.price-filter-input-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-faint);
  margin-bottom: 3px;
}
.price-filter-input input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--g-text);
  background: var(--g-surface);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-sm);
}
.price-filter-input input:focus {
  outline: none;
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-tint);
}
.price-filter-dash {
  color: var(--g-faint);
  padding-bottom: 7px;
}

.price-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.price-filter-apply {
  font-size: 12px;
  padding: 5px 14px;
}
.price-filter-reset {
  font-size: 12px;
  color: var(--g-muted);
  text-decoration: none;
}
.price-filter-reset:hover {
  color: var(--g-accent);
}

.price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.price-preset {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--g-soft);
  text-decoration: none;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-full);
}
.price-preset:hover {
  color: var(--g-accent);
  border-color: var(--g-accent-line);
}
.price-preset.active {
  color: var(--g-accent-text);
  background: var(--g-accent-tint);
  border-color: var(--g-accent-line);
}
.price-preset-count {
  font-size: 11px;
  color: var(--g-faint);
}

.catalog-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--g-line);
  margin-bottom: 20px;
}
.active-filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.product-detail-hero {
  position: sticky;
  top: 118px;
}
.product-main-cover {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--g-cover-bg);
  box-shadow: 0 0 0 1px var(--g-line-2);
}
.product-main-cover img {
  width: 100%;
  display: block;
}
.product-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.product-thumb-item {
  width: 52px;
  height: 78px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.product-thumb-item:hover, .product-thumb-item.active {
  opacity: 1;
}

.product-title-main {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.18;
}
.product-author-main {
  font-size: 15px;
  color: var(--g-soft2);
  margin-bottom: 6px;
}
.product-publisher-main {
  font-size: 13.5px;
  color: var(--g-muted);
  margin-bottom: 22px;
}

/* Taxonomy chips — genres and series. Most books carry neither, so these rows are
   often absent; the first one present takes over the publisher line's bottom margin. */
.product-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: -14px;
  margin-bottom: 22px;
}
.product-chip-row + .product-chip-row {
  margin-top: -18px;
}
.meta-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--g-accent-text);
  background: var(--g-accent-tint);
  border: 1px solid var(--g-accent-line);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.meta-chip:hover {
  background: var(--g-accent-tint-strong);
  color: var(--g-accent);
  text-decoration: none;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 26px;
  max-width: 620px;
}
.spec-item {
  border-top: 1px solid var(--g-line);
  padding-top: 8px;
}
.spec-label {
  font-size: 11.5px;
  color: var(--g-muted);
}
.spec-value {
  font-size: 13.5px;
  color: var(--g-text);
  font-weight: 500;
}

/* Sticky Purchase Card */
.purchase-card {
  position: sticky;
  top: 118px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--g-surface);
  box-shadow: 0 0 0 1px var(--g-line-2);
}
.purchase-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.purchase-price-large {
  font-size: 28px;
  font-weight: 500;
  color: var(--g-accent-text);
}
/* Payment-method pricing panel in the purchase card. Recessed against the card in both
   themes: --g-bg sits below --g-surface in light and in dark, so the panel reads as inset
   either way. It used to ask for --g-bg-card, a token that has never existed, which meant
   the hardcoded light-grey fallback painted a near-white box in dark mode. */
.payment-tiers-box {
  margin: 14px 0;
  padding: 10px 12px;
  font-size: 12px;
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  border-radius: var(--radius-sm);
}
.payment-tiers-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-text);
}
.payment-tier-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.payment-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--g-soft);
}
.payment-tier-value {
  font-weight: 600;
  text-align: right;
}
.payment-tier-value.is-standard {
  color: var(--g-positive);
}
.payment-tier-value.is-koko {
  color: var(--g-info);
}

.purchase-savings {
  font-size: 12.5px;
  color: var(--g-muted2);
  margin-top: 6px;
}
.purchase-stock {
  font-size: 13px;
  margin: 16px 0 4px;
}
.purchase-stock.is-available {
  color: var(--g-muted2);
}
.purchase-stock.is-unavailable {
  color: var(--g-text);
  font-weight: 500;
}
.purchase-dispatch {
  font-size: 12.5px;
  color: var(--g-muted);
  margin-bottom: 18px;
}

/* Why a book cannot be bought. The strong tone is for the two cases the shop can do
   nothing about — out of print, or no stock in over six months — so it reads as an
   explanation rather than an error. */
.availability-notice {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g-line);
  background: var(--g-bg);
}
.availability-notice--strong {
  border-color: var(--g-accent-line);
  background: var(--g-accent-tint);
}
.availability-notice-headline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-text);
  margin-bottom: 4px;
}
.availability-notice--strong .availability-notice-headline {
  color: var(--g-accent-text);
}
.availability-notice-detail {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--g-soft);
}

/* Stock alert action button on out-of-stock product detail pages */
.stock-alert-btn {
  margin-bottom: 10px;
  color: var(--g-accent-text);
  border-color: var(--g-accent-line);
  background: var(--g-accent-tint);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.stock-alert-btn:hover {
  background: var(--g-accent-tint-strong);
  color: var(--g-accent-text);
  border-color: var(--g-accent);
}
.stock-alert-btn i {
  font-size: 17px;
  color: var(--g-accent);
  transition: transform var(--transition-fast);
}
.stock-alert-btn:hover i {
  transform: rotate(-12deg) scale(1.1);
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qty-btn {
  background: transparent;
  border: 0;
  color: var(--g-soft);
  font: inherit;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.qty-btn:hover {
  background: var(--g-hover-strong);
}
/*
 * The quantity itself. This had no rule at all, so the input fell back to the browser
 * default: Chrome draws spinner arrows inside a number input and they ate the whole 32px
 * the inline style allowed, pushing the digit out of the visible box. The stepper showed
 * "−  +" with nothing between them on both the cart and the product page.
 */
/* Specificity matters here: nocturne-components.css styles input[type="number"] as a
   full-width form field (0-1-1), which outranks a bare .qty-input class (0-1-0) and was
   what forced the 32px inline width in the first place. .qty-stepper .qty-input is 0-2-0
   and wins cleanly. */
.qty-stepper .qty-input {
  width: 2.5em;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--g-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper .qty-input::-webkit-inner-spin-button,
.qty-stepper .qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper .qty-input:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
}
.qty-stepper[aria-busy="true"] { opacity: 0.55; }

/* Cart item prices. The list price and the saving are shown per line, because the gateway
   the shopper picks moves both — see the payment group below. */
.cart-item-price { text-align: right; flex: none; }
.cart-item-row-total {
  font-size: 16px;
  font-weight: 500;
  color: var(--g-accent-text);
}
.cart-item-each {
  font-size: 12px;
  color: var(--g-muted);
  margin-top: 4px;
  white-space: nowrap;
}
.cart-item-was {
  text-decoration: line-through;
  color: var(--g-faint);
  margin-right: 4px;
}
.cart-item-saving {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--g-accent-text);
  margin-top: 3px;
  white-space: nowrap;
}
.cart-summary-saving {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--g-accent-text);
  font-weight: 500;
}

/* Cart delivery & payment. These were inline-styled fakes; now they are real controls. */
.cart-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin-bottom: 14px;
}
.cart-delivery { margin-top: 34px; }
.cart-delivery[aria-busy="true"] { opacity: 0.55; pointer-events: none; }

.choice-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.choice-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-md);
  background: var(--g-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.choice-option:hover { border-color: var(--g-accent-line); }
.choice-option--selected { border-color: var(--g-accent); box-shadow: 0 0 0 1px var(--g-accent); }
/* A real radio, sized and coloured rather than replaced by a decorative span. */
.choice-option input[type="radio"] {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  flex: none;
  accent-color: var(--g-accent);
  cursor: pointer;
}
.choice-option-body { display: block; min-width: 0; }
.choice-option-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--g-text);
  line-height: 1.4;
}
.choice-option-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--g-muted);
}

.cart-note {
  font-size: 12px;
  color: var(--g-muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* Remove is a button, not a link: it acts on the cart rather than navigating, and it has
   to POST. Styled to read as the quiet text control it replaced. */
.cart-remove-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--g-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.cart-remove-btn:hover {
  color: var(--g-text);
  text-decoration: underline;
}
/* Product Cover Zoom Button & Lightbox Modal */
.product-cover-zoom-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.product-cover-zoom-btn .cover-zoom-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--g-veil);
  color: var(--g-text);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.product-cover-zoom-btn:hover .cover-zoom-icon {
  opacity: 1;
  transform: scale(1.08);
}

.product-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
}
.product-thumb-btn {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.product-thumb-btn.active,
.product-thumb-btn:hover {
  border-color: var(--g-accent);
}
.product-thumb-item {
  width: 60px;
  height: 90px;
  object-fit: cover;
  display: block;
}

.product-author-link,
.product-publisher-link,
.spec-link {
  color: var(--g-accent-text);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.product-author-link:hover,
.product-publisher-link:hover,
.spec-link:hover {
  color: var(--g-accent);
  text-decoration: underline;
}

/* Nocturne Lightbox Backdrop Modal */
.nocturne-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.nocturne-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nocturne-modal-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.nocturne-modal-close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.nocturne-modal-close:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   Product Reviews
   ========================================================================== */

/* Five stars drawn as two stacked SVG rows; the top row is clipped to the rating, so a
   3.5 rating shows half a star instead of rounding. Markup in Magento_Review::stars.phtml. */
.rating-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
  flex: none;
}
.rating-stars-track {
  color: var(--g-line-strong2);
}
.rating-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--g-accent);
}
.rating-star {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: inline-block;
  vertical-align: top;
}

.product-reviews-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 13px;
}
.product-reviews-summary .rating-value {
  color: var(--g-soft);
  font-weight: 500;
}
.reviews-count-link {
  color: var(--g-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--g-line);
}
.reviews-count-link:hover {
  color: var(--g-accent);
  border-bottom-color: var(--g-accent-line);
}

.product-reviews-section {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--g-line);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .product-reviews-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.product-reviews-section:empty {
  display: none;
}

.review-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin-bottom: 16px;
}
.review-count-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--g-accent-tint);
  color: var(--g-accent-text);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 500;
}

/* Google reCAPTCHA, when it is switched on for reviews. The badge is a fixed-position
   iframe of Google's; only the inline widget needs room in the form. */
.review-form .field-recaptcha {
  margin-bottom: 14px;
}
.review-form .field-recaptcha > div {
  max-width: 100%;
  overflow-x: auto;
}

.review-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.review-item {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--g-line-3);
}
.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.review-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 7px;
}
.review-item-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--g-text);
}
.review-item-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--g-soft);
  max-width: 64ch;
}
.review-item-meta {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--g-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-item-author {
  color: var(--g-muted2);
  font-weight: 500;
}
.review-item-dot {
  color: var(--g-faint);
}
.review-pager {
  margin-top: 22px;
  font-size: 13px;
}
.review-pager .pages ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.review-pager .pages a,
.review-pager .pages strong {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g-line);
  color: var(--g-soft);
  text-decoration: none;
}
.review-pager .pages strong {
  background: var(--g-accent-tint);
  border-color: var(--g-accent-line);
  color: var(--g-accent-text);
}
.review-pager .pages a:hover {
  border-color: var(--g-accent-line);
  color: var(--g-accent);
}

.review-add {
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--g-surface);
  box-shadow: 0 0 0 1px var(--g-line-2);
}
.review-form-intro {
  font-size: 13px;
  color: var(--g-muted2);
  margin: 0 0 16px;
}
.review-form-intro strong {
  color: var(--g-text);
  font-weight: 500;
}
.review-field {
  margin-bottom: 14px;
}
.review-field-label {
  display: block;
  font-size: 12px;
  color: var(--g-muted2);
  margin-bottom: 5px;
}
.review-field input[type="text"],
.review-field textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--g-text);
  background: var(--g-surface-elevated);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-sm);
}
.review-field textarea {
  resize: vertical;
  line-height: 1.6;
}
.review-field input[type="text"]:focus,
.review-field textarea:focus {
  outline: none;
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-tint);
}

/* Star picker without JavaScript. The options are printed 5-to-1 and laid out
   row-reverse, so a star and everything visually left of it are the DOM siblings that
   follow the checked input — which is what `:checked ~ label` can reach. */
.rating-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 3px;
}
.rating-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rating-input label {
  cursor: pointer;
  color: var(--g-line-strong2);
  line-height: 0;
  padding: 2px;
  border-radius: var(--radius-xs);
}
.rating-input label .rating-star {
  width: 22px;
  height: 22px;
}
.rating-input .rating-input-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: var(--g-accent);
}
.rating-input input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--g-accent-tint);
}

.review-submit {
  padding: 8px 18px;
  font-size: 14px;
}
.review-form-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--g-muted);
}


/* ==========================================================================
   Cart Page
   ========================================================================== */

.cart-item-row {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--g-line-2);
}
.cart-thumb {
  width: 76px;
  height: 114px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}
.cart-summary-box {
  position: sticky;
  top: 118px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--g-surface);
  box-shadow: 0 0 0 1px var(--g-line-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.grantha-footer {
  border-top: 1px solid var(--g-line);
  padding: 30px 28px;
  font-size: 12.5px;
  color: var(--g-muted);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--g-bg);
}
.grantha-footer a {
  color: var(--g-muted);
}
.grantha-footer a:hover {
  color: var(--g-text);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1180px) {
  [data-r="detail"] {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  [data-r="detail"] > aside {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 1000px) {
  [data-r="split"], [data-r="sidebar"], [data-r="detail"], [data-r="cart"], [data-r="search"] {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-r] > aside {
    position: static;
    top: auto;
  }
  [data-r="sidebar"] > aside, [data-r="search"] > aside {
    order: 2;
  }
}

@media (max-width: 860px) {
  [data-page] {
    padding: 18px 16px 60px;
  }
  .hero-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .grantha-main-header {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 14px;
  }
  .grantha-search-box {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .grantha-topbar {
    padding: 6px 16px;
    font-size: 11px;
  }
  .grantha-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 16px;
  }
  .grantha-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 540px) {
  .header-actions a span:not(.header-cart-badge):not([data-account-name]) {
    display: none;
  }
  .header-actions {
    gap: 10px;
  }
  .catalog-page-container div[style*="grid-template-columns"],
  .block-content div[style*="grid-template-columns"],
  .products-grid .product-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
  }
}

/* ==========================================================================
   Nocturne Checkout Stylesheet (Magento 2 Onepage Checkout)
   ========================================================================== */
.checkout-index-index .page-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 20px 80px;
    box-sizing: border-box;
}

.checkout-index-index .page-title-wrapper {
    display: none;
}

.opc-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.opc-estimated-wrapper {
    display: none !important;
}

.checkout-container {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}

@media (max-width: 960px) {
    .checkout-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* ==========================================================================
   2. Progress Bar (Shipping / Review & Payments)
   ========================================================================== */
html body .opc-progress-bar,
.checkout-index-index .opc-progress-bar {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 35px auto !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
    counter-reset: none !important;
}

html body .opc-progress-bar-item,
html body .opc-progress-bar-item._active,
html body .opc-progress-bar-item._complete {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    flex: 1 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    text-align: center !important;
    background: none !important;
    cursor: pointer !important;
}

/* Horizontal connecting line between steps */
html body .opc-progress-bar-item:before {
    content: "" !important;
    position: absolute !important;
    top: 15px !important;
    left: -50% !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--g-line) !important;
    border-radius: 0 !important;
    z-index: 1 !important;
    margin: 0 !important;
    display: block !important;
}

html body .opc-progress-bar-item:first-child:before {
    display: none !important;
}

html body .opc-progress-bar-item._active:before,
html body .opc-progress-bar-item._complete:before {
    background: var(--g-accent) !important;
}

/* Clear all legacy pseudo-elements */
html body .opc-progress-bar-item:after,
html body .opc-progress-bar-item > span:before,
html body .opc-progress-bar-item > span:after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Step Badge Number */
html body .opc-step-badge {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    background: var(--g-card) !important;
    border: 2px solid var(--g-line) !important;
    color: var(--g-muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* Step Title Text */
html body .opc-step-title {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    margin-top: 8px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--g-muted2) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-break: normal !important;
    white-space: nowrap !important;
}

/* Active Step Styling */
html body .opc-progress-bar-item._active .opc-step-badge {
    background: var(--g-accent) !important;
    border-color: var(--g-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px var(--g-accent-soft) !important;
}

html body .opc-progress-bar-item._active .opc-step-title {
    color: var(--g-text) !important;
    font-weight: 700 !important;
}

/* Completed Step Styling */
html body .opc-progress-bar-item._complete .opc-step-badge {
    background: var(--g-card) !important;
    border-color: var(--g-accent) !important;
    color: var(--g-accent) !important;
}

html body .opc-progress-bar-item._complete .opc-step-title {
    color: var(--g-text) !important;
    font-weight: 600 !important;
}

.step-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 12px !important;
    margin: 0 0 24px 0 !important;
}

.checkout-shipping-address,
.checkout-shipping-method,
.checkout-payment-method {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.fieldset > .field {
    margin: 0 0 16px 0 !important;
}

.field .label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--g-soft2) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

.field.required > .label:after,
.field._required > .label:after {
    content: " *" !important;
    color: #e53e3e !important;
    font-weight: bold;
}

.control input.input-text,
.control input[type="text"],
.control input[type="email"],
.control input[type="password"],
.control input[type="tel"],
.control select,
.checkout-index-index input.input-text,
.checkout-index-index select {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: var(--g-text) !important;
    background: var(--g-bg) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.control input.input-text:focus,
.control input[type="text"]:focus,
.control input[type="email"]:focus,
.control select:focus,
.checkout-index-index input.input-text:focus,
.checkout-index-index select:focus {
    border-color: var(--g-accent) !important;
    box-shadow: 0 0 0 3px var(--g-accent-soft) !important;
    outline: none !important;
}

.table-checkout-shipping-method {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
}

.table-checkout-shipping-method tbody tr {
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
}

.table-checkout-shipping-method tbody tr:hover {
    background: var(--g-line-2) !important;
}

.table-checkout-shipping-method td {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    color: var(--g-text) !important;
    vertical-align: middle !important;
}

.table-checkout-shipping-method .col-price {
    font-weight: 600 !important;
    color: var(--g-text) !important;
    text-align: right !important;
}

.actions-toolbar {
    margin-top: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.actions-toolbar .action.primary.checkout,
.action.primary.checkout,
button.action.continue.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 28px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: #ffffff !important;
    background: var(--g-accent) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    text-decoration: none !important;
}

.actions-toolbar .action.primary.checkout:hover,
.action.primary.checkout:hover,
button.action.continue.primary:hover {
    background: var(--g-accent-hover) !important;
}

.opc-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: sticky !important;
    top: 90px !important;
}

.opc-block-summary {
    background: var(--g-card) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 8px !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;
}

.opc-block-summary > .title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    display: block !important;
}

.opc-block-summary .items-in-cart {
    border-bottom: 1px solid var(--g-line) !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
}

.opc-block-summary .items-in-cart > .title {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--g-muted2) !important;
    cursor: pointer !important;
}

.opc-block-summary .minicart-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
}

.opc-block-summary .product-item {
    display: flex !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--g-line-2) !important;
}

.opc-block-summary .product-image-container {
    width: 48px !important;
    height: 64px !important;
    flex: none !important;
}

.opc-block-summary .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid var(--g-line) !important;
}

.opc-block-summary .product-item-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--g-text) !important;
    line-height: 1.4 !important;
}

.opc-block-summary .product-item-details .price {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
}

.table-totals {
    width: 100% !important;
    border-collapse: collapse !important;
}

.table-totals th,
.table-totals td {
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--g-soft2) !important;
}

.table-totals td {
    text-align: right !important;
    color: var(--g-text) !important;
}

.table-totals .grand.totals th,
.table-totals .grand.totals td {
    padding-top: 14px !important;
    border-top: 1px solid var(--g-line) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--g-text) !important;
}

.table-totals .grand.totals td .price {
    color: var(--g-accent) !important;
}

.payment-group {
    margin-bottom: 16px !important;
}

.payment-method {
    border: 1px solid var(--g-line) !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    padding: 14px 16px !important;
    transition: border-color 0.15s ease !important;
}

.payment-method._active {
    border-color: var(--g-accent) !important;
    background: var(--g-card) !important;
}

.payment-method-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--g-text) !important;
    cursor: pointer !important;
}

.payment-method-content {
    padding-top: 14px !important;
    border-top: 1px solid var(--g-line-2) !important;
    margin-top: 12px !important;
}

.checkout-agreements {
    margin-top: 16px !important;
    font-size: 12.5px !important;
    color: var(--g-muted) !important;
}

/* ==========================================================================
   Catalog Toolbar, Pager & Search Results

   The toolbar, limiter, sorter and pager are core Magento markup driven by the
   productListToolbarForm widget. This theme removes Magento/blank's
   styles-m.css / styles-l.css, so none of it had any styling at all — the
   category and search pages were rendering bare selects and an unstyled run of
   page-number links.
   ========================================================================== */
.toolbar-products {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
  font-size: 13px;
  color: var(--g-muted2);
}
.toolbar-products .toolbar-amount {
  margin: 0;
  font-size: 13px;
  color: var(--g-muted);
}
.toolbar-products .toolbar-sorter,
.toolbar-products .field.limiter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.toolbar-products .sorter-label,
.toolbar-products .limiter-label,
.toolbar-products .limiter-text {
  font-size: 12px;
  color: var(--g-muted);
  white-space: nowrap;
}
.toolbar-products select {
  min-height: 0;
  padding: 6px 26px 6px 10px;
  font-size: 12.5px;
  color: var(--g-text);
  background-color: var(--g-surface);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.toolbar-products select:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 1px;
}

/* Sort direction toggle. Core ships the accessible name as a plain child span
   ("Set Ascending Direction") and expects the theme to swap it for an icon; with
   the blank stylesheets removed the words rendered at full length and overflowed
   the control, colliding with the Sort By select. The span is clipped rather than
   display:none so it still names the link for assistive tech, and the arrow is
   drawn from the sort-asc / sort-desc state class core already sets. */
.toolbar-products .sorter-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--g-muted);
  border: 1px solid var(--g-line-strong);
  overflow: hidden;
}
.toolbar-products .sorter-action > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.toolbar-products .sorter-action::before {
  font-size: 13px;
  line-height: 1;
}
.toolbar-products .sorter-action.sort-desc::before { content: "\2193"; }
.toolbar-products .sorter-action.sort-asc::before  { content: "\2191"; }
.toolbar-products .sorter-action:hover {
  color: var(--g-text);
  border-color: var(--g-accent-line);
}
.toolbar-products .sorter-action:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 1px;
}

/* Bottom toolbar carries the pager, so give it room and a rule above. */
.toolbar-products ~ .toolbar-products,
.products ~ .toolbar-products {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--g-line);
  justify-content: space-between;
}

/* Pager */
.pages .pages-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pages .item {
  margin: 0;
}
.pages .page,
.pages .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--g-soft2);
}
.pages .page:hover,
.pages .action:hover {
  color: var(--g-text);
  border-color: var(--g-line-strong);
}
.pages .item.current .page {
  color: var(--g-accent-text);
  border-color: var(--g-accent-line);
  background: var(--g-surface);
  font-weight: 500;
}
/* Core hides the word "Page" behind .label for screen readers; keep that. */
.pages .label,
.pages .item.current .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Core's next/previous markup is <span class="label">Page</span><span>Next</span>
   — the "Page" span is screen-reader context, not a visible word. Un-hiding it
   rendered the control as "PageNext", so it stays clipped like the others. */
.pages .action.next,
.pages .action.previous {
  font-weight: 500;
  color: var(--g-accent-text);
}

/* Search results heading */
.search-results-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 20px;
}
.search-results-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.search-results-count {
  font-size: 13px;
  color: var(--g-muted);
}
.search-results-empty {
  padding: 44px 0;
  text-align: center;
  color: var(--g-muted2);
}
.search-results-empty p {
  margin: 0 0 8px;
}
.search-results-empty-hint {
  font-size: 13px;
  color: var(--g-muted);
  margin-bottom: 20px !important;
}

/* Catalog header bar: title, count, then the toolbar pushed right. On search the
   title and count are suppressed (see list.phtml) so the toolbar is all there is. */
.catalog-header-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.catalog-header-count {
  font-size: 13px;
  color: var(--g-muted);
}
.catalog-header-toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.catalog-header-bar--toolbar-only {
  padding-bottom: 12px;
}
.catalog-header-bar--toolbar-only .catalog-header-toolbar {
  margin-left: 0;
  width: 100%;
}
.catalog-header-bar--toolbar-only .toolbar-products {
  width: 100%;
  justify-content: space-between;
}
.catalog-toolbar-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--g-line);
}
.catalog-toolbar-bottom .toolbar-products {
  justify-content: space-between;
}

/* Base-theme Product Listing Fallback (Widget & Core Grid Styling) */
.products-grid .product-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 24px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.products-grid .product-item {
  display: flex;
  flex-direction: column;
}
.products-grid .product-item-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--g-text);
  text-decoration: none;
  transition: transform var(--transition-fast);
}
.products-grid .product-item-info:hover {
  transform: translateY(-2px);
}
.products-grid .product-item-photo {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--g-cover-bg);
  box-shadow: 0 0 0 1px var(--g-line-2);
}
.products-grid .product-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.products-grid .product-item-name {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--g-text);
  margin: 0;
}
.products-grid .product-item-name a {
  color: var(--g-text);
  text-decoration: none;
}
.products-grid .product-item-name a:hover {
  color: var(--g-accent);
}
.products-grid .price-box {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.price-box .price-label,
.products-grid .price-label {
  display: none !important;
}
.products-grid .price-box .price,
.products-grid .price-box .special-price .price,
.products-grid .price-box .regular-price .price {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g-accent-text);
}
.products-grid .price-box .old-price .price {
  font-size: 11.5px;
  color: var(--g-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Core & Widget Action Buttons Fallback */
.products-grid .product-item-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.products-grid .action.tocart,
.products-grid .action.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--g-accent-line);
  border-radius: var(--radius-md);
  background: var(--g-accent-tint);
  color: var(--g-accent-text);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.products-grid .action.tocart:hover,
.products-grid .action.primary:hover {
  background: var(--g-accent);
  color: #ffffff;
}
.products-grid .actions-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.products-grid .action.towishlist {
  font-size: 11.5px;
  color: var(--g-muted2);
  text-decoration: none;
}
.products-grid .action.towishlist:hover {
  color: var(--g-accent);
}
.products-grid .action.tocompare {
  display: none !important;
}


/* ==========================================================================
   Trending Bump Chart (Magento_Cms::home/trending-graph.phtml)

   Rank movement for the currently trending books. The SVG carries no colours of its own —
   each series gets --series-color from the palette below, which is what keeps a line and its
   legend row in agreement without the template hardcoding hex values twice.
   ========================================================================== */

/* Trending / Best selling switcher */
.trending-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trending-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md, 8px);
  background: var(--g-hover);
  border: 1px solid var(--g-line-2);
}
.trending-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--g-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.trending-tab:hover {
  color: var(--g-text);
}
.trending-tab.is-active {
  background: var(--g-surface);
  color: var(--g-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.trending-tab:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 1px;
}
.trending-panel-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}
.trending-panel-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--g-faint);
}
.trending-panel-disclaimer {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--g-muted);
}

/* A day the book could not be bought. The rank is unchanged — it really did sell less — so
   this marks the reason rather than correcting the line. */
.trending-line.is-out-of-stock {
  stroke-dasharray: 4 4;
  opacity: 0.75;
}
.trending-dot.is-out-of-stock {
  fill: var(--g-surface);
  stroke: var(--series-color);
  stroke-width: 1.6;
}
.trending-peek-stock {
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
}

.trending-graph {
  /* Twelve, because the chart shows twelve books and a repeated colour is two books the
     reader cannot tell apart. Hues are spread around the wheel rather than taken in palette
     order — the four added to the original eight fill its widest gaps (lime between amber and
     green, blue between sky and indigo, fuchsia between purple and pink, orange beside red).
     All sit at a similar lightness so no line disappears in either theme. */
  --trending-series-0: #6366f1;
  --trending-series-1: #14b8a6;
  --trending-series-2: #f59e0b;
  --trending-series-3: #ec4899;
  --trending-series-4: #22c55e;
  --trending-series-5: #a855f7;
  --trending-series-6: #ef4444;
  --trending-series-7: #0ea5e9;
  --trending-series-8: #84cc16;
  --trending-series-9: #3b82f6;
  --trending-series-10: #d946ef;
  --trending-series-11: #f97316;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trending-graph-plot {
  position: relative;
  border: 1px solid var(--g-line-2);
  border-radius: var(--radius-md, 8px);
  background: var(--g-surface);
  padding: 10px 6px 4px;
}
.trending-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.trending-grid line {
  stroke: var(--g-line-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
/* Sized in viewBox units, not pixels: the SVG is ~600px wide in the desktop split column and
   ~330px on a phone, so these are scaled down by roughly half and a third respectively. 9 units
   landed at four illegible pixels on mobile. */
.trending-grid-label,
.trending-tick-label {
  fill: var(--g-faint);
  font-size: 12px;
  font-family: var(--font-body, inherit);
}

.trending-series {
  cursor: pointer;
  outline: none;
}
.trending-line {
  fill: none;
  stroke: var(--series-color);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width var(--transition-fast), opacity var(--transition-fast);
}
/* Invisible, twelve units wide: the pointer target for a two-pixel line. */
.trending-line-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trending-dot {
  fill: var(--series-color);
  stroke: var(--g-surface);
  stroke-width: 1.5;
  transition: r var(--transition-fast);
}

/* Hovering one book fades the rest rather than highlighting the one — with eight lines
   crossing, dimming the noise is the only thing that actually isolates a path. */
.trending-graph.is-focused .trending-series {
  opacity: 0.18;
}
.trending-graph.is-focused .trending-series.is-active {
  opacity: 1;
}
.trending-series.is-active .trending-line {
  stroke-width: 3.4;
}
.trending-series:focus-visible .trending-line {
  stroke-width: 3.4;
}
.trending-series:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 2px;
}

/* Legend */
.trending-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
}
.trending-legend-item {
  position: relative;
  min-width: 0;
}
.trending-legend-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: var(--radius-sm, 6px);
  color: var(--g-text);
  text-decoration: none;
  min-width: 0;
}
.trending-legend-item.is-active .trending-legend-link,
.trending-legend-link:hover {
  background: var(--g-hover);
  color: var(--g-text);
}
.trending-legend-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--g-muted2);
  width: 26px;
  flex: none;
}
.trending-legend-swatch {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--series-color);
  flex: none;
}
.trending-legend-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.trending-legend-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-legend-author {
  font-size: 11.5px;
  color: var(--g-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-legend-move {
  font-size: 11px;
  font-weight: 600;
  flex: none;
  letter-spacing: 0.3px;
}
.trending-legend-move.is-up {
  color: #22c55e;
}
.trending-legend-move.is-down {
  color: var(--g-muted);
}
.trending-legend-move.is-flat {
  color: var(--g-faint);
}
.trending-legend-move.is-new {
  color: var(--g-accent-text);
}

/* The cover, held back until the reader asks for it. Positioned over the legend rather than
   over the plot so it never covers the line it is describing. */
.trending-peek {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  width: max-content;
  max-width: 260px;
  padding: 10px;
  background: var(--g-surface-2, var(--g-surface));
  border: 1px solid var(--g-line-2);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* `display: flex` above outranks the user-agent `[hidden] { display: none }`, so without this
   every cover shows at once and buries the legend it is anchored to. */
.trending-peek[hidden] {
  display: none;
}
.trending-peek img {
  width: 72px;
  height: 108px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--g-cover-bg);
  flex: none;
}
.trending-peek-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.trending-peek-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.trending-peek-meta {
  font-size: 11.5px;
  color: var(--g-muted);
}
.trending-peek-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--g-accent-text);
}
.trending-peek-stat {
  font-size: 11px;
  color: var(--g-faint);
  line-height: 1.35;
}

@media (max-width: 860px) {
  .trending-legend {
    grid-template-columns: minmax(0, 1fr);
  }
  .trending-graph-plot {
    padding: 8px 4px 2px;
  }
  /* The whole viewBox shrinks to about a third on a phone, so the axis text has to grow to
     stay readable. No min-height here: the SVG scales uniformly, and forcing a height the
     viewBox ratio does not match just letterboxes the plot. */
  .trending-grid-label,
  .trending-tick-label {
    font-size: 18px;
  }
  .trending-peek {
    left: auto;
    right: 0;
    max-width: min(280px, calc(100vw - 48px));
  }
}