/* ==========================================================================
   Client review round — loaded last so these corrections win the cascade.
   ========================================================================== */

/* The markup used .sr-only for the sort <label>, but the utility was never
   defined, so "Sort by" rendered as visible text pressed against the dropdown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.collection-toolbar .toolbar-left {
  gap: 18px;
}

.sort-select-wrapper .collection-sort-dropdown {
  min-height: 38px;
  padding: 0 34px 0 12px;
}

/* --------------------------------------------------------------------------
   Header: one search box on desktop, centred action labels
   -------------------------------------------------------------------------- */

.pro-site-header .nav-actions .icon-button,
.pro-site-header .cart-nav-button {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

/* The full search row is already visible from 768px up, so the icon trigger
   beside the cart was a second, redundant search entry point. Scoped to
   desktop: below 768px the search row is hidden and this button is the only
   way to search, so it must stay. The tag qualifier outranks the
   .icon-button rule above, which is !important. */
@media (min-width: 768px) {
  .pro-site-header .nav-actions button.pro-search-trigger {
    display: none !important;
  }
}

.pro-site-header .nav-actions .icon-button::after,
.pro-site-header .cart-nav-button::after {
  margin-left: 0;
  line-height: 1;
}

/* The category select sat at 1px while the adjoining search field was 1.5px, so
   the two halves of the control never met and the outline looked broken. */
.pro-header-search-inner .pro-category-select {
  border-width: 1.5px;
  border-right: 0;
  padding-right: 12px;
  gap: 16px;
}

.pro-header-search-inner .pro-category-select svg {
  flex: 0 0 auto;
  margin-right: 2px;
}

/* --------------------------------------------------------------------------
   Black header with the white wordmark.
   Earlier sheets paint every strip white with !important, so each surface is
   restated here rather than relying on a single parent background.
   -------------------------------------------------------------------------- */
header.site-header,
.site-header,
.pro-site-header {
  background: #0A0A0A !important;
  border-bottom: 1px solid #262626 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
}

.site-header .nav-row,
.site-header .main-nav,
.pro-site-header .pro-header-main {
  background: #0A0A0A !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pro-header-top {
  background: #000000 !important;
  border-bottom: 1px solid #1F1F1F !important;
  color: #E4E4E7 !important;
}

.pro-header-contact a,
.pro-header-services a,
.pro-currency-pill {
  color: #D4D4D8 !important;
}

.pro-header-contact a:hover,
.pro-header-services a:hover {
  color: #FFFFFF !important;
}

.pro-currency-pill {
  border-color: #3F3F46 !important;
}

.pro-site-header .header-utilities button,
.pro-site-header .nav-actions .icon-button,
.pro-site-header .cart-nav-button,
.pro-site-header .nav-actions .pro-search-trigger {
  color: #FFFFFF !important;
}

.pro-site-header .nav-support-pill {
  border-color: #3F3F46 !important;
  background: transparent !important;
  color: #FFFFFF !important;
}

.pro-site-header .nav-support-pill:hover {
  border-color: #FFFFFF !important;
}

.pro-header-search-row {
  background: #0A0A0A !important;
}

/* The search control itself stays light so the field reads as an input, and
   keeps the border it shares with the search box (see the join fix above). */

.pro-site-header .main-nav > a,
.pro-site-header .main-nav .mega-trigger > a {
  color: #FFFFFF !important;
}

/* Cart and wishlist counts as a corner badge over the icon. The cart count had
   no styling at all, so it rendered as loose text beside the label. */
.pro-site-header .cart-nav-button,
.pro-site-header .wishlist-nav {
  position: relative;
}

.pro-site-header .cart-nav-button > span,
.pro-site-header .wishlist-nav > span {
  position: absolute;
  top: -2px;
  left: calc(50% + 2px);
  right: auto;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border: 2px solid #0A0A0A;
  border-radius: 999px;
  background: #D50012;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Home: category strip is scrollable on desktop too
   -------------------------------------------------------------------------- */
.wooden-bubble-shell {
  position: relative;
}

.wooden-bubble-arrow {
  position: absolute;
  top: 34px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--industrial-border, #e4e4e7);
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  transition: opacity 150ms ease, background 150ms ease;
}

.wooden-bubble-arrow.prev { left: -6px; }
.wooden-bubble-arrow.next { right: -6px; }

.wooden-bubble-arrow:hover {
  background: #111111;
  color: #ffffff;
}

.wooden-bubble-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .wooden-bubble-arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Product card: roomier stock pill, tighter vertical rhythm
   -------------------------------------------------------------------------- */

/* .stock-in inherits a green background from the PDP badge rules but had no
   padding of its own, so the fill hugged the text. */
.product-stock-line .stock-in,
.product-stock-line .stock-out {
  padding: 3px 9px;
  border-radius: 99px;
  line-height: 1.35;
}

.product-stock-line .stock-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
}

.product-card .price-row {
  margin-bottom: 2px;
}

.product-card .product-stock-line {
  margin-top: 6px;
  margin-bottom: 6px;
}

.product-card .product-title-link h3 {
  margin-bottom: 4px;
}

.product-grid,
.wooden-products-grid {
  gap: 20px 14px;
}

/* --------------------------------------------------------------------------
   Cart & coupons
   -------------------------------------------------------------------------- */
.coupon-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 8px 11px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
}

