/* ================================
   PRESSLEY PAPER CO - CUSTOM CSS
   1) Category icon hover
   2) Hide price elements for guests (via hide_tag_element/show_tag_element)
   3) Quantity control styling (scoped so it won't break buttons)
   ================================ */


/* --- 1) CATEGORY ICON HOVER (SAFE) --- */
.zcs_slider_row_88 .zpelem-image,
.zcs_slider_row_88 img{
  transition: transform 0.18s ease, filter 0.18s ease;
}

.zcs_slider_row_88 .zpelem-col:hover .zpelem-image,
.zcs_slider_row_88 .zpelem-col:hover img{
  transform: translateY(-4px);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.10));
}

.zcs_slider_row_88 .zpelem-col:hover{ cursor: pointer; }

.zcs_slider_row_88 .zpelem-col:hover .zpelem-text,
.zcs_slider_row_88 .zpelem-col:hover p,
.zcs_slider_row_88 .zpelem-col:hover a{
  color: rgba(74, 58, 43, 1) !important;
}


/* --- 2) HIDE/SHOW TAG ELEMENTS (USED BY YOUR HEADER SCRIPT) --- */
.hide_tag_element,
.hide_tag_element *,
[hide_tag_element],
[hide_tag_element] *{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.show_tag_element,
[show_tag_element]{
  display: initial !important;
  visibility: visible !important;
  height: auto !important;
  min-height: initial !important;
  overflow: visible !important;
}
/* ================================
   PRODUCT PAGE: CLEAN QUANTITY + BUTTONS
   ================================ */

/* Layout for quantity + buttons row */
.theme-product-quantity-cart-area{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* =====================
   QUANTITY ONLY
   ===================== */

.theme-product-variant-quantity,
.theme-product-variant-quantity [data-zs-quantity-container],
.theme-product-variant-quantity .zp-product-quantity,
.theme-product-variant-quantity .zp-quantity{
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.theme-product-variant-quantity .zp-product-quantity > div,
.theme-product-variant-quantity .zp-quantity > div{
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

/* +/- buttons */
.theme-product-variant-quantity button{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 40px !important;
}

/* Number box */
.theme-product-variant-quantity input{
  width: 58px !important;
  height: 40px !important;
  padding: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* Hide browser spinners */
.theme-product-variant-quantity input[type=number]::-webkit-inner-spin-button,
.theme-product-variant-quantity input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.theme-product-variant-quantity input[type=number]{
  -moz-appearance: textfield;
}

/* =====================
   BUTTON ROW
   ===================== */

.theme-product-cart-buttons{
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Stop Zoho "full width" behavior */
.theme-product-cart-buttons .zpbutton-full-width{
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Prevent text stacking */
.theme-product-cart-buttons button,
.theme-product-cart-buttons a{
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
}
/* =========================================================
   PRODUCT PAGE: QUANTITY CONTROL (ONLY) — SAFE
   Forces Zoho +/- quantity stepper to horizontal row
   Does NOT touch Add to Cart / Request Quote buttons
   ========================================================= */

/* 1) Target the quantity area wrapper */
.theme-product-variant-quantity,
.theme-product-quantity-cart-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* 2) Target ONLY the quantity widget container */
.theme-product-variant-quantity [data-zs-quantity-container],
.theme-product-variant-quantity .zp-product-quantity,
.theme-product-variant-quantity .zp-quantity,
.theme-product-quantity-cart-area [data-zs-quantity-container],
.theme-product-quantity-cart-area .zp-product-quantity,
.theme-product-quantity-cart-area .zp-quantity {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 3) Some themes wrap the stepper in a child div — force that to row too */
.theme-product-variant-quantity [data-zs-quantity-container] > div,
.theme-product-variant-quantity .zp-product-quantity > div,
.theme-product-variant-quantity .zp-quantity > div,
.theme-product-quantity-cart-area [data-zs-quantity-container] > div,
.theme-product-quantity-cart-area .zp-product-quantity > div,
.theme-product-quantity-cart-area .zp-quantity > div {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* 4) Style ONLY the +/- buttons inside the quantity widget */
.theme-product-variant-quantity [data-zs-quantity-container] button,
.theme-product-variant-quantity .zp-product-quantity button,
.theme-product-variant-quantity .zp-quantity button,
.theme-product-quantity-cart-area [data-zs-quantity-container] button,
.theme-product-quantity-cart-area .zp-product-quantity button,
.theme-product-quantity-cart-area .zp-quantity button {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 40px !important;
}

/* 5) Style ONLY the number input inside the quantity widget */
.theme-product-variant-quantity [data-zs-quantity-container] input,
.theme-product-variant-quantity .zp-product-quantity input,
.theme-product-variant-quantity .zp-quantity input,
.theme-product-quantity-cart-area [data-zs-quantity-container] input,
.theme-product-quantity-cart-area .zp-product-quantity input,
.theme-product-quantity-cart-area .zp-quantity input {
  width: 58px !important;
  height: 40px !important;
  padding: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
}

/* 6) Hide browser spinners */
.theme-product-variant-quantity input[type=number]::-webkit-inner-spin-button,
.theme-product-variant-quantity input[type=number]::-webkit-outer-spin-button,
.theme-product-quantity-cart-area input[type=number]::-webkit-inner-spin-button,
.theme-product-quantity-cart-area input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.theme-product-variant-quantity input[type=number],
.theme-product-quantity-cart-area input[type=number] {
  -moz-appearance: textfield;
}
/* =========================================================
   FIX: Add to Cart button alignment (ONLY)
   ========================================================= */

/* Target ONLY the Add to Cart button */
.theme-product-cart-buttons button[data-zs-add-to-cart],
.theme-product-cart-buttons .theme-cart-button[data-zs-add-to-cart]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  line-height: 1 !important;
}

/* Make sure the icon inside Add to Cart behaves */
.theme-product-cart-buttons button[data-zs-add-to-cart] svg,
.theme-product-cart-buttons button[data-zs-add-to-cart] i,
.theme-product-cart-buttons button[data-zs-add-to-cart] img{
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Make sure the text is centered and not “floating” */
.theme-product-cart-buttons button[data-zs-add-to-cart] span,
.theme-product-cart-buttons button[data-zs-add-to-cart] .zpbutton-text{
  line-height: 1 !important;
  display: inline-block !important;
}
/* =========================================================
   FIX: Hide Zoho "Loading..." text inside Add to Cart button
   (keeps button looking normal)
   ========================================================= */

.theme-product-cart-buttons button[data-zs-add-to-cart]{
  position: relative !important;
}

/* Hide common Zoho loading text nodes (different themes use different classnames) */
.theme-product-cart-buttons button[data-zs-add-to-cart] .zpbutton-loading-text,
.theme-product-cart-buttons button[data-zs-add-to-cart] .zpbutton-loading,
.theme-product-cart-buttons button[data-zs-add-to-cart] .zp-loader-text,
.theme-product-cart-buttons button[data-zs-add-to-cart] .loader-text,
.theme-product-cart-buttons button[data-zs-add-to-cart] [data-zs-loading-text],
.theme-product-cart-buttons button[data-zs-add-to-cart] [data-zs-loader-text]{
  display: none !important;
}

/* Make sure the icon stays to the RIGHT of "Add to Cart" */
.theme-product-cart-buttons button[data-zs-add-to-cart]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.theme-product-cart-buttons button[data-zs-add-to-cart] svg,
.theme-product-cart-buttons button[data-zs-add-to-cart] i,
.theme-product-cart-buttons button[data-zs-add-to-cart] img{
  order: 2 !important;
}

.theme-product-cart-buttons button[data-zs-add-to-cart] .zpbutton-text,
.theme-product-cart-buttons button[data-zs-add-to-cart] span{
  order: 1 !important;
}
/* ==========================================
   FIX: Hide Zoho "Loading..." label inside Add to Cart
   ========================================== */

.theme-product-cart-buttons button[data-zs-add-to-cart] [class*="load"],
.theme-product-cart-buttons button[data-zs-add-to-cart] [class*="Load"],
.theme-product-cart-buttons button[data-zs-add-to-cart] [class*="loader"],
.theme-product-cart-buttons button[data-zs-add-to-cart] [class*="Loader"]{
  display: none !important;
}

/* Keep Add to Cart content centered/normal */
.theme-product-cart-buttons button[data-zs-add-to-cart]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}