/* ============================================================
   SACAR MART — BASE
   Part of the split style.css (see index.html for load order).
   Split preserves the exact original rule order — cascade/
   specificity behavior is unchanged from the single-file version.
   ============================================================ */
:root {
  --primary-color: #1a365d;
  --primary-color-hover: #14294a;
  --accent-color: #3182ce;
  --accent-color-hover: #2b6cb0;
  --success-color: #2ecc71;
  --success-color-hover: #27ae60;
  --danger-color: #e53e3e;
  --danger-color-hover: #c53030;
  --warning-color: #f6ad55;
  --text-color: #2d3748;
  --text-muted: #718096;
  --light-bg: #f7fafc;
  --border-color: #e2e8f0;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 10px rgba(26, 54, 93, 0.07);
  --card-shadow-hover: 0 10px 25px rgba(26, 54, 93, 0.12);
  --header-bg: #ffffff;
  --overlay-bg: rgba(15, 23, 42, 0.55);
  --input-bg: #ffffff;
}
[data-theme="dark"] {
  --primary-color: #63b3ed;
  --primary-color-hover: #90cdf4;
  --accent-color: #4dabf7;
  --accent-color-hover: #74c0fc;
  --success-color: #48bb78;
  --success-color-hover: #38a169;
  --danger-color: #fc8181;
  --danger-color-hover: #f56565;
  --warning-color: #f6ad55;
  --text-color: #e2e8f0;
  --text-muted: #a0aec0;
  --light-bg: #0f1621;
  --border-color: #2d3748;
  --card-bg: #1a2332;
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.5);
  --header-bg: #151d2b;
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --input-bg: #0f1621;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}
html, body {
  min-height: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
body {
  background-color: var(--light-bg);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.main-content {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}
.footer-area {
  flex-shrink: 0;
}
.top-promo {
  background-color: #1a365d;
  color: #fff;
  text-align: center;
  padding: 8px 10px;
  font-size: 14px;
}
.main-header {
  background: var(--header-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--border-color);
}
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}
.brand-section {
  display: flex;
  align-items: center;
  gap: 15px;
}
.menu-toggle-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--accent-color);
}
.logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo span {
  color: var(--accent-color);
}
.header-logo-icon {
  width: 30px;
  height: auto;
  flex-shrink: 0;
}
.search-bar-container {
  flex: 1;
  max-width: 450px;
  margin: 0 20px;
  display: flex;
}
.search-overlay-back-btn {
  display: none; /* only shown while the mobile compact-search overlay is open */
}
.search-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
}
.search-bar-container input {
  width: 100%;
  padding: 10px 34px 10px 15px;
  border: 1px solid var(--border-color);
  border-radius: 6px 0 0 6px;
  outline: none;
  background: var(--light-bg);
  color: var(--text-color);
}
.search-clear-btn {
  display: none;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  opacity: 0.55;
  cursor: pointer;
  font-size: 13px;
  padding: 6px;
  line-height: 1;
}
.search-clear-btn:hover {
  opacity: 1;
}
.search-clear-btn.visible {
  display: block;
}
.search-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
}
/* Compact search-icon trigger for the mobile product-listing context — hidden
   everywhere else (see the mobile media query below, which is the only place
   it's ever revealed). */