.coupon-error svg {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Contact page: icon centred on the label line only, not the whole block
   -------------------------------------------------------------------------- */
.contact-detail-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.contact-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-detail-head .contact-detail-icon {
  margin-top: 0;
}

.contact-detail-row strong {
  margin: 0;
}

.contact-detail-body {
  padding-left: 30px;
}

/* Contact form: native select arrow was hugging the field's right border */
.checkout-form select {
  padding-right: 36px;
}

/* --------------------------------------------------------------------------
   Header: logo truly centred regardless of how wide either flank is, and a
   touch bolder since it's a flat white PNG wordmark (faux-bold via stacked
   drop-shadows rather than any real font weight).
   -------------------------------------------------------------------------- */
.pro-site-header .brand {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  grid-column: auto !important;
}

.screwnet-brand-img {
  filter:
    drop-shadow(0.5px 0 0 currentColor)
    drop-shadow(-0.5px 0 0 currentColor)
    drop-shadow(0 0.5px 0 currentColor)
    drop-shadow(0 -0.5px 0 currentColor);
  color: #ffffff;
}

/* Header search row: give the bar a clean closing edge against the page below */
.pro-header-search-row {
  border-bottom: 1px solid #e4e4e7;
}

/* --------------------------------------------------------------------------
   Account: icon and field text must not crowd each other
   -------------------------------------------------------------------------- */
.input-with-icon .field-icon {
  left: 13px !important;
  width: 17px;
  height: 17px;
  color: #64748b !important;
}

.input-with-icon input {
  padding-left: 42px !important;
  padding-right: 44px !important;
  letter-spacing: 0.01em;
}

.input-with-icon input[type="password"] {
  letter-spacing: 0.14em;
}

/* --------------------------------------------------------------------------
   About: centred value cards
   -------------------------------------------------------------------------- */
.values-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.values-grid > div > svg {
  width: 28px;
  height: 28px;
}

.values-grid h3,
.values-grid p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer: the pin icon belongs in front of the first address line, and the
   payment marks should sit on the same baseline as the ISO label.
   -------------------------------------------------------------------------- */
.footer-location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.footer-location svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.footer-column.contact-column a,
.footer-column.contact-column span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* storefront-polish.css sets word-break: break-all on every contact-column
   link, which also caught the plain-text address and could strand a single
   character ("R...ajasthan") on its own line. */
.footer-column.contact-column a {
  word-break: normal;
  overflow-wrap: break-word;
}

.footer-column.contact-column svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.developer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.developer-credit img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.developer-credit span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}