.mobile-search-trigger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--accent-color);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}
.selectors-box {
  display: flex;
  gap: 5px;
}
.selectors-box select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--light-bg);
  color: var(--text-color);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.nav-icon-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--accent-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.cart-count {
  background: #e53e3e;
  color: white;
  font-size: 11px;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  top: -8px;
  right: -8px;
}
.mobile-lang-toggle-btn,
.mobile-theme-toggle-btn {
  display: none;
  background: var(--light-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-lang-toggle-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
}
.mobile-theme-toggle-btn {
  width: 32px;
  height: 32px;
  font-size: 15px;
  padding: 0;
}
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
@media (max-width: 700px) {
  .header-container {
    flex-wrap: wrap;
    padding: 10px 14px;
  }
  .brand-section { order: 1; }
  .header-actions { order: 2; gap: 8px; }
  .search-bar-container {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    margin: 10px 0 0;
  }
  .logo { font-size: 18px; gap: 6px; }
  .header-logo-icon { width: 24px; }
  .selectors-box { display: none; }
  .mobile-lang-toggle-btn,
  .mobile-theme-toggle-btn {
    display: flex;
  }
  .user-status-box span {
    display: none;
  }
  /* Mobile header login control: both logged-in (.user-status-box, name
     hidden above) and logged-out (#auth-status-area .btn-text, "Login"
     text) show only the icon — keeps the small header row from overflowing.
     Desktop/laptop keeps the existing text in both states, untouched. */
  #auth-status-area .btn-text {
    display: none;
  }

  /* Mobile — ALL pages: the full search bar is replaced by a compact icon;
     tapping it smoothly expands the same bar (transform/opacity only, so it's
     compositor-driven and cheap) into a normal, directly-interactive floating
     element that sits right below the header and above Category/Subcategory —
     not a blocking modal, so there's no full-page backdrop and the rest of
     the page stays usable. Reuses the exact same #store-search input — no
     duplicate search logic. See openMobileSearchOverlay()/closeMobileSearchOverlay()
     in script.js. */
  .mobile-search-trigger-btn {
    display: flex;
    order: 2;
  }
  .search-bar-container {
    position: fixed;
    top: var(--header-height, 92px);
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    padding: 10px 14px;
    background: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    align-items: center;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
  }
  .search-bar-container.mobile-search-overlay-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0s;
  }
  /* .main-header itself sets position+z-index, which makes it its own
     stacking context — so a high z-index on the search bar (its descendant)
     only wins locally within that context, never against page-level
     siblings like the Category/Subcategory rows. Bumping the header's own
     z-index while the overlay is open is what actually raises it above
     them; reverts the instant the overlay closes. */
  body.mobile-search-overlay-open .main-header {
    z-index: 1005;
  }
  .search-bar-container.mobile-search-overlay-active .search-overlay-back-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-color);
    padding: 6px 10px 6px 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Mobile, outside the true Home dashboard (category/subcategory page,
     search results, all-categories page, profile, checkout, etc.) — trims
     vertical space: the "Popular Categories" heading above the always-present
     category chip row is dropped (chips themselves stay), and the footer is
     reduced to just its minimal bottom copyright line. Home dashboard is
     untouched. Product Page is also excluded from the footer trim — it
     shows the exact same full Home Page footer, per its own requirement —
     while every other non-home page keeps the trimmed footer as before.
     See updateMobilePageContextClasses() in script.js. */
  body.mobile-non-home-page #popular-cat-title {
    display: none;
  }
  body.mobile-non-home-page:not(.product-page-active) .footer-grid {
    display: none;
  }

  /* Fix: on mobile the Subcategory row's scroll strip sits inside an extra
     flex row (sort/offer buttons + the chip strip), which — unlike the
     Category row's simpler block-level wrapper — needs an explicit
     shrink target or flexbox refuses to shrink it below its content's
     full width. Without this the strip silently overflows the screen
     instead of scrolling internally, so touch-drag never engages. */
  .sub-category-wrapper .chip-scroll-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Same fix as the Sub Category row above, applied to the Micro Category
     row now that its "All" chip is a fixed sibling next to the scroll
     strip instead of living inside it. */
  .micro-category-wrapper .chip-scroll-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--card-bg);
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  transform: translateX(-100%);
  padding: 20px;
  color: var(--text-color);
}
.sidebar.active {
  transform: translateX(0);
}
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.close-sidebar-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-color);
}
.category-list {
  list-style: none;
}
.category-list li {
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}
.category-list li:hover {
  background-color: var(--light-bg);
  color: var(--accent-color);
}
.hero-banner {
  background: linear-gradient(rgba(26, 54, 93, 0.85), rgba(49, 130, 206, 0.85)), url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?auto=format&fit=crop&w=1200&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.category-showcase {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;

  position: sticky;
  top: var(--header-height, 92px);
  z-index: 998;
  background: var(--light-bg);
  border-bottom: 1px solid var(--border-color);
}

/* TASK 1 fix: "Popular Categories" heading removed everywhere (mobile,
   tablet, desktop). The chip row below it (category buttons) is untouched
   and keeps working exactly as before. */
#popular-cat-title {
  display: none;
}

.chip-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.chip-scroll-wrapper .category-scroll-container,
.chip-scroll-wrapper .sub-category-scroll,
.chip-scroll-wrapper .micro-category-scroll {
  cursor: grab;
  scroll-behavior: smooth;
}
.chip-scroll-wrapper .category-scroll-container.chip-dragging,
.chip-scroll-wrapper .sub-category-scroll.chip-dragging,
.chip-scroll-wrapper .micro-category-scroll.chip-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.chip-scroll-arrow {
  display: none;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: var(--card-shadow);
  z-index: 2;
}
.chip-scroll-arrow:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}
/* Applied via JS once the row's actual scroll state shows there's nothing
   left to scroll to in that direction — keeps arrows from showing on rows
   that already fit entirely on screen. */
.chip-scroll-arrow.chip-arrow-hidden {
  display: none !important;
}
@media (min-width: 701px) {
  .chip-scroll-arrow {
    display: flex;
  }
  .chip-scroll-arrow-left { margin-right: 6px; }
  .chip-scroll-arrow-right { margin-left: 6px; }
}

.category-scroll-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
  /* No edge fading/gradient of any kind (mask, shadow, or pseudo-element) —
     explicit reset so nothing renders here regardless of source. Scrolling,
     spacing, and positioning above are all unchanged. */
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
  background-image: none;
}
.category-scroll-container::before,
.category-scroll-container::after,
.chip-scroll-wrapper::before,
.chip-scroll-wrapper::after {
  content: none;
  display: none;
}
.chip {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 8px 18px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s;
  color: var(--text-color);
}
.chip.active, .chip:hover {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}
.products-showcase {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}
.section-title {
  margin-bottom: 20px;
  color: var(--primary-color);
  border-left: 4px solid var(--accent-color);
  padding-left: 10px;
}
.title11 {margin-bottom: 0; text-align: center; border-left: none; padding-left: 0;}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}
@media (max-width: 600px) {
  .products-showcase { padding: 0 12px; }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.loader-spinner {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  font-size: 16px;
  color: #718096;
}
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px; /* 15px; smc*/
  text-align: start; /*center; smc*/
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-start /*space-between; smc*/
}
.product-card:hover {
  /*transform: translateY(-5px); smc*/
  opacity: .8; /* new smc*/
  box-shadow: var(--card-shadow-hover);
}
/* Fixed image boundary — every product's image is contained (never
   stretched/cropped) inside this same fixed-height box regardless of its
   own dimensions, so the box itself never resizes the card. The offer
   badge and the qty control both live inside it as absolute overlays
   (see .discount-badge and .pc-qty-plus-btn/.pc-qty-control below), so
   neither ever claims separate space in the card's normal flow. */
.pc-image-box {
  position: relative;
  width: 100%;
  height: 160px; /* 40px; smc*/
  border-radius: 8px;
  overflow: hidden;
  background: var(--card-bg); /* var(--light-bg); smc*/
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; /* 12px; smc*/
}
.pc-image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.product-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  /*min-height: 40px;
  margin-bottom: 8px; smc*/
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 700px) {
  /* Mobile only — slightly lighter product-name size so card titles feel
     less heavy; desktop/laptop sizing above is untouched. Height, wrapping,
     price, badge, and button areas are unaffected. */
  .product-card h4 {
    font-size: 13.5px;
    font-weight: 500; /* new smc*/
  }
  /* Mobile only — top Welcome Bar hidden entirely; Desktop/Laptop keeps it, untouched. */
  .top-promo {
    display: none;
  }
  /* Mobile only — Hero Banner scaled down to ~75% of its original height;
     Desktop/Laptop padding above is untouched. */
  .hero-banner {
    padding: 34px 20px;
  }
}
.price-box {
  /*margin-bottom: 8px; smc*/
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  /*border: 1px solid blue; new for test smc*/
}
.price-points-inline {
  font-size: 11px;
  font-weight: 700;
  color: #d69e2e;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.original-price {
  font-size: 13px;
  color: #a0aec0;
  text-decoration: line-through;
  margin-right: 5px;
  white-space: nowrap;
}
.current-price {
  color: var(--accent-color);
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
}
.product-points {
  font-size: 12px;
  color: #dd6b20;
  margin-bottom: 12px;
  font-weight: 500;
}
.order-btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
}
.order-btn:hover {
  background-color: var(--primary-color);
}

/* ============================================================
   PRODUCT-CARD QTY CONTROL — bottom-right overlay on .pc-image-box
   Replaces the old below-image, in-flow action row for cards specifically
   (the cart drawer and the product-detail hero panel keep their separate,
   unchanged styles — see 'compact'/'detail' variants in script.js).
   Two states: a small circular "+" (not yet in cart, or minimized after a
   few seconds of inactivity — see expandCardQtyControl()), and a compact
   minus/qty/plus pill while actively being adjusted. Neither ever affects
   the card's own width/height since both are absolutely positioned inside
   the fixed image boundary.
   ============================================================ */
.pc-image-box .card-action-area {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: auto;
  margin: 0;
  z-index: 6;
}
.pc-qty-plus-btn,
.pc-qty-indicator-btn {
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
  /* Both the "+" and the collapsed-number states animate in/out the same
     way the expanded pill does (see .pc-qty-control below), so switching
     between any of the three states is always a smooth fade+scale, never
     an abrupt swap. */
  animation: pcQtyPop 0.18s ease;
}
/* Default state — quantity is 0, nothing added yet. Unchanged from before. */
.pc-qty-plus-btn {
  background: linear-gradient(145deg, #fff, #2b6cb0); /* #4299e1, #2b6cb0) smc*/
}
.pc-qty-plus-btn:hover,
.pc-qty-indicator-btn:hover {
  transform: scale(1.08);
}
.pc-qty-plus-btn:active,
.pc-qty-indicator-btn:active {
  transform: scale(0.9);
}
.pc-qty-plus-btn:disabled,
.pc-qty-plus-btn.pc-qty-disabled {
  background: #a0aec0;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
/* Collapsed quantity indicator — shown once qty > 0 (instead of "+"), with
   its own distinct green "added to cart" color (not the same blue as "+")
   plus a subtle white ring, so it reads at a glance while scrolling that
   this product already has items added — the number itself is unchanged,
   tapping it still just reopens the full row without altering the quantity.
   Slightly smaller font so 2-3 digit counts (e.g. "100") still fit
   comfortably inside the circle. */
.pc-qty-indicator-btn {
  background: linear-gradient(145deg, #ff8a3d, #e85d2c); /* #48bb78, #2f855a); smc*/
  border: 2px solid rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}
.pc-qty-control {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  padding: 3px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  /* Anchored to the right (where the collapsed circle sits) so opening
     visibly grows/slides out leftward from that spot, instead of just
     popping into existence — see .pc-qty-collapsing below for the
     matching reverse animation on the way back in. */
  transform-origin: right center;
  animation: pcQtyExpand 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Added by playCardQtyCollapseAnimation() right before the JS swaps this
   pill back to the collapsed circle (after PC_QTY_COLLAPSE_ANIM_MS) — a
   quick reverse slide-in-to-the-circle instead of an abrupt disappearance.
   Duration here must stay in sync with PC_QTY_COLLAPSE_ANIM_MS in script.js. */
.pc-qty-control.pc-qty-collapsing {
  animation: pcQtyCollapse 0.58s ease forwards; /* 0.18s smc*/
}
@keyframes pcQtyExpand {
  from { opacity: 0; transform: scaleX(0.35) scaleY(0.75); }
  to { opacity: 1; transform: scaleX(1) scaleY(1); }
}
@keyframes pcQtyCollapse {
  from { opacity: 1; transform: scaleX(1) scaleY(1); }
  to { opacity: 0; transform: scaleX(0.35) scaleY(0.75); }
}
@keyframes pcQtyPop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.pc-qty-round-btn {
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  flex-shrink: 0;
}
.pc-qty-round-btn.plus {
  background: linear-gradient(145deg, #4299e1, #2b6cb0);
}
.pc-qty-round-btn.minus,
.pc-qty-round-btn.danger {
  background: linear-gradient(145deg, #fc8181, #e53e3e);
}
.pc-qty-round-btn:active {
  transform: scale(0.88);
}
/* Manual quantity input inside the overlay pill — wide enough to show 3
   digits comfortably (and 4 without clipping), per spec; the surrounding
   .pc-qty-control pill and its parent .pc-image-box both just grow to fit,
   never the other way around, so the card's own boundary never resizes. */
input.pc-qty-value.qty-manual-input {
  width: 3.6ch;
  max-width: 46px;
  min-width: 34px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 0;
  margin: 0 1px;
  border: none;
  background: transparent;
  color: #1a202c;
}