/* Modern product image modal - Calligraphy Arts */
/* Updated: stronger mobile thumbnail reset for left-thumbs layout */
/* Product page: modern left thumbnail rail */
@media (min-width: 768px) {
  .images-container-left .row.no-gutters {
    display: flex;
    align-items: flex-start;
  }

  .images-container-left .col-left-product-thumbs {
    flex: 0 0 92px;
    max-width: 92px;
    padding-right: 14px;
  }

  .images-container-left .col-left-product-cover {
    flex: 1 1 auto;
    max-width: calc(100% - 92px);
  }

  .images-container-left .js-qv-mask {
    overflow: visible;
  }

  .images-container-left #product-images-thumbs {
    width: 78px;
    height: auto !important;
    max-height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
  }

  .images-container-left #product-images-thumbs .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 78px;
    height: auto !important;
    transform: none !important;
  }

  .images-container-left #product-images-thumbs .swiper-slide {
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px;
    margin: 0 !important;
  }

  .images-container-left .thumb-container,
  .images-container-left .thumb-container picture {
    display: block;
    width: 78px;
    height: 78px;
  }

  .images-container-left .thumb {
    display: block;
    width: 78px;
    height: 78px;
    object-fit: cover;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }

  .images-container-left .thumb:hover,
  .images-container-left .thumb.selected,
  .images-container-left .thumb.js-thumb-selected {
    border-color: #5D7F8A;
    box-shadow: 0 0 0 2px rgba(93, 127, 138, .16);
    transform: translateY(-1px);
  }

  .images-container-left #product-images-thumbs .swiper-button-prev,
  .images-container-left #product-images-thumbs .swiper-button-next {
    display: none !important;
  }
}

/* Mobile reset: left thumbs become normal bottom thumbnails */
@media (max-width: 767px) {
  .images-container-left .row.no-gutters {
    display: flex;
    flex-direction: column;
  }

  .images-container-left .col-left-product-cover {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .images-container-left .col-left-product-thumbs {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 12px 0 0 0;
  }

  .images-container-left #product-images-thumbs {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0 2px 0;
  }

  .images-container-left #product-images-thumbs .swiper-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: max-content;
    height: auto !important;
    transform: none !important;
  }

  .images-container-left #product-images-thumbs .swiper-slide {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px;
    margin: 0 !important;
  }

  .images-container-left .thumb-container,
  .images-container-left .thumb-container picture {
    display: block;
    width: 72px;
    height: 72px;
  }

  .images-container-left .thumb {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
  }

  .images-container-left #product-images-thumbs .swiper-button-prev,
  .images-container-left #product-images-thumbs .swiper-button-next {
    display: none !important;
  }
}
#product-modal .modal-dialog {
  max-width: 1180px;
  width: calc(100vw - 48px);
  margin: 24px auto;
}

#product-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  background: #fff;
}

#product-modal .modal-header {
  min-height: 64px;
  padding: 18px 24px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

#product-modal .modal-title {
  max-width: calc(100% - 48px);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: #222;
}

#product-modal .modal-header .close {
  width: 42px;
  height: 42px;
  margin: -8px -8px -8px auto;
  padding: 0;
  border-radius: 50%;
  opacity: 1;
  color: #666;
  background: #f6f6f6;
  text-shadow: none;
  font-size: 34px;
  line-height: 38px;
}

#product-modal .modal-header .close:hover {
  background: #5D7F8A;
  color: #fff;
}

#product-modal .modal-body {
  display: flex;
  align-items: stretch;
  gap: 28px;
  padding: 28px;
  max-height: calc(100vh - 130px);
  overflow: hidden;
  background: #fbfaf8;
}

#product-modal .easyzoom-modal {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
}

#product-modal .js-modal-product-cover-easyzoom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#product-modal .product-cover-modal {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 230px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

#product-modal #thumbnails {
  flex: 0 0 170px;
  width: 170px;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#product-modal .js-modal-mask,
#product-modal .product-images {
  width: 100%;
  height: auto;
  margin: 0;
}

#product-modal .product-images .swiper-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  transform: none !important;
}

#product-modal .product-images .swiper-slide {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

#product-modal .thumb-container {
  width: 100%;
}

#product-modal .js-modal-thumb {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: cover;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#product-modal .js-modal-thumb:hover,
#product-modal .js-modal-thumb.selected,
#product-modal .js-modal-thumb.js-thumb-selected {
  border-color: #5D7F8A;
  box-shadow: 0 0 0 2px rgba(93, 127, 138, .16);
  transform: translateY(-1px);
}

#product-modal .swiper-button-prev,
#product-modal .swiper-button-next {
  display: none !important;
}

@media (max-width: 767px) {
  #product-modal .modal-dialog {
    width: calc(100vw - 20px);
    margin: 10px auto;
  }

  #product-modal .modal-body {
    display: block;
    padding: 16px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  #product-modal .easyzoom-modal {
    padding: 12px;
  }

  #product-modal .product-cover-modal {
    max-height: 60vh;
  }

  #product-modal #thumbnails {
    width: 100%;
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #product-modal .product-images .swiper-wrapper {
    display: flex;
    gap: 10px;
  }

  #product-modal .product-images .swiper-slide {
    flex: 0 0 82px;
  }

  #product-modal .js-modal-thumb {
    height: 82px;
  }
}

#header .header-btn-w .header-btn {
  text-align: center;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
}

.header-top .form-search-control {
  border-radius: 8px !important;
}

.search-widget .form-search-control {
  padding: .65rem 1rem .65rem 3rem;
}

.search-widget .search-btn {
  position: absolute;
  right: inherit;
  left: 0;
}

#visitor_assurance_block a div,
#visitor_assurance_block a svg {
  display: inline-block;
}

#visitor_assurance_block a svg {
  margin-right: 5px;
}

.product-list-subcategories div a {
  display: block;
  margin: 5px;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.product-list-subcategories .row div {
  padding-left: 5px;
  padding-right: 5px;
}

.products-grid .product-miniature {
  border-radius: 8px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/*Comment PH*/
/*.stars-container > div {*/
/*  margin: 0 0 5px !important;*/
/*}*/

.product-miniature-default .product-thumbnail img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.block-iqitcontactpage hr {
  border-top: 1px solid transparent;
}

.contact-rich .part .icon {
  vertical-align: top;
}

.product-cover img {
  display: block;
  margin: 0;
  cursor: -moz-grab;
  width: 100%;
  margin-bottom: 15px;
}

#content-wrapper .product_header_container .page-title {
  margin-bottom: 0;
}

#content-wrapper .product_header_container .brand_title {
  margin-bottom: 8px;
  display: block;
}

#content-wrapper .product_header_container .brand_title a {
  color: #2F4A5F;
  border-bottom: 1px solid #2F4A5F;
}

#content-wrapper .product_header_container .brand_title a:hover {
  border-bottom: 1px solid transparent;
}

.product-info-row .comment_anchor {
  color: #2F4A5F;
  border-bottom: 1px solid #2F4A5F;
}

.product-info-row .comment_anchor:hover {
  border-bottom: 1px solid transparent;
}

.product-info-row .product-prices {
  padding: 20px 0 10px;
}

.product_header_container {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.product-variants .form-control-label {
  font-weight: 400;
}

.product-variants .form-control-label .selected-value {
  font-weight: 700;
}

.product-add-to-cart .col-add-btn {
  flex: 3 0 auto;
}

.product-add-to-cart .col-add-btn button {
  border-radius: 50px;
  min-width: 100%;
  padding: 0.75rem 1rem;
}

.product-add-to-cart .col-add-btn button i {
  display: none !important;
}

.product-add-to-cart .col-add-wishlist button  {
  border-radius: 12px;
  padding: 0.688rem 1rem;
  border-color: #2F4A5F;
}

.product-add-to-cart .col-add-wishlist button  {
  color: #2F4A5F;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn {
  padding: 8px 13px;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  border-bottom-right-radius: 12px;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
  border-top-right-radius: 12px;
}

.product-quantity .qty .input-group {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.product-actions .product-description {
  border-top: 1px solid rgba(160,160,160,.25);
  padding-top: 1rem;
}

.ps-shoppingcart.side-cart #blockcart-content {
  padding-bottom: 75px;
}

.product_actions .express_checkout {
  align-items: center;
  background-color: rgb(245, 245, 245);
  border-radius: 8px;
  display: flex;
  padding: 25px 15px;
  gap: 15px;
  justify-content: center;
}

.product_actions .amazonPayButton {
  max-width: 50%;
  margin: 0;
  border-radius: 40px;
}

.product_actions .amazonPayButton .amazonpay-button-view1-gold {
  min-height: 40px !important;
  border-radius: 25px !important;
}

.product_actions [data-container-express-checkout] {
  margin-top: -7px !important;
}

.col-header-right .row {
  align-items: baseline;
}

#header-user-btn .dropdown-menu {
  border-radius: 8px;
  transform: translate3d(-100px, 40px, 0px) !important;
}

#header-user-btn .dropdown-menu .dropdown-item {
  padding: 0.7em 1.2em;
  border: 0;
}

#header-user-btn .dropdown-menu .dropdown-sigin-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#header-user-btn .dropdown-menu .dropdown-sigin-block .btn {
  border-radius: 20px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header-user-btn .dropdown-menu .dropdown-sigin-block .link {
  text-align: center;
  color: #2F4A5F;
}

#header-user-btn .dropdown-menu .dropdown-sigin-block .link span {
  border-bottom: 1px solid #2F4A5F;
}

#checkout-personal-information-step .productActionsHook {
  padding: 0.5rem 3rem 2rem;
}

#checkout-personal-information-step .productActionsHook h2 {
  text-align: center;
  font-family: "Playball", cursive;
  font-size: 1.7rem;
}

#checkout .container {
  width: 95%;
  max-width: 74rem;
  position: relative;
  margin: auto;
}

#checkout #header .container {
  max-width: 75rem;
}

#checkout section.checkout-step .step-title {
  font-size: 24px !important;
  line-height: 36px;
}

.cart-summary .promo-code .input-group {
  display: flex;
  flex-direction: column;
}

.cart-summary .promo-code .input-group i {
  display: none;
}

.cart-summary .promo-code .input-group input {
  width: 100%;
}

#product #group_accessories {
  clear: both;
  margin: 15px 0;
  padding: 10px 30px;
  background: #F6F6F6;
  color: #000;
  border-radius: 8px;
}

#multiAccessoriesTab .product-cover img {
  max-width: 55px;
  margin-bottom: -10px;
}

#group_accessories .product-cover {
  margin: 0 auto;
}

#product #group_accessories h3 {
  font-size: 1.4em;
  font-weight: bold;
  margin: 10px 0 15px;
  padding: 0;
}

#product #group_accessories h4 {
  margin: 0;
}

#product #group_accessories .option-row table {
  margin-bottom: 8px;
}

#product #group_accessories .accessory_price {
  padding-left: 8px;
  color: #2F4A5F;
  font-size: 1.3rem;
  font-weight: 500;
}

.ma_block_qty {
  margin-bottom: 8px;
  margin-right: 12px;
}

#product #group_accessories .option-row table select {
  width: 40%;
  padding: 2px 15px;
}

.iqitmegamenu-submenu-container .menu-element-id-6 a {
  display: flex;
}

.iqitmegamenu-submenu-container .menu-element-id-6 a span {
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
}

.iqitmegamenu-submenu-container .menu-element-id-6 a span svg {
  max-width: 35px;
  fill:inherit;
}

.swiper-container-wrapper {
  padding-bottom: 30px;
}

.swiper-container-wrapper .swiper-pagination {
  top: 100%;
}

#currency_selector {
  min-width:100px;
}

#language_selector {
  min-width:100px;
}


[paypal-messaging-banner] {
  display: none !important;
}


.cart-products .block-cart-product-quantity {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.ph-express-checkout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.ph-express-checkout-container .amazonPayButton {
  max-width: 30%;
}

@media (max-width: 767px) {
  #ph_desktop_logo {
    text-align: center;
  }
}

#stripe-payment-form .form-row label {
  display: none;
}

#stripe-payment-form .form-row p.checkbox {
  display: none;
}

#stripe-payment-form .form-row .pull-right {
  display: none;
}

#pills-payment-option-1 {
  padding: 0 19px 21px !important;
}

.btn-product-list {
  background: #2F4A5F;
  color: #ffffff;
  border: none 1px #2F4A5F;
  border-radius: 20px;
}

.btn-product-list:hover {
  opacity: 0.6;
}

.product-miniature .input-group-add-cart .form-control {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.product-miniature .bootstrap-touchspin .input-group-btn-vertical i {
  top: 0px;
}

.product-miniature-default .variant-links .color {
  width: 1.5rem;
  height: 1.5rem;
}

/*PH Add */
.products-grid .product-miniature-default .product-brand,
.product-miniature-grid .product-title {
  text-align: center;
}

.products-grid .product-miniature-layout-1 .product-price-and-shipping {
  text-align: center;
}

#checkout #header {
  padding-bottom: 5px;
}

#checkout #content input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #55555582;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: 0.2s border-color;
  opacity: 1;
}

#checkout #content input[type="radio"]::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.2s transform ease-in-out;
  background-color: #000000;
}

#checkout #content input[type="radio"]:checked {
  border-color: #000000;
}

#checkout #content input[type="radio"]:checked::before {
  transform: scale(1);
}

#checkout #content input[type="radio"]:hover {
  border-color: #000000;
}

#checkout #content .custom-radio {
  box-shadow: none;
  margin-right: 10px;
  width: auto;
  height: auto;
  top: -2px;
}

#checkout #content .custom-radio input[type=radio]:checked+span {
  /*left: 0px;*/
  /*top: 3px;*/
  display: none;
}
/*PD Add END*/


/* PH v9 product page final above-the-fold design
   Goals: displayProductAdditionalInfo/shipping assurance directly under price, consistent desktop/mobile buy-box flow,
   keep Add to cart visible before optional accessories, and prevent review/customisation blocks from stealing the first product view. */
#product .ph-product-final .product-info-row {
  align-items: flex-start;
}

#product .ph-product-final .col-product-image,
#product .ph-product-final .col-product-info {
  padding-top: 0;
}

#product .ph-product-final #col-product-info {
  max-width: 760px;
}

#product .ph-product-final .product_header_container {
  padding-bottom: 0;
  margin-bottom: 0;
}

#product .ph-product-final .product_header_container .hook-reviews,
#product .ph-product-final .product_header_container .comments_note,
#product .ph-product-final .product_header_container .custom-stars-position,
#product .ph-product-final .product_header_container .product-rating {
  margin-bottom: 6px;
}

#product .ph-product-final .product_header_container .page-title {
  margin: 0 0 6px;
  line-height: 1.12;
}

#product .ph-product-final .ph-product-short-description-top {
  margin: 6px 0 10px;
  max-width: 690px;
  color: #34303a;
  font-size: 16px;
  line-height: 1.45;
}

#product .ph-product-final .ph-product-short-description-top p {
  margin-bottom: 8px;
}

#product .ph-product-final .product-prices {
  padding: 8px 0 8px;
  margin: 0;
}

#product .ph-product-final .ph-price-main-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 4px;
  gap: 6px 12px;
}

#product .ph-product-final .ph-price-main-row .current-price,
#product .ph-product-final .ph-price-main-row .product-price {
  color: #2F4A5F;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

#product .ph-product-final .ph-price-main-row #product-availability {
  transform: translateY(-1px);
}

#product .ph-product-final .product-variants {
  margin: 8px 0 12px;
}

#product .ph-product-final .product-variants > .product-variants-item {
  margin: 0 0 10px;
}

#product .ph-product-final .product-variants .form-control-label {
  margin-bottom: 6px;
  color: #34303a;
  font-size: 15px;
}

#product .ph-product-final .product-variants .color,
#product .ph-product-final .product-variants .input-color + span.color {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}

#product .ph-product-final .product-add-to-cart {
  padding-top: 8px !important;
}

#product .ph-product-final .product-quantity {
  margin-bottom: 0;
}

#product .ph-product-final .product-quantity .col-add-qty {
  flex: 0 0 116px;
  max-width: 116px;
}

#product .ph-product-final .product-quantity .qty,
#product .ph-product-final .product-quantity .input-group,
#product .ph-product-final .product-quantity #quantity_wanted {
  width: 100%;
}

#product .ph-product-final .product-quantity #quantity_wanted {
  min-height: 52px;
  text-align: center;
  border-radius: 28px 0 0 28px;
  border-color: rgba(47, 74, 95, .20);
  font-weight: 700;
}

#product .ph-product-final .bootstrap-touchspin .input-group-btn-vertical > .btn {
  border-color: rgba(47, 74, 95, .20);
  color: #2F4A5F;
}

#product .ph-product-final .product-add-to-cart .col-add-btn {
  flex: 0 1 430px;
  max-width: 430px;
}

#product .ph-product-final .product-add-to-cart .add-to-cart {
  min-height: 52px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(47, 74, 95, .18);
  font-size: 16px;
  font-weight: 800;
}

#product .ph-product-final .ph-buybox-after-price {
  clear: both;
  margin: 2px 0 12px;
}

#product .ph-product-final .ph-buybox-after-price:empty {
  display: none;
}

#product .ph-product-final .ph-buybox-after-price.product-additional-info {
  padding: 0;
}

#product .ph-product-final .ph-buybox-after-price .ph-va-render {
  margin: 0;
}

#product .ph-product-final .ph-buybox-after-price .ph-va-product-inline {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

#product .ph-product-final .product-actions .totloyaltyadvanced,
#product .ph-product-final .product-actions [class*="loyalty"],
#product .ph-product-final .product-actions [id*="loyalty"] {
  margin-top: 8px;
}

#product .ph-product-final .ph-product-options-after-cart {
  clear: both;
}

#product .ph-product-final .ph-product-options-after-cart:empty {
  display: none;
}

#product .ph-product-final #group_accessories {
  margin: 16px 0 0;
  padding: 18px 22px;
  background: #faf7f9;
  border: 1px solid rgba(47, 74, 95, .14);
  border-radius: 14px;
  color: #1f1b22;
}

#product .ph-product-final #group_accessories h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
}

#product .ph-product-final #group_accessories h4,
#product .ph-product-final #group_accessories label {
  font-size: 15px;
}

#product .ph-product-final #group_accessories .option-row table {
  margin-bottom: 6px;
}

#product .ph-product-final #multiAccessoriesTab .product-cover img {
  max-width: 48px;
}

#product .ph-product-final .product-customization {
  margin-top: 16px;
  padding: 18px 22px;
  background: #faf7f9;
  border: 1px solid rgba(47, 74, 95, .14);
  border-radius: 14px;
}

#product .ph-product-final .product-customization .h4 {
  margin: 0 0 8px;
  font-size: 22px;
}

#product .ph-product-final .product-customization ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

#product .ph-product-final .product-customization-item {
  margin-bottom: 12px;
}

#product .product-tabs #product-infos-tabs .nav-link.active[href="#description"] {
  color: #000;
}

@media (min-width: 992px) {
  #product .ph-product-final .product-info-row {
    display: flex;
  }

  #product .ph-product-final .col-product-image {
    flex: 0 0 46%;
    max-width: 46%;
  }

  #product .ph-product-final .col-product-info {
    flex: 0 0 54%;
    max-width: 54%;
  }
}

@media (min-width: 768px) {
  #product .ph-product-final .product-quantity {
    align-items: center;
    flex-wrap: nowrap;
  }
}

@media (max-width: 991.98px) {
  #product .ph-product-final #col-product-info {
    max-width: none;
  }

  #product .ph-product-final .product_header_container .page-title {
    font-size: 30px;
  }

  #product .ph-product-final .ph-price-main-row .current-price,
  #product .ph-product-final .ph-price-main-row .product-price {
    font-size: 34px;
  }
}

@media (max-width: 767.98px) {
  #product .ph-product-final .product_header_container {
    padding-top: 14px;
  }

  #product .ph-product-final .product_header_container .page-title {
    font-size: 26px;
    line-height: 1.14;
  }

  #product .ph-product-final .ph-product-short-description-top {
    font-size: 15px;
    line-height: 1.45;
  }

  #product .ph-product-final .ph-price-main-row .current-price,
  #product .ph-product-final .ph-price-main-row .product-price {
    font-size: 32px;
  }

  #product .ph-product-final .product-quantity {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }

  #product .ph-product-final .product-quantity .col-add-qty {
    flex: 0 0 105px;
    max-width: 105px;
    padding-right: 0;
  }

  #product .ph-product-final .product-add-to-cart .col-add-btn {
    flex: 1 1 auto;
    max-width: none;
    padding-left: 0;
  }

  #product .ph-product-final .product-add-to-cart .add-to-cart {
    min-width: 0;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  #product .ph-product-final #group_accessories,
  #product .ph-product-final .product-customization {
    padding: 16px;
  }
}



/* PH Calligraphy Arts: studio-style stock messaging
   Removes generic badge/pill/icon availability display and uses localized boutique stock text. */
#product .ph-product-final .ph-price-main-row .ph-stock-status,
#product .ph-product-final .ph-price-main-row #product-availability.ph-stock-status {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
}

#product .ph-product-final .ph-price-main-row .ph-stock-status i,
#product .ph-product-final .ph-price-main-row #product-availability.ph-stock-status i {
  display: none !important;
}

#product .ph-product-final .ph-price-main-row .ph-stock-ready {
  color: #087a3f;
}

#product .ph-product-final .ph-price-main-row .ph-stock-low,
#product .ph-product-final .ph-price-main-row .ph-stock-last {
  color: #526C76;
}

#product .ph-product-final .ph-price-main-row .ph-stock-last {
  font-weight: 900;
}

#product .ph-product-final .ph-price-main-row .ph-stock-out {
  color: #b42318;
}

#product .ph-product-final .ph-price-main-row .ph-stock-status .available-date {
  margin-left: 4px;
  color: inherit;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  #product .ph-product-final .ph-price-main-row {
    align-items: flex-start;
  }

  #product .ph-product-final .ph-price-main-row .ph-stock-status,
  #product .ph-product-final .ph-price-main-row #product-availability.ph-stock-status {
    flex-basis: auto;
    margin-top: 2px;
    font-size: 13px;
    white-space: normal;
  }
}

/* =========================================================
   PH Calligraphy Arts — Studio Palette v3
   Direction: no old magenta, no oxblood, no brass/gold/brown.
   Visual language: white paper, deep ink blue, cool mineral ink accents.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

:root {
  --ca-ink: #1D2529;
  --ca-ink-dark: #172128;
  --ca-primary: #2F4A5F;
  --ca-primary-dark: #223845;
  --ca-accent: #5D7F8A;
  --ca-accent-dark: #426974;
  --ca-accent-soft: rgba(93, 127, 138, .16);
  --ca-ink-wash: #EAF0F2;
  --ca-paper: #F8F6F1;
  --ca-paper-soft: #FCFAF6;
  --ca-paper-border: #E3DED5;
  --ca-moss: #2F6F5E;
  --ca-alert: #7B3E3A;
  --ca-white: #FFFFFF;
  --ca-shadow-soft: 0 8px 24px rgba(29, 37, 41, .08);
  --ca-shadow-card: 0 12px 30px rgba(29, 37, 41, .11);

  /* Compatibility mapping for earlier staging palette variables.
     These names may exist in older blocks, but the visual colors are now cool ink tones. */
  --ca-ink-soft: var(--ca-primary);
  --ca-brass: var(--ca-accent);
  --ca-brass-dark: var(--ca-accent-dark);
  --ca-brass-soft: var(--ca-accent-soft);
  --ca-walnut: var(--ca-primary);
}

/* Global text/link accents */
a,
#content-wrapper a,
.product-info-row .comment_anchor,
#content-wrapper .product_header_container .brand_title a,
#header-user-btn .dropdown-menu .dropdown-sigin-block .link,
#header-user-btn .dropdown-menu .dropdown-sigin-block .link span {
  color: var(--ca-primary) !important;
  border-color: var(--ca-accent) !important;
}

a:hover,
#content-wrapper a:hover,
.product-info-row .comment_anchor:hover,
#content-wrapper .product_header_container .brand_title a:hover {
  color: var(--ca-accent-dark) !important;
  border-bottom-color: transparent !important;
}

/* Header assurance / utility bar */
#visitor_assurance_block,
#visitor_assurance_block a,
#visitor_assurance_block a div,
#visitor_assurance_block a svg,
#currency_selector,
#language_selector,
.ph-va-render,
.ph-va-render a,
.ph-va-render svg,
.ph-va-render i {
  color: var(--ca-primary) !important;
  fill: var(--ca-accent) !important;
  stroke: var(--ca-accent) !important;
}

/* Primary action buttons — all main shop actions share the new ink tone */
.btn-primary,
.btn-product-list,
.input-group-add-cart .btn,
.input-group-add-cart .btn-primary,
.product-miniature .btn-product-list,
.product-miniature .add-to-cart,
.product-miniature .ajax_add_to_cart_button,
.product-miniature .input-group-add-cart .btn,
.product-add-to-cart .add-to-cart,
.product-add-to-cart .col-add-btn button,
.product-actions .btn-primary,
.product-actions button[type="submit"],
.product-customization .btn,
#product .ph-product-final .product-add-to-cart .add-to-cart,
#product .product-tabs .btn,
#product-infos-tabs-content .btn,
#lgcomments-modal .btn,
.lgcomments .btn,
.lgcomment-form .btn,
#product_question_form .btn,
.btn-comment,
.btn-lgcomments,
.ask-question .btn,
.qna .btn,
#checkout .btn-primary,
.cart-summary .btn-primary,
#cart .btn-primary {
  background-color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  color: var(--ca-white) !important;
  box-shadow: 0 8px 22px rgba(47, 74, 95, .18) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-product-list:hover,
.btn-product-list:focus,
.input-group-add-cart .btn:hover,
.input-group-add-cart .btn:focus,
.product-miniature .btn-product-list:hover,
.product-miniature .add-to-cart:hover,
.product-miniature .ajax_add_to_cart_button:hover,
.product-add-to-cart .add-to-cart:hover,
.product-add-to-cart .col-add-btn button:hover,
.product-actions .btn-primary:hover,
.product-actions button[type="submit"]:hover,
.product-customization .btn:hover,
#product .ph-product-final .product-add-to-cart .add-to-cart:hover,
#product .product-tabs .btn:hover,
#product-infos-tabs-content .btn:hover,
#lgcomments-modal .btn:hover,
.lgcomments .btn:hover,
.lgcomment-form .btn:hover,
#product_question_form .btn:hover,
.btn-comment:hover,
.btn-lgcomments:hover,
.ask-question .btn:hover,
.qna .btn:hover,
#checkout .btn-primary:hover,
.cart-summary .btn-primary:hover,
#cart .btn-primary:hover {
  background-color: var(--ca-primary-dark) !important;
  border-color: var(--ca-primary-dark) !important;
  color: var(--ca-white) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

/* Secondary / outline buttons */
.btn-outline-primary,
.btn-secondary,
.product-add-to-cart .col-add-wishlist button,
.wishlist-button-add,
.js-wishlist-button-add,
.product-actions .btn-secondary,
.quick-view,
.product-miniature .quick-view,
.product-miniature .product-functional-buttons a,
.product-miniature .product-functional-buttons button {
  background-color: var(--ca-white) !important;
  border-color: var(--ca-accent) !important;
  color: var(--ca-primary) !important;
}

.btn-outline-primary:hover,
.btn-secondary:hover,
.product-add-to-cart .col-add-wishlist button:hover,
.wishlist-button-add:hover,
.js-wishlist-button-add:hover,
.product-actions .btn-secondary:hover,
.quick-view:hover,
.product-miniature .quick-view:hover,
.product-miniature .product-functional-buttons a:hover,
.product-miniature .product-functional-buttons button:hover {
  background-color: var(--ca-ink-wash) !important;
  border-color: var(--ca-primary) !important;
  color: var(--ca-primary-dark) !important;
}

/* Prices and important text accents */
.current-price,
.product-price,
.product-price-and-shipping .price,
.product-miniature .price,
.product-miniature .product-price-and-shipping,
#product .ph-product-final .ph-price-main-row .current-price,
#product .ph-product-final .ph-price-main-row .product-price,
#product #group_accessories .accessory_price,
.cart-summary-line .value,
.cart-summary-products .value,
.product-line-grid-right .product-price,
#order-items .order-line .price {
  color: var(--ca-primary-dark) !important;
}

/* Quantity controls */
.product-quantity .qty .input-group,
#product .ph-product-final .product-quantity #quantity_wanted,
.bootstrap-touchspin .input-group-btn-vertical > .btn,
#product .ph-product-final .bootstrap-touchspin .input-group-btn-vertical > .btn,
.product-miniature .input-group-add-cart .form-control,
.product-miniature .bootstrap-touchspin .input-group-btn-vertical > .btn {
  border-color: rgba(47, 74, 95, .22) !important;
  color: var(--ca-primary) !important;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn:hover,
#product .ph-product-final .bootstrap-touchspin .input-group-btn-vertical > .btn:hover,
.product-miniature .bootstrap-touchspin .input-group-btn-vertical > .btn:hover {
  background: var(--ca-ink-wash) !important;
  color: var(--ca-primary-dark) !important;
}

/* Shipping assurance, rewards, buy-box icons — remove brown/gold completely */
#product .ph-product-final .ph-buybox-after-price,
#product .ph-product-final .ph-buybox-after-price a,
#product .ph-product-final .ph-buybox-after-price span,
#product .ph-product-final .ph-buybox-after-price strong,
#product .ph-product-final .product-actions .totloyaltyadvanced,
#product .ph-product-final .product-actions [class*="loyalty"],
#product .ph-product-final .product-actions [id*="loyalty"] {
  color: var(--ca-ink) !important;
}

#product .ph-product-final .ph-buybox-after-price i,
#product .ph-product-final .ph-buybox-after-price svg,
#product .ph-product-final .ph-buybox-after-price .icon,
#product .ph-product-final .ph-buybox-after-price [class*="icon"],
#product .ph-product-final .product-actions .totloyaltyadvanced i,
#product .ph-product-final .product-actions .totloyaltyadvanced svg,
#product .ph-product-final .product-actions [class*="loyalty"] i,
#product .ph-product-final .product-actions [class*="loyalty"] svg,
#product .ph-product-final .product-actions [id*="loyalty"] i,
#product .ph-product-final .product-actions [id*="loyalty"] svg {
  color: var(--ca-accent) !important;
  fill: var(--ca-accent) !important;
  stroke: var(--ca-accent) !important;
}

#product .ph-product-final .ph-buybox-after-price .ph-va-icon,
#product .ph-product-final .ph-buybox-after-price .ph-va-icon-wrap,
#product .ph-product-final .product-actions .totloyaltyadvanced .icon,
#product .ph-product-final .product-actions [class*="loyalty"] .icon {
  background: var(--ca-ink-wash) !important;
  border-color: rgba(93, 127, 138, .20) !important;
}

/* Sale flags / discounts — cool ink badges, not gold/brown/red-magenta */
.product-flags li,
.product-flag,
.product-flags .product-flag,
.product-miniature .product-flags li,
.product-miniature .product-flags .product-flag,
.product-flags .on-sale,
.product-flag.on-sale,
.product-miniature .product-flags li.on-sale,
.label-flags .label,
.discount,
.has-discount .discount {
  background-color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  color: var(--ca-white) !important;
}

.discount-percentage,
.product-flags .discount-percentage,
.product-miniature .discount-percentage,
.product-flag.discount-percentage,
.product-price .discount-percentage {
  background-color: var(--ca-accent-dark) !important;
  border-color: var(--ca-accent-dark) !important;
  color: var(--ca-white) !important;
}

/* Product cards / thumbnails */
.products-grid .product-miniature,
.product-miniature,
.product-list-subcategories div a {
  border: 1px solid var(--ca-paper-border) !important;
  box-shadow: var(--ca-shadow-soft) !important;
}

.products-grid .product-miniature:hover,
.product-miniature:hover,
.product-list-subcategories div a:hover {
  border-color: var(--ca-accent) !important;
  box-shadow: var(--ca-shadow-card) !important;
}

.images-container-left .thumb:hover,
.images-container-left .thumb.selected,
.images-container-left .thumb.js-thumb-selected,
#product-modal .js-modal-thumb:hover,
#product-modal .js-modal-thumb.selected,
#product-modal .js-modal-thumb.js-thumb-selected {
  border-color: var(--ca-accent) !important;
  box-shadow: 0 0 0 2px var(--ca-accent-soft) !important;
}

/* Category title / description — restored studio card without brown/gold */
#category .page-title,
body#category .page-title,
#category #content-wrapper .page-title,
body#category #content-wrapper .page-title,
#category h1.h1,
body#category h1.h1 {
  color: var(--ca-ink-dark) !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.018em;
  line-height: 1.12;
}

#category .block-category,
body#category .block-category,
#category-description,
.category-description,
#category .category-description,
body#category .category-description {
  display: block;
  width: 100%;
  margin: 0 0 28px !important;
  padding: 18px 22px 18px 24px !important;
  background: linear-gradient(180deg, var(--ca-paper-soft) 0%, var(--ca-paper) 100%) !important;
  border: 1px solid var(--ca-paper-border) !important;
  border-left: 5px solid var(--ca-accent) !important;
  border-radius: 16px !important;
  box-shadow: var(--ca-shadow-soft) !important;
  color: var(--ca-ink) !important;
  overflow: hidden;
}

#category .block-category p,
body#category .block-category p,
#category-description p,
.category-description p,
#category .category-description p {
  margin: 0 0 8px !important;
  color: var(--ca-ink) !important;
  font-size: 16px;
  line-height: 1.48;
}

#category .block-category p:last-child,
body#category .block-category p:last-child,
#category-description p:last-child,
.category-description p:last-child,
#category .category-description p:last-child {
  margin-bottom: 0 !important;
}

#category .block-category strong,
body#category .block-category strong,
#category-description strong,
.category-description strong,
#category .category-description strong {
  color: var(--ca-ink-dark) !important;
  font-weight: 800;
}

#category .block-category a,
body#category .block-category a,
#category-description a,
.category-description a,
#category .category-description a {
  color: var(--ca-primary) !important;
  border-bottom: 1px solid var(--ca-accent) !important;
  text-decoration: none !important;
}

#category .block-category a:hover,
body#category .block-category a:hover,
#category-description a:hover,
.category-description a:hover,
#category .category-description a:hover {
  color: var(--ca-accent-dark) !important;
  border-bottom-color: transparent !important;
}

/* Listing controls / pagination */
#category #js-product-list-top,
body#category #js-product-list-top,
#category .products-selection,
body#category .products-selection {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  border-color: var(--ca-paper-border) !important;
}

.pagination .current a,
.pagination .page-list li.current a,
.pagination .page-list .current,
.pagination a.current,
.page-list .current a,
.page-list .current span,
#js-product-list-top .pagination .current a {
  color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  background: var(--ca-white) !important;
}

.pagination a:hover,
.page-list a:hover,
#js-product-list-top .pagination a:hover {
  color: var(--ca-primary-dark) !important;
  border-color: var(--ca-accent) !important;
  background: var(--ca-ink-wash) !important;
}

/* Tabs / FAQ active states */
#product .product-tabs #product-infos-tabs .nav-link.active,
#product .product-tabs .nav-tabs .nav-link.active,
#product #product-infos-tabs .nav-link.active,
#product .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link.active,
#product .product-tabs #product-infos-tabs .nav-link.active[href="#description"] {
  color: var(--ca-primary-dark) !important;
  border-color: var(--ca-primary) !important;
  background: var(--ca-white) !important;
}

#product .product-tabs .nav-tabs .nav-link:hover,
#product #product-infos-tabs .nav-link:hover,
#product .tabs .nav-tabs .nav-link:hover {
  color: var(--ca-primary) !important;
}

/* Filters / Amazzing Filters */
#amazzing_filter,
#amazzing_filter .af_filter,
#amazzing_filter .af_filter_content,
#search_filters,
#search_filters .facet,
.pm_advancedsearch4,
.PM_ASBlockOutput {
  border-color: var(--ca-paper-border) !important;
}

#amazzing_filter .af_filter_title,
#amazzing_filter .af_subtitle,
#search_filters .facet-title,
.pm_advancedsearch4 .PM_ASBlockTitle,
.PM_ASBlockOutput .PM_ASBlockTitle {
  color: var(--ca-ink-dark) !important;
}

#amazzing_filter label:hover,
#search_filters label:hover,
#search_filters .facet-label:hover,
.pm_advancedsearch4 label:hover,
.PM_ASBlockOutput label:hover,
#amazzing_filter input[type="checkbox"]:checked + label,
#amazzing_filter input[type="radio"]:checked + label,
#search_filters input[type="checkbox"]:checked + label,
#search_filters input[type="radio"]:checked + label {
  color: var(--ca-primary) !important;
}

#amazzing_filter .af-slider .ui-slider-range,
#search_filters .ui-slider-range,
.pm_advancedsearch4 .ui-slider-range,
.PM_ASBlockOutput .ui-slider-range {
  background: var(--ca-accent) !important;
}

#amazzing_filter .af-slider .ui-slider-handle,
#search_filters .ui-slider-handle,
.pm_advancedsearch4 .ui-slider-handle,
.PM_ASBlockOutput .ui-slider-handle {
  border-color: var(--ca-accent) !important;
  background: var(--ca-white) !important;
}

/* Forms / focus */
.form-control:focus,
.input-group.focus,
.custom-select:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
  border-color: var(--ca-accent) !important;
  box-shadow: 0 0 0 3px var(--ca-accent-soft) !important;
}

/* Stock messaging */
#product .ph-product-final .ph-price-main-row .ph-stock-ready {
  color: var(--ca-moss) !important;
}

#product .ph-product-final .ph-price-main-row .ph-stock-low,
#product .ph-product-final .ph-price-main-row .ph-stock-last {
  color: var(--ca-accent-dark) !important;
}

#product .ph-product-final .ph-price-main-row .ph-stock-out {
  color: var(--ca-alert) !important;
}

/* Back-to-top / floating controls */
.back-to-top,
#back-to-top,
#back_top,
.scroll-to-top,
.scrollTop,
.btn-scroll-top,
.iqit-back-to-top,
#footer-scroll-top,
.js-back-to-top {
  background-color: var(--ca-primary) !important;
  border-color: var(--ca-primary) !important;
  color: var(--ca-white) !important;
}

.back-to-top:hover,
#back-to-top:hover,
#back_top:hover,
.scroll-to-top:hover,
.scrollTop:hover,
.btn-scroll-top:hover,
.iqit-back-to-top:hover,
#footer-scroll-top:hover,
.js-back-to-top:hover {
  background-color: var(--ca-primary-dark) !important;
  border-color: var(--ca-primary-dark) !important;
}

@media (max-width: 767.98px) {
  #category .page-title,
  body#category .page-title,
  #category #content-wrapper .page-title,
  body#category #content-wrapper .page-title,
  #category h1.h1,
  body#category h1.h1 {
    margin-bottom: 14px !important;
    font-size: 28px;
    line-height: 1.14;
  }

  #category .block-category,
  body#category .block-category,
  #category-description,
  .category-description,
  #category .category-description,
  body#category .category-description {
    margin-bottom: 20px !important;
    padding: 15px 16px 15px 18px !important;
    border-left-width: 4px !important;
    border-radius: 14px !important;
  }

  #category .block-category p,
  body#category .block-category p,
  #category-description p,
  .category-description p,
  #category .category-description p {
    font-size: 15px;
    line-height: 1.45;
  }
}


/* =========================================================
   PH Calligraphy Arts — Breadcrumb / Trail Upgrade v3.1
   Purpose: replace tiny low-contrast breadcrumb text with a readable
   menu-style trail. No old magenta, no brown/gold accents.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

body:not(#checkout) nav.breadcrumb,
body:not(#checkout) .breadcrumb {
  margin: 14px 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ca-ink, #1D2529) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body:not(#checkout) nav.breadcrumb ol,
body:not(#checkout) nav.breadcrumb ul,
body:not(#checkout) .breadcrumb ol,
body:not(#checkout) .breadcrumb ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  list-style: none !important;
  background: linear-gradient(180deg, var(--ca-paper-soft, #FCFAF6) 0%, var(--ca-white, #FFFFFF) 100%) !important;
  border: 1px solid var(--ca-paper-border, #E3DED5) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(29, 37, 41, .06) !important;
}

body:not(#checkout) nav.breadcrumb li,
body:not(#checkout) .breadcrumb li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ca-ink, #1D2529) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Remove default slash separators from Warehouse/Bootstrap and replace with cleaner trail marks. */
body:not(#checkout) nav.breadcrumb li:after,
body:not(#checkout) nav.breadcrumb li::after,
body:not(#checkout) .breadcrumb li:after,
body:not(#checkout) .breadcrumb li::after,
body:not(#checkout) nav.breadcrumb .separator,
body:not(#checkout) .breadcrumb .separator {
  display: none !important;
  content: none !important;
}

body:not(#checkout) nav.breadcrumb li + li:before,
body:not(#checkout) nav.breadcrumb li + li::before,
body:not(#checkout) .breadcrumb li + li:before,
body:not(#checkout) .breadcrumb li + li::before {
  content: "›" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 1px 0 0 !important;
  color: var(--ca-accent, #5D7F8A) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body:not(#checkout) nav.breadcrumb a,
body:not(#checkout) nav.breadcrumb span,
body:not(#checkout) .breadcrumb a,
body:not(#checkout) .breadcrumb span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  max-width: 360px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--ca-paper-border, #E3DED5) !important;
  border-radius: 999px !important;
  background: var(--ca-white, #FFFFFF) !important;
  color: var(--ca-primary, #2F4A5F) !important;
  box-shadow: 0 3px 10px rgba(29, 37, 41, .04) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

body:not(#checkout) nav.breadcrumb a:hover,
body:not(#checkout) .breadcrumb a:hover {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  border-color: var(--ca-accent, #5D7F8A) !important;
  color: var(--ca-primary-dark, #223845) !important;
  box-shadow: 0 6px 14px rgba(47, 74, 95, .10) !important;
  transform: translateY(-1px) !important;
}

/* Home chip gets a subtle studio-start treatment without adding another image/icon dependency. */
body:not(#checkout) nav.breadcrumb li:first-child a,
body:not(#checkout) .breadcrumb li:first-child a {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  border-color: rgba(93, 127, 138, .26) !important;
  color: var(--ca-primary-dark, #223845) !important;
}

/* Current location: readable but not loud. Long product names are clipped cleanly. */
body:not(#checkout) nav.breadcrumb li:last-child a,
body:not(#checkout) nav.breadcrumb li:last-child span,
body:not(#checkout) .breadcrumb li:last-child a,
body:not(#checkout) .breadcrumb li:last-child span {
  background: var(--ca-primary, #2F4A5F) !important;
  border-color: var(--ca-primary, #2F4A5F) !important;
  color: var(--ca-white, #FFFFFF) !important;
  max-width: 520px !important;
  box-shadow: 0 8px 18px rgba(47, 74, 95, .16) !important;
}

body:not(#checkout) nav.breadcrumb li:last-child a:hover,
body:not(#checkout) .breadcrumb li:last-child a:hover {
  background: var(--ca-primary-dark, #223845) !important;
  border-color: var(--ca-primary-dark, #223845) !important;
  color: var(--ca-white, #FFFFFF) !important;
}

/* Product pages: do not let the product title trail chip dominate above the product. */
body#product:not(#checkout) nav.breadcrumb li:last-child a,
body#product:not(#checkout) nav.breadcrumb li:last-child span,
body#product:not(#checkout) .breadcrumb li:last-child a,
body#product:not(#checkout) .breadcrumb li:last-child span {
  max-width: 460px !important;
}

/* Category pages: keep the category trail close to the category intro block. */
body#category:not(#checkout) nav.breadcrumb,
body#category:not(#checkout) .breadcrumb {
  margin-bottom: 20px !important;
}

@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    margin: 10px 0 16px !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li {
    flex: 0 0 auto !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span {
    min-height: 32px !important;
    max-width: 230px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    max-width: 260px !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Simple trail fallback v3.5
   Purpose: back out the visual dropdown experiment, keep the clean
   menu-style trail, hide the old category intro, and keep product grid high.
   ========================================================= */

/* Safety: do not render the experimental visual trail/dropdown if cached template/CSS overlaps. */
body#category .ph-category-menu-trail,
body#category .ph-category-visual-trail {
  display: none !important;
}

/* Make sure the normal breadcrumb trail is visible again on category pages. */
body#category:not(#checkout) nav.breadcrumb,
body#category:not(#checkout) .breadcrumb {
  display: block !important;
}

/* Home chip: icon only, no text. Keeps the trail compact. */
body:not(#checkout) nav.breadcrumb li:first-child a,
body:not(#checkout) .breadcrumb li:first-child a {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
}

body:not(#checkout) nav.breadcrumb li:first-child a::before,
body:not(#checkout) .breadcrumb li:first-child a::before {
  content: "\f015" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "FontAwesome" !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--ca-primary-dark, #223845) !important;
}

/* Current category/product chip: only the actual category/product breadcrumb text.
   No extra Now browsing / Category labels are generated in this fallback. */
body:not(#checkout) nav.breadcrumb li:last-child a,
body:not(#checkout) nav.breadcrumb li:last-child span,
body:not(#checkout) .breadcrumb li:last-child a,
body:not(#checkout) .breadcrumb li:last-child span {
  font-weight: 850 !important;
}

/* Keep category H1 in DOM but remove visible title block when product-list.tpl uses ph-sr-only. */
.ph-sr-only,
#js-product-list-header.ph-sr-only {
  position: absolute !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;
}

body#category .ph-category-simple-trail-page #products,
body#category .ph-category-products-after-trail {
  margin-top: 0 !important;
}

body#category .ph-category-products-after-trail .products-selection,
body#category .ph-category-products-after-trail #js-product-list-top,
body#category .ph-category-products-after-trail .products-sort-order {
  margin-top: 0 !important;
}

/* Header/top utility color recovery retained from the later experiment. */
#header .header-nav,
#header .header-top-bar,
#header .header-top-wrapper,
#header .iqit-header-top,
#header .iqitheader-top,
.header-banner,
.header-nav {
  background-color: var(--ca-primary, #2F4A5F) !important;
  color: var(--ca-white, #FFFFFF) !important;
}

#header .header-nav a,
#header .header-top-bar a,
#header .header-top-wrapper a,
#header .iqit-header-top a,
#header .iqitheader-top a,
.header-banner a,
.header-nav a {
  color: var(--ca-white, #FFFFFF) !important;
}

#iqitmegamenu-horizontal,
#iqitmegamenu-horizontal .cbp-horizontal > ul > li > a,
#header .col-header-menu a,
#header .iqitmegamenu-wrapper a {
  color: var(--ca-primary-dark, #223845) !important;
  border-color: rgba(47, 74, 95, .22) !important;
}

#iqitmegamenu-horizontal .cbp-horizontal > ul > li > a:hover,
#header .col-header-menu a:hover,
#header .iqitmegamenu-wrapper a:hover {
  color: var(--ca-primary, #2F4A5F) !important;
  background: var(--ca-ink-wash, #EAF0F2) !important;
}
/* =========================================================
   PH Calligraphy Arts — Compact breadcrumb/trail v3.6
   Purpose: keep the strong trail idea, remove the double-wrapped
   outer card, reduce vertical space, and make Home icon-only.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

/* Remove the outer breadcrumb/card wrapper so only the pills remain. */
body:not(#checkout) nav.breadcrumb,
body:not(#checkout) .breadcrumb {
  margin: 8px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body:not(#checkout) nav.breadcrumb ol,
body:not(#checkout) nav.breadcrumb ul,
body:not(#checkout) .breadcrumb ol,
body:not(#checkout) .breadcrumb ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:not(#checkout) nav.breadcrumb li,
body:not(#checkout) .breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Tighten the separator so the trail reads as a path, not a row of cards. */
body:not(#checkout) nav.breadcrumb li + li:before,
body:not(#checkout) nav.breadcrumb li + li::before,
body:not(#checkout) .breadcrumb li + li:before,
body:not(#checkout) .breadcrumb li + li::before {
  content: "›" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 18px !important;
  margin: 0 2px 0 0 !important;
  color: var(--ca-accent, #5D7F8A) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body:not(#checkout) nav.breadcrumb a,
body:not(#checkout) nav.breadcrumb span,
body:not(#checkout) .breadcrumb a,
body:not(#checkout) .breadcrumb span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 31px !important;
  max-width: 420px !important;
  padding: 7px 13px !important;
  overflow: hidden !important;
  border: 1px solid rgba(47, 74, 95, .34) !important;
  border-radius: 999px !important;
  background: var(--ca-white, #FFFFFF) !important;
  color: var(--ca-primary, #2F4A5F) !important;
  box-shadow: 0 3px 9px rgba(29, 37, 41, .035) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:not(#checkout) nav.breadcrumb a:hover,
body:not(#checkout) .breadcrumb a:hover {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  border-color: var(--ca-accent, #5D7F8A) !important;
  color: var(--ca-primary-dark, #223845) !important;
  box-shadow: 0 5px 12px rgba(47, 74, 95, .09) !important;
  transform: translateY(-1px) !important;
}

/* Home: icon-only, no Home text, no first-letter bleed. */
body:not(#checkout) nav.breadcrumb li:first-child a,
body:not(#checkout) .breadcrumb li:first-child a {
  position: relative !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--ca-ink-wash, #EAF0F2) !important;
  border-color: rgba(93, 127, 138, .30) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

body:not(#checkout) nav.breadcrumb li:first-child a *,
body:not(#checkout) .breadcrumb li:first-child a * {
  display: none !important;
}

body:not(#checkout) nav.breadcrumb li:first-child a::before,
body:not(#checkout) .breadcrumb li:first-child a::before {
  content: "\f015" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  font-family: "FontAwesome", "Font Awesome 5 Free", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  color: var(--ca-primary-dark, #223845) !important;
}

/* Current category/product: display only the actual crumb text and keep it compact. */
body:not(#checkout) nav.breadcrumb li:last-child a,
body:not(#checkout) nav.breadcrumb li:last-child span,
body:not(#checkout) .breadcrumb li:last-child a,
body:not(#checkout) .breadcrumb li:last-child span {
  background: var(--ca-primary, #2F4A5F) !important;
  border-color: var(--ca-primary, #2F4A5F) !important;
  color: var(--ca-white, #FFFFFF) !important;
  max-width: 560px !important;
  box-shadow: 0 6px 14px rgba(47, 74, 95, .14) !important;
  font-weight: 850 !important;
}

body#product:not(#checkout) nav.breadcrumb li:last-child a,
body#product:not(#checkout) nav.breadcrumb li:last-child span,
body#product:not(#checkout) .breadcrumb li:last-child a,
body#product:not(#checkout) .breadcrumb li:last-child span {
  max-width: 460px !important;
}

/* Category pages: keep products high now that the trail is compact. */
body#category:not(#checkout) nav.breadcrumb,
body#category:not(#checkout) .breadcrumb {
  margin: 6px 0 12px !important;
}

body#product:not(#checkout) nav.breadcrumb,
body#product:not(#checkout) .breadcrumb {
  margin: 8px 0 14px !important;
}

@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    margin: 6px 0 10px !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li {
    flex: 0 0 auto !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span {
    min-height: 30px !important;
    max-width: 230px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a,
  body:not(#checkout) .breadcrumb li:first-child a {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    max-width: 260px !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — v3.7 Tablet/Mobile Plain Trail
   Purpose: keep the portfolio chip trail on desktop, but use a
   lighter normal breadcrumb line on tablet/mobile so product/category
   pages do not feel crowded.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

/* Tablet + mobile: plain readable breadcrumb, not chip/card UI */
@media (max-width: 1199.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    margin: 8px 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body:not(#checkout) nav.breadcrumb li + li:before,
  body:not(#checkout) nav.breadcrumb li + li::before,
  body:not(#checkout) .breadcrumb li + li:before,
  body:not(#checkout) .breadcrumb li + li::before {
    content: "›" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 2px 0 0 !important;
    color: var(--ca-accent, #5D7F8A) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span,
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    max-width: 300px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  body:not(#checkout) nav.breadcrumb a:hover,
  body:not(#checkout) .breadcrumb a:hover,
  body:not(#checkout) nav.breadcrumb li:last-child a:hover,
  body:not(#checkout) .breadcrumb li:last-child a:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ca-accent-dark, #426974) !important;
    text-decoration: underline !important;
    transform: none !important;
  }

  /* Home is icon-only so it does not waste horizontal space. */
  body:not(#checkout) nav.breadcrumb li:first-child a,
  body:not(#checkout) .breadcrumb li:first-child a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ca-ink-wash, #EAF0F2) !important;
    border: 1px solid rgba(93, 127, 138, .25) !important;
    border-radius: 999px !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a i,
  body:not(#checkout) nav.breadcrumb li:first-child a svg,
  body:not(#checkout) .breadcrumb li:first-child a i,
  body:not(#checkout) .breadcrumb li:first-child a svg {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--ca-primary, #2F4A5F) !important;
    fill: var(--ca-primary, #2F4A5F) !important;
  }

  /* Current crumb is emphasized with weight only, not a filled chip. */
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span {
    color: var(--ca-ink-dark, #172128) !important;
    font-weight: 800 !important;
  }

  body#product:not(#checkout) nav.breadcrumb,
  body#product:not(#checkout) .breadcrumb {
    margin-bottom: 10px !important;
  }
}

/* Small phones: keep the trail even quieter and protect above-the-fold space. */
@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    margin: 6px 0 10px !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    padding: 6px 0 !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span,
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    max-width: 220px !important;
    font-size: 11px !important;
  }

  body:not(#checkout) nav.breadcrumb li + li:before,
  body:not(#checkout) nav.breadcrumb li + li::before,
  body:not(#checkout) .breadcrumb li + li:before,
  body:not(#checkout) .breadcrumb li + li::before {
    font-size: 14px !important;
  }
}


/* =========================================================
   PH Calligraphy Arts — v3.9 Desktop Trail Position Tweak
   Purpose: pull the compact breadcrumb/trail upward into the
   empty strip below the menu so it uses less vertical space.
   Desktop only; tablet/mobile stays on the plain trail treatment.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (min-width: 1200px) {
  body#category:not(#checkout) nav.breadcrumb,
  body#category:not(#checkout) .breadcrumb,
  body#product:not(#checkout) nav.breadcrumb,
  body#product:not(#checkout) .breadcrumb {
    position: relative !important;
    z-index: 5 !important;
    margin-top: -18px !important;
    margin-bottom: 8px !important;
  }

  body#category:not(#checkout) nav.breadcrumb ol,
  body#category:not(#checkout) nav.breadcrumb ul,
  body#category:not(#checkout) .breadcrumb ol,
  body#category:not(#checkout) .breadcrumb ul,
  body#product:not(#checkout) nav.breadcrumb ol,
  body#product:not(#checkout) nav.breadcrumb ul,
  body#product:not(#checkout) .breadcrumb ol,
  body#product:not(#checkout) .breadcrumb ul {
    min-height: 32px !important;
  }

  body#category:not(#checkout) nav.breadcrumb a,
  body#category:not(#checkout) nav.breadcrumb span,
  body#category:not(#checkout) .breadcrumb a,
  body#category:not(#checkout) .breadcrumb span,
  body#product:not(#checkout) nav.breadcrumb a,
  body#product:not(#checkout) nav.breadcrumb span,
  body#product:not(#checkout) .breadcrumb a,
  body#product:not(#checkout) .breadcrumb span {
    min-height: 30px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  body#category:not(#checkout) nav.breadcrumb li:first-child a,
  body#category:not(#checkout) .breadcrumb li:first-child a,
  body#product:not(#checkout) nav.breadcrumb li:first-child a,
  body#product:not(#checkout) .breadcrumb li:first-child a {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — v3.11 Mobile Breadcrumb Wrap
   Purpose: on phones, stop the trail from clipping/swiping mid-name.
   Keep desktop/tablet behavior, but let mobile product/category trails
   wrap to readable multi-line text with the start of each name visible.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    margin: 6px 0 10px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    white-space: normal !important;
  }

  body:not(#checkout) nav.breadcrumb li + li:before,
  body:not(#checkout) nav.breadcrumb li + li::before,
  body:not(#checkout) .breadcrumb li + li:before,
  body:not(#checkout) .breadcrumb li + li::before {
    flex: 0 0 auto !important;
    margin: 1px 3px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span,
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    display: inline !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child,
  body:not(#checkout) .breadcrumb li:first-child {
    flex: 0 0 auto !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a,
  body:not(#checkout) .breadcrumb li:first-child a {
    display: inline-flex !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* On product pages, let the product crumb occupy a full line when needed.
     This preserves the start of the product name instead of clipping from the left. */
  body#product:not(#checkout) nav.breadcrumb li:last-child,
  body#product:not(#checkout) .breadcrumb li:last-child {
    flex: 1 1 100% !important;
    margin-left: 30px !important;
  }
}


/* =========================================================
   PH Calligraphy Arts — v3.12 Mobile Breadcrumb Single Line
   Purpose: mobile should behave like the production breadcrumb line:
   run across the row, stay inside the container, show the start of each
   crumb, and let long names ellipsize instead of stacking or landing
   mid-scroll. Desktop chip trail remains unchanged.
   ========================================================= */
@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    overflow: hidden !important;
    list-style: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: auto !important;
    scrollbar-width: none !important;
  }

  body:not(#checkout) nav.breadcrumb ol::-webkit-scrollbar,
  body:not(#checkout) nav.breadcrumb ul::-webkit-scrollbar,
  body:not(#checkout) .breadcrumb ol::-webkit-scrollbar,
  body:not(#checkout) .breadcrumb ul::-webkit-scrollbar {
    display: none !important;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 34% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child,
  body:not(#checkout) .breadcrumb li:first-child {
    flex: 0 0 auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  body:not(#checkout) nav.breadcrumb li:last-child,
  body:not(#checkout) .breadcrumb li:last-child {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body:not(#checkout) nav.breadcrumb li + li:before,
  body:not(#checkout) nav.breadcrumb li + li::before,
  body:not(#checkout) .breadcrumb li + li:before,
  body:not(#checkout) .breadcrumb li + li::before {
    content: "›" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 2px 0 0 !important;
    color: var(--ca-accent, #5D7F8A) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span,
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span {
    color: var(--ca-ink-dark, #172128) !important;
    font-weight: 800 !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a,
  body:not(#checkout) .breadcrumb li:first-child a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ca-ink-wash, #EAF0F2) !important;
    border: 1px solid rgba(93, 127, 138, .25) !important;
    border-radius: 999px !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a i,
  body:not(#checkout) nav.breadcrumb li:first-child a svg,
  body:not(#checkout) .breadcrumb li:first-child a i,
  body:not(#checkout) .breadcrumb li:first-child a svg {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--ca-primary, #2F4A5F) !important;
    fill: var(--ca-primary, #2F4A5F) !important;
  }

  body:not(#checkout) nav.breadcrumb a:hover,
  body:not(#checkout) .breadcrumb a:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ca-accent-dark, #426974) !important;
    text-decoration: underline !important;
    transform: none !important;
  }
}


/* =========================================================
   PH Calligraphy Arts — v3.13 Mobile Product Breadcrumb Cleanup
   Purpose: on product pages, keep mobile breadcrumb as orientation only.
   The product title already appears directly below, so hide the final
   product crumb on small screens and give category crumbs more room.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (max-width: 767.98px) {
  /* Product page only: remove duplicated product-name crumb on mobile. */
  body#product:not(#checkout) nav.breadcrumb li:last-child,
  body#product:not(#checkout) .breadcrumb li:last-child {
    display: none !important;
  }

  /* Keep the remaining product-page trail on one controlled line. */
  body#product:not(#checkout) nav.breadcrumb ol,
  body#product:not(#checkout) nav.breadcrumb ul,
  body#product:not(#checkout) .breadcrumb ol,
  body#product:not(#checkout) .breadcrumb ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    padding: 7px 0 !important;
  }

  /* Home icon only, fixed width. */
  body#product:not(#checkout) nav.breadcrumb li:first-child,
  body#product:not(#checkout) .breadcrumb li:first-child {
    flex: 0 0 24px !important;
    max-width: 24px !important;
    overflow: visible !important;
  }

  /* Give category/subcategory crumbs usable room now that product title is hidden. */
  body#product:not(#checkout) nav.breadcrumb li:not(:first-child):not(:last-child),
  body#product:not(#checkout) .breadcrumb li:not(:first-child):not(:last-child) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  body#product:not(#checkout) nav.breadcrumb li:not(:first-child):not(:last-child) a,
  body#product:not(#checkout) nav.breadcrumb li:not(:first-child):not(:last-child) span,
  body#product:not(#checkout) .breadcrumb li:not(:first-child):not(:last-child) a,
  body#product:not(#checkout) .breadcrumb li:not(:first-child):not(:last-child) span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* The deepest visible category is now the active trail endpoint. */
  body#product:not(#checkout) nav.breadcrumb li:nth-last-child(2) a,
  body#product:not(#checkout) nav.breadcrumb li:nth-last-child(2) span,
  body#product:not(#checkout) .breadcrumb li:nth-last-child(2) a,
  body#product:not(#checkout) .breadcrumb li:nth-last-child(2) span {
    color: var(--ca-ink-dark, #172128) !important;
    font-weight: 800 !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — v3.15 Mobile Classic Breadcrumb
   Purpose: keep desktop upgraded chip trail, but restore mobile to a
   compact production-style breadcrumb: full path text, slash separators,
   no yellow highlight, and no hidden product crumb.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (max-width: 767.98px) {
  body:not(#checkout) nav.breadcrumb,
  body:not(#checkout) .breadcrumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #f3f4f4 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  body:not(#checkout) nav.breadcrumb ol,
  body:not(#checkout) nav.breadcrumb ul,
  body:not(#checkout) .breadcrumb ol,
  body:not(#checkout) .breadcrumb ul {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
    white-space: normal !important;
  }

  body:not(#checkout) nav.breadcrumb li,
  body:not(#checkout) .breadcrumb li,
  body#product:not(#checkout) nav.breadcrumb li,
  body#product:not(#checkout) .breadcrumb li,
  body#product:not(#checkout) nav.breadcrumb li:last-child,
  body#product:not(#checkout) .breadcrumb li:last-child {
    display: inline !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 10.5px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
  }

  /* Use classic slash separators on mobile instead of chip arrows. */
  body:not(#checkout) nav.breadcrumb li + li:before,
  body:not(#checkout) nav.breadcrumb li + li::before,
  body:not(#checkout) .breadcrumb li + li:before,
  body:not(#checkout) .breadcrumb li + li::before {
    content: "/" !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 6px !important;
    color: rgba(47, 74, 95, .45) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: inherit !important;
  }

  body:not(#checkout) nav.breadcrumb a,
  body:not(#checkout) nav.breadcrumb span,
  body:not(#checkout) .breadcrumb a,
  body:not(#checkout) .breadcrumb span,
  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ca-primary, #2F4A5F) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
    text-decoration: none !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    transform: none !important;
  }

  body:not(#checkout) nav.breadcrumb li:last-child a,
  body:not(#checkout) nav.breadcrumb li:last-child span,
  body:not(#checkout) .breadcrumb li:last-child a,
  body:not(#checkout) .breadcrumb li:last-child span,
  body#product:not(#checkout) nav.breadcrumb li:last-child a,
  body#product:not(#checkout) nav.breadcrumb li:last-child span,
  body#product:not(#checkout) .breadcrumb li:last-child a,
  body#product:not(#checkout) .breadcrumb li:last-child span {
    color: var(--ca-ink-dark, #172128) !important;
    font-weight: 700 !important;
  }

  /* Home remains icon-only, but inline with the production-style breadcrumb text. */
  body:not(#checkout) nav.breadcrumb li:first-child,
  body:not(#checkout) .breadcrumb li:first-child {
    display: inline-flex !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-right: 0 !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a,
  body:not(#checkout) .breadcrumb li:first-child a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ca-ink-wash, #EAF0F2) !important;
    border: 1px solid rgba(93, 127, 138, .25) !important;
    border-radius: 999px !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    box-shadow: none !important;
    vertical-align: middle !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a *,
  body:not(#checkout) .breadcrumb li:first-child a * {
    display: none !important;
  }

  body:not(#checkout) nav.breadcrumb li:first-child a::before,
  body:not(#checkout) .breadcrumb li:first-child a::before {
    content: "\f015" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    font-family: "FontAwesome", "Font Awesome 5 Free", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    color: var(--ca-primary, #2F4A5F) !important;
  }

  body:not(#checkout) nav.breadcrumb a:hover,
  body:not(#checkout) .breadcrumb a:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ca-accent-dark, #426974) !important;
    text-decoration: underline !important;
    transform: none !important;
  }

  body#product:not(#checkout) nav.breadcrumb,
  body#product:not(#checkout) .breadcrumb,
  body#category:not(#checkout) nav.breadcrumb,
  body#category:not(#checkout) .breadcrumb {
    margin-bottom: 10px !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Product List Toolbar v1.1
   Purpose: replace the tall boxed PrestaShop listing controls with
   a compact studio-style control bar and move heavier controls lower.
   Requires the matching PH products-top.tpl, sort-orders.tpl, products.tpl.
   Paste at bottom of /themes/[active-theme]/assets/css/custom.css
   ========================================================= */

body#category #js-product-list-top.ph-products-selection.products-selection,
#js-product-list-top.ph-products-selection.products-selection {
  margin: 10px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body#category #js-product-list-top .ph-product-toolbar,
#js-product-list-top .ph-product-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 40px !important;
  padding: 6px 0 !important;
  border-top: 1px solid rgba(47, 74, 95, .14) !important;
  border-bottom: 1px solid rgba(47, 74, 95, .14) !important;
  background: transparent !important;
}

#js-product-list-top .ph-product-toolbar-left,
#js-product-list-top .ph-product-toolbar-right,
.ph-listing-controls,
.ph-sort-order,
.ph-products-per-page {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#js-product-list-top .ph-product-toolbar-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#js-product-list-top .ph-product-toolbar-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.ph-product-count,
.ph-product-list-bottom-meta .showing {
  color: rgba(29, 37, 41, .72) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.ph-control-label {
  color: rgba(29, 37, 41, .68) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#js-product-list-top .ph-view-switcher {
  gap: 2px !important;
  margin-left: 2px !important;
}

#js-product-list-top .ph-view-switcher a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(47, 74, 95, .46) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}

#js-product-list-top .ph-view-switcher a.current,
#js-product-list-top .ph-view-switcher a:hover {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  color: var(--ca-primary, #2F4A5F) !important;
  transform: translateY(-1px) !important;
}

#js-product-list-top .ph-toolbar-button,
#js-product-list-top .ph-control-select,
.ph-product-list-bottom .ph-control-select {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(47, 74, 95, .28) !important;
  border-radius: 999px !important;
  background: var(--ca-white, #FFFFFF) !important;
  color: var(--ca-primary-dark, #223845) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

#js-product-list-top .ph-control-select {
  min-width: 186px !important;
}

#js-product-list-top .ph-toolbar-button {
  min-width: 104px !important;
  justify-content: center !important;
}

#js-product-list-top .ph-toolbar-button i,
#js-product-list-top .ph-control-select i,
.ph-product-list-bottom .ph-control-select i {
  color: var(--ca-accent, #5D7F8A) !important;
}

.ph-product-list-bottom .ph-products-per-page .ph-control-select {
  min-width: 78px !important;
  padding: 0 11px !important;
}

#js-product-list-top .ph-control-select:hover,
#js-product-list-top .ph-control-select[aria-expanded="true"],
#js-product-list-top .ph-toolbar-button:hover,
.ph-product-list-bottom .ph-control-select:hover,
.ph-product-list-bottom .ph-control-select[aria-expanded="true"] {
  border-color: var(--ca-accent, #5D7F8A) !important;
  background: var(--ca-paper-soft, #FCFAF6) !important;
  color: var(--ca-primary-dark, #223845) !important;
  opacity: 1 !important;
}

.ph-listing-controls .dropdown-menu {
  min-width: 100% !important;
  padding: 6px !important;
  border: 1px solid rgba(47, 74, 95, .18) !important;
  border-radius: 14px !important;
  background: var(--ca-white, #FFFFFF) !important;
  box-shadow: 0 14px 34px rgba(29, 37, 41, .16) !important;
  overflow: hidden !important;
}

.ph-listing-controls .dropdown-item {
  border-radius: 10px !important;
  color: var(--ca-primary-dark, #223845) !important;
  font-size: 13px !important;
}

.ph-listing-controls .dropdown-item.current,
.ph-listing-controls .dropdown-item:hover {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  color: var(--ca-primary-dark, #223845) !important;
}

.ph-product-list-bottom.pagination-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 28px 0 8px !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(47, 74, 95, .14) !important;
}

.ph-product-list-bottom-pages {
  justify-self: center !important;
}

.ph-product-list-bottom-per-page {
  justify-self: end !important;
}

.ph-product-list-bottom .pagination,
.ph-product-list-bottom .page-list {
  margin-bottom: 0 !important;
}

@media (min-width: 1200px) {
  body#category #js-product-list-top.ph-products-selection.products-selection,
  #js-product-list-top.ph-products-selection.products-selection {
    margin-top: 8px !important;
  }
}

@media (max-width: 767.98px) {
  body#category #js-product-list-top.ph-products-selection.products-selection,
  #js-product-list-top.ph-products-selection.products-selection {
    margin: 8px 0 12px !important;
  }

  #js-product-list-top .ph-product-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #js-product-list-top .ph-product-toolbar-left,
  #js-product-list-top .ph-product-toolbar-right,
  #js-product-list-top .ph-listing-controls,
  #js-product-list-top .ph-sort-order {
    display: contents !important;
  }

  #js-product-list-top .ph-toolbar-filter,
  #js-product-list-top .ph-sort-order {
    min-width: 0 !important;
  }

  #js-product-list-top .ph-toolbar-button,
  #js-product-list-top .ph-control-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #js-product-list-top .ph-control-select .select-title-name {
    max-width: calc(100vw - 130px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #js-product-list-top .ph-control-select .fa {
    margin-left: 6px !important;
  }

  .ph-product-list-bottom.pagination-wrapper {
    display: block !important;
    margin-top: 22px !important;
    text-align: center !important;
  }

  .ph-product-list-bottom-meta {
    margin-bottom: 10px !important;
  }

  .ph-product-list-bottom-pages {
    margin-bottom: 0 !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — Product List Button Contrast Fix v1.2
   Purpose: stop product-list CTAs from fading/losing contrast in list view.
   This overrides the older `.btn-product-list:hover { opacity: .6; }` rule.
   Append at bottom of custom.css.
   ========================================================= */

#js-product-list .product-miniature .btn-product-list,
#js-product-list .product-miniature .product-add-cart .btn-product-list,
#js-product-list .product-miniature .input-group-add-cart .btn-product-list,
#js-product-list .products-list .product-miniature .btn-product-list,
#js-product-list .products-grid .product-miniature .btn-product-list {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 18px !important;
  background-color: var(--ca-primary, #2F4A5F) !important;
  border: 1px solid var(--ca-primary, #2F4A5F) !important;
  border-radius: 999px !important;
  color: var(--ca-white, #FFFFFF) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(47, 74, 95, .16) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

#js-product-list .product-miniature .btn-product-list:hover,
#js-product-list .product-miniature .btn-product-list:focus,
#js-product-list .product-miniature .product-add-cart .btn-product-list:hover,
#js-product-list .product-miniature .product-add-cart .btn-product-list:focus,
#js-product-list .product-miniature .input-group-add-cart .btn-product-list:hover,
#js-product-list .product-miniature .input-group-add-cart .btn-product-list:focus,
#js-product-list .products-list .product-miniature .btn-product-list:hover,
#js-product-list .products-list .product-miniature .btn-product-list:focus,
#js-product-list .products-grid .product-miniature .btn-product-list:hover,
#js-product-list .products-grid .product-miniature .btn-product-list:focus {
  background-color: var(--ca-primary-dark, #223845) !important;
  border-color: var(--ca-primary-dark, #223845) !important;
  color: var(--ca-white, #FFFFFF) !important;
  opacity: 1 !important;
  box-shadow: 0 10px 22px rgba(47, 74, 95, .22) !important;
  transform: translateY(-1px) !important;
}

/* Keep disabled/unavailable CTAs readable instead of washed out. */
#js-product-list .product-miniature .btn-product-list.disabled,
#js-product-list .product-miniature .btn-product-list:disabled,
#js-product-list .product-miniature .btn-product-list[disabled],
#js-product-list .product-miniature .btn-product-list.disabled:hover,
#js-product-list .product-miniature .btn-product-list:disabled:hover,
#js-product-list .product-miniature .btn-product-list[disabled]:hover {
  background-color: var(--ca-ink-wash, #EAF0F2) !important;
  border-color: rgba(47, 74, 95, .22) !important;
  color: var(--ca-primary-dark, #223845) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* List view only: give the right-side action area a little breathing room. */
#js-product-list .products-list .product-miniature .product-add-cart,
#js-product-list .products-list .product-miniature .input-group-add-cart {
  text-align: right !important;
}

@media (max-width: 767.98px) {
  #js-product-list .product-miniature .btn-product-list,
  #js-product-list .product-miniature .product-add-cart .btn-product-list,
  #js-product-list .product-miniature .input-group-add-cart .btn-product-list {
    width: 100% !important;
    min-height: 40px !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Product List PH Add To Cart CTA Fix v1.4
   Purpose: keep PH Add To Cart "Select Options" buttons readable inside
   Warehouse product-functional-buttons list view.

   Reason: custom.css has a broad rule for
   `.product-miniature .product-functional-buttons a` that treats every link
   in that area as a secondary/outline button. The PH Add To Cart button also
   lives there, so this more specific rule restores the intended primary CTA.
   ========================================================= */

body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart,
body#category #js-product-list .product-miniature.product-miniature-list .ph-modern-add-to-cart a.ph-modern-add-button,
body#category #js-product-list .product-miniature.product-miniature-list .ph-modern-add-to-cart a.ph-modern-options-button,
body#category #js-product-list .product-miniature.product-miniature-list .ph-modern-add-to-cart a.ph-modern-customise-button,
body#category #js-product-list .product-miniature.product-miniature-list .ph-modern-add-to-cart a.ph-js-option-to-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  min-width: 150px !important;
  padding: 8px 18px !important;
  border: 1px solid var(--ca-primary, #2F4A5F) !important;
  border-radius: 999px !important;
  background: var(--ca-primary, #2F4A5F) !important;
  background-color: var(--ca-primary, #2F4A5F) !important;
  background-image: none !important;
  color: var(--ca-white, #FFFFFF) !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(47, 74, 95, .16) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button:hover,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button:focus,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button:active,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button:hover,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button:focus,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button:active,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button:hover,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button:focus,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button:active,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart:hover,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart:focus,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart:active {
  border-color: var(--ca-primary-dark, #223845) !important;
  background: var(--ca-primary-dark, #223845) !important;
  background-color: var(--ca-primary-dark, #223845) !important;
  background-image: none !important;
  color: var(--ca-white, #FFFFFF) !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(47, 74, 95, .22) !important;
  transform: translateY(-1px) !important;
}

body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button:hover *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button:hover *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button:hover *,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart:hover * {
  color: var(--ca-white, #FFFFFF) !important;
  fill: var(--ca-white, #FFFFFF) !important;
  stroke: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button svg,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button svg,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button svg,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart svg,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button svg path,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button svg path,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button svg path,
body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart svg path {
  fill: var(--ca-white, #FFFFFF) !important;
  opacity: 1 !important;
}

/* Keep the quick-view eye link separate; do not turn it into a primary CTA. */
body#category #js-product-list .product-miniature .product-functional-buttons > a.js-quick-view-iqit,
body#category #js-product-list .product-miniature .product-functional-buttons-links > a.js-quick-view-iqit {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ca-primary, #2F4A5F) !important;
  box-shadow: none !important;
}

@media (max-width: 767.98px) {
  body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-add-button,
  body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-options-button,
  body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-modern-customise-button,
  body#category #js-product-list .product-miniature .product-functional-buttons .ph-modern-add-to-cart a.ph-js-option-to-cart {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Product List Title Capitalization v1.5
   Purpose: visually title-case product names in listing pages so
   product titles entered in lowercase still display cleanly.
   Scope: product listing cards only; does not alter product data,
   URLs, SEO schema, analytics payloads, or back-office values.
   Append at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

#js-product-list .product-miniature .product-title,
#js-product-list .product-miniature .product-title a,
#js-product-list .product-miniature h2.product-title,
#js-product-list .product-miniature h2.product-title a,
#js-product-list .product-miniature h3.product-title,
#js-product-list .product-miniature h3.product-title a,
#js-product-list .products-grid .product-miniature .product-title,
#js-product-list .products-grid .product-miniature .product-title a,
#js-product-list .products-list .product-miniature .product-title,
#js-product-list .products-list .product-miniature .product-title a,
#js-product-list .product-miniature-grid .product-title,
#js-product-list .product-miniature-grid .product-title a,
#js-product-list .product-miniature-list .product-title,
#js-product-list .product-miniature-list .product-title a {
  text-transform: capitalize !important;
}

/* Keep the link itself inheriting the existing Calligraphy Arts palette/treatment. */
#js-product-list .product-miniature .product-title a {
  color: inherit;
}

/* =========================================================
   PH Calligraphy Arts — Product List Card Alignment v1.6
   Purpose: clean list-view product rows: hide SKU/brand, put reviews
   directly under the product title, and align price/CTA/action areas.
   Requires catalog/_partials/miniatures/product-list.tpl v1.6 for best result.
   Safe fallback CSS also hides the old SKU/brand if cached template remains.
   ========================================================= */

/* Fallback: hide the two old metadata rows even if the updated template is not yet active. */
#js-product-list .product-miniature-list .product-reference,
#js-product-list .product-miniature-list .product-brand {
  display: none !important;
}

#js-product-list .product-miniature-list {
  overflow: hidden !important;
  border: 1px solid rgba(47, 74, 95, .20) !important;
  border-radius: 0 !important;
  background: var(--ca-white, #FFFFFF) !important;
  box-shadow: 0 8px 24px rgba(29, 37, 41, .055) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#js-product-list .product-miniature-list:hover {
  border-color: rgba(93, 127, 138, .46) !important;
  box-shadow: 0 12px 34px rgba(29, 37, 41, .10) !important;
  transform: translateY(-1px) !important;
}

#js-product-list .product-miniature-list .product-miniature-list-row {
  align-items: stretch !important;
  min-height: 252px !important;
  padding: 22px 20px !important;
}

#js-product-list .product-miniature-list .col-description {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#js-product-list .product-miniature-list .product-title {
  margin: 0 0 6px !important;
  color: var(--ca-primary-dark, #223845) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
  text-align: left !important;
  text-transform: capitalize !important;
}

#js-product-list .product-miniature-list .product-title a {
  color: var(--ca-primary-dark, #223845) !important;
  text-decoration: none !important;
  border: 0 !important;
}

#js-product-list .product-miniature-list .product-title a:hover {
  color: var(--ca-primary, #2F4A5F) !important;
}

/* Reviews directly under title, not visually stranded between brand/SKU and description. */
#js-product-list .product-miniature-list .ph-product-list-review-row,
#js-product-list .product-miniature-list .stars-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 22px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

#js-product-list .product-miniature-list .ph-product-list-review-row:empty {
  display: none !important;
}

#js-product-list .product-miniature-list .stars-container > div,
#js-product-list .product-miniature-list .ph-lgc-list-rating {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#js-product-list .product-miniature-list .ph-lgc-list-rating-link,
#js-product-list .product-miniature-list .comment_anchor {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--ca-primary, #2F4A5F) !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

#js-product-list .product-miniature-list .ph-lgc-list-rating-link img,
#js-product-list .product-miniature-list .comment_anchor img {
  display: block !important;
  width: 92px !important;
  max-width: 92px !important;
  height: auto !important;
  margin: 0 !important;
}

#js-product-list .product-miniature-list .product-description-short {
  max-width: 690px !important;
  margin: 0 !important;
  color: rgba(29, 37, 41, .76) !important;
  font-size: 15px !important;
  line-height: 1.42 !important;
}

#js-product-list .product-miniature-list .products-variants {
  margin-top: 12px !important;
}

#js-product-list .product-miniature-list .product-availability {
  margin-top: auto !important;
  padding-top: 10px !important;
}

#js-product-list .product-miniature-list .product-availability .badge {
  border-radius: 0 !important;
  font-weight: 850 !important;
}

#js-product-list .product-miniature-list .col-buy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  width: 178px !important;
  min-width: 178px !important;
  padding-left: 18px !important;
  text-align: right !important;
}

#js-product-list .product-miniature-list .product-price-and-shipping {
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  text-align: right !important;
}

#js-product-list .product-miniature-list .product-price-and-shipping .product-price,
#js-product-list .product-miniature-list .product-price-and-shipping .price {
  color: var(--ca-primary-dark, #223845) !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
}

#js-product-list .product-miniature-list .ph-add-to-cart,
#js-product-list .product-miniature-list .product-functional-buttons {
  width: 100% !important;
}

#js-product-list .product-miniature-list .product-functional-buttons {
  margin-top: 7px !important;
}

#js-product-list .product-miniature-list .product-functional-buttons-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#js-product-list .product-miniature-list .js-quick-view-iqit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ca-primary, #2F4A5F) !important;
  box-shadow: none !important;
}

#js-product-list .product-miniature-list .js-quick-view-iqit:hover {
  background: var(--ca-ink-wash, #EAF0F2) !important;
  color: var(--ca-primary-dark, #223845) !important;
}

@media (min-width: 768px) {
  #js-product-list .product-miniature-list .product-miniature-list-row > .col-12.col-sm-3 {
    flex: 0 0 238px !important;
    max-width: 238px !important;
  }

  #js-product-list .product-miniature-list .product-thumbnail,
  #js-product-list .product-miniature-list .thumbnail-container {
    max-width: 214px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 767.98px) {
  #js-product-list .product-miniature-list .product-miniature-list-row {
    min-height: 0 !important;
    padding: 16px !important;
  }

  #js-product-list .product-miniature-list .product-title {
    margin-top: 12px !important;
    font-size: 17px !important;
  }

  #js-product-list .product-miniature-list .col-buy {
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
    padding-left: 0 !important;
    padding-top: 14px !important;
    text-align: left !important;
  }

  #js-product-list .product-miniature-list .product-price-and-shipping {
    text-align: left !important;
  }

  #js-product-list .product-miniature-list .product-functional-buttons-links {
    justify-content: flex-start !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Desktop Category Bar v1.1
   Purpose: modernize Warehouse/IQIT desktop menu into a refined
   calligraphy category bar with clear active parent/category state.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (min-width: 900px) {
  body:not(#checkout) .iqit-megamenu-container {
    position: relative;
    z-index: 60;
    padding-top: 6px;
    padding-bottom: 8px;
    background: #fff;
  }

  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid rgba(93, 127, 138, .24) !important;
    border-radius: 999px !important;
    background: var(--ca-paper-soft, #FCFAF6) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow: 0 6px 16px rgba(29, 37, 41, .045) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    letter-spacing: .005em !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link .cbp-tab-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link .cbp-submenu-aindicator {
    margin: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    opacity: .72 !important;
    transform: translateY(1px) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link {
    border-color: var(--ca-accent, #5D7F8A) !important;
    background: var(--ca-ink-wash, #EAF0F2) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow: 0 10px 24px rgba(47, 74, 95, .13) !important;
    transform: translateY(-1px) !important;
  }

  /* Active category state: CSS-only mapping from PrestaShop body category classes to IQIT menu tabs. */
  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link {
    background: var(--ca-primary, #2F4A5F) !important;
    border-color: var(--ca-primary, #2F4A5F) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(47, 74, 95, .24) !important;
    transform: translateY(-1px) !important;
  }

  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link .cbp-submenu-aindicator {
    color: #fff !important;
    opacity: .9 !important;
  }

  /* Modernize the hover mega menu panel without changing the existing menu content. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    top: calc(100% + 10px) !important;
    padding: 0 !important;
    border: 1px solid rgba(93, 127, 138, .18) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(252,250,246,.98) 0%, rgba(255,255,255,.98) 64%, rgba(234,240,242,.72) 100%) !important;
    box-shadow: 0 24px 70px rgba(29, 37, 41, .16) !important;
    overflow: hidden !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-hrsub-inner {
    padding: 26px 30px 30px !important;
    background: transparent !important;
  }

  body:not(#checkout) #cbp-hrmenu .iqitmegamenu-submenu-container {
    max-width: 1180px !important;
    background: transparent !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-menu-column,
  body:not(#checkout) #cbp-hrmenu .cbp-menu-column-inner {
    background: transparent !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-column-title,
  body:not(#checkout) #cbp-hrmenu .cbp-category-title {
    display: inline-flex !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ca-primary-dark, #223845) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-links,
  body:not(#checkout) #cbp-hrmenu .cbp-category-tree,
  body:not(#checkout) #cbp-hrmenu .cbp-valinks {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-links li,
  body:not(#checkout) #cbp-hrmenu .cbp-category-tree li,
  body:not(#checkout) #cbp-hrmenu .cbp-valinks li {
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-links a,
  body:not(#checkout) #cbp-hrmenu .cbp-category-tree a,
  body:not(#checkout) #cbp-hrmenu .cbp-valinks a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ca-ink-dark, #172128) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-links a:hover,
  body:not(#checkout) #cbp-hrmenu .cbp-category-tree a:hover,
  body:not(#checkout) #cbp-hrmenu .cbp-valinks a:hover,
  body:not(#checkout) #cbp-hrmenu .cbp-category-title:hover {
    color: var(--ca-primary, #2F4A5F) !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-links a:hover::after,
  body:not(#checkout) #cbp-hrmenu .cbp-category-tree a:hover::after,
  body:not(#checkout) #cbp-hrmenu .cbp-valinks a:hover::after {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--ca-accent, #5D7F8A);
    opacity: .8;
  }

  body:not(#checkout) #cbp-hrmenu .iqitmegamenu-submenu-container img {
    border-radius: 16px !important;
    filter: drop-shadow(0 14px 24px rgba(29,37,41,.10));
  }
}

/* Keep the desktop menu CSS from affecting the mobile menu/offcanvas layout. */
@media (max-width: 991.98px) {
  body:not(#checkout) #iqitmegamenu-horizontal .cbp-horizontal > ul > li > a,
  body:not(#checkout) #header .iqitmegamenu-wrapper a {
    border-radius: inherit;
  }
}



/* =========================================================
   PH Calligraphy Arts — Menu breakpoint bridge v1.1
   Purpose: Warehouse switches to the mobile header just under 992px.
   Keep the new desktop category pills alive on narrow desktop/tablet-landscape
   widths, then allow the normal mobile header below 900px.
   ========================================================= */

@media (min-width: 900px) and (max-width: 991.98px) {
  body:not(#checkout) #mobile-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:not(#checkout) #desktop-header,
  body:not(#checkout) #desktop-header .header-top,
  body:not(#checkout) #desktop-header-container,
  body:not(#checkout) .iqit-megamenu-container,
  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body:not(#checkout) #desktop-header .header-top .row.align-items-center {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  body:not(#checkout) #desktop-header .col-header-left {
    flex: 0 0 250px !important;
    max-width: 250px !important;
  }

  body:not(#checkout) #desktop-header .col-header-center {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 320px !important;
  }

  body:not(#checkout) #desktop-header .col-header-right {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link {
    min-height: 40px !important;
    padding: 9px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 899.98px) {
  body:not(#checkout) .iqit-megamenu-container,
  body:not(#checkout) #iqitmegamenu-horizontal {
    display: none !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — Menu hover + mobile sort stability v1
   Purpose:
   1) Keep IQIT desktop mega menu open while cursor moves from pill to submenu.
   2) Restore mobile sort dropdown behavior and show a clear Sort by label.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

/* Desktop/tablet-landscape mega menu: remove the hover dead-zone. */
@media (min-width: 900px) {
  body:not(#checkout) .iqit-megamenu-container,
  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu,
  body:not(#checkout) #cbp-hrmenu > ul,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab {
    overflow: visible !important;
  }

  body:not(#checkout) .iqit-megamenu-container,
  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu {
    z-index: 1000 !important;
  }

  /* The previous floating gap looked nice but created a mouse-leave gap.
     Keep the submenu flush to the nav item so hover does not collapse. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    top: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 1001 !important;
    pointer-events: auto !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu:hover > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu:hover > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hropen > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-open > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hover > .cbp-hrsub {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Small invisible bridge below the active pill. This protects diagonal cursor movement. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu::after {
    content: "";
    display: none;
    position: absolute;
    left: -6px;
    right: -6px;
    top: 100%;
    height: 12px;
    z-index: 1002;
    background: transparent;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu:hover::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu:hover::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hropen::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-open::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hover::after {
    display: block;
  }
}

/* Mobile product-list controls: do not use display:contents on the dropdown wrapper.
   Bootstrap/Popper needs a real positioned parent for the dropdown to open reliably. */
@media (max-width: 767.98px) {
  body#category #js-product-list-top.ph-products-selection.products-selection,
  #js-product-list-top.ph-products-selection.products-selection {
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
  }

  body#category #js-product-list-top .ph-product-toolbar,
  #js-product-list-top .ph-product-toolbar {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  #js-product-list-top .ph-product-toolbar-left {
    display: none !important;
  }

  #js-product-list-top .ph-product-toolbar-right,
  #js-product-list-top .ph-listing-controls,
  #js-product-list-top .ph-sort-order {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #js-product-list-top .ph-sort-order .ph-control-label,
  #js-product-list-top .ph-sort-order .ph-control-label.hidden-sm-down {
    display: none !important;
  }

  #js-product-list-top .ph-sort-order .ph-control-select {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 38px 0 88px !important;
    border: 1px solid rgba(47, 74, 95, .38) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--ca-primary-dark, #223845) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  #js-product-list-top .ph-sort-order .ph-control-select::before {
    content: "Sort by";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(29, 37, 41, .64) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #js-product-list-top .ph-sort-order .select-title-name {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #js-product-list-top .ph-sort-order .ph-control-select i,
  #js-product-list-top .ph-sort-order .ph-control-select .fa {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ca-primary, #2F4A5F) !important;
  }

  #js-product-list-top .ph-sort-order .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 60vh !important;
    margin: 0 !important;
    padding: 8px !important;
    transform: none !important;
    z-index: 3000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(47, 74, 95, .22) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(29, 37, 41, .20) !important;
  }

  #js-product-list-top .ph-sort-order.show > .dropdown-menu,
  #js-product-list-top .ph-sort-order .dropdown-menu.show,
  #js-product-list-top .ph-sort-order .ph-control-select[aria-expanded="true"] + .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #js-product-list-top .ph-sort-order .dropdown-item {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: var(--ca-primary-dark, #223845) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  #js-product-list-top .ph-sort-order .dropdown-item.current,
  #js-product-list-top .ph-sort-order .dropdown-item:hover,
  #js-product-list-top .ph-sort-order .dropdown-item:focus {
    background: var(--ca-ink-wash, #EAF0F2) !important;
    color: var(--ca-primary-dark, #223845) !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — Menu Depth / Ribbon Polish v4
   Purpose: keep the new pill menu, but remove the flat white-on-white feel.
   Direction: soft contrast navigation band + dimensional paper pills.
   Active state is no longer a filled different color; it uses an ink underline/ring.
   Paste after the previous menu upgrade CSS in custom.css.
   ========================================================= */

@media (min-width: 900px) {
  /* Give the category bar its own visual home instead of floating on plain white. */
  body:not(#checkout) .iqit-megamenu-container {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(93, 127, 138, .12) 0, rgba(93, 127, 138, 0) 34%),
      radial-gradient(circle at 82% 100%, rgba(47, 74, 95, .08) 0, rgba(47, 74, 95, 0) 36%),
      linear-gradient(180deg, #FCFAF6 0%, #F2F5F5 100%) !important;
    border-top: 1px solid rgba(93, 127, 138, .18) !important;
    border-bottom: 1px solid rgba(47, 74, 95, .16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .86),
      0 12px 28px rgba(29, 37, 41, .055) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul {
    gap: 10px !important;
    padding: 0 14px !important;
  }

  /* More crafted paper button: not louder, just less flat. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link {
    position: relative !important;
    overflow: hidden !important;
    min-height: 43px !important;
    padding: 11px 19px 12px !important;
    border: 1px solid rgba(47, 74, 95, .18) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,250,246,.98) 100%) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .92),
      0 1px 0 rgba(255, 255, 255, .75),
      0 8px 18px rgba(29, 37, 41, .065) !important;
  }

  /* Quiet ink line gives every item a handcrafted finish. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 7px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(93, 127, 138, .36) !important;
    opacity: .36 !important;
    transform: scaleX(.72) !important;
    transform-origin: center !important;
    transition: opacity .18s ease, transform .18s ease, background-color .18s ease !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link {
    border-color: rgba(47, 74, 95, .36) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, var(--ca-ink-wash, #EAF0F2) 100%) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 12px 26px rgba(47, 74, 95, .15) !important;
    transform: translateY(-2px) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link::after {
    background: var(--ca-primary, #2F4A5F) !important;
    opacity: .85 !important;
    transform: scaleX(1) !important;
  }

  /* Active state: abandon filled-color nav. Use an ink underline + stronger ring instead. */
  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link {
    background:
      linear-gradient(180deg, #FFFFFF 0%, #F6F8F8 100%) !important;
    border-color: rgba(47, 74, 95, .42) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 0 0 3px rgba(93, 127, 138, .13),
      0 12px 26px rgba(47, 74, 95, .15) !important;
    transform: translateY(-1px) !important;
  }

  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link::after,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link::after,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link::after,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link::after,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link::after,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link::after,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link::after,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link::after,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link::after,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link::after,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link::after,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link::after,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link::after,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link::after,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link::after,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link::after,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link::after,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link::after {
    background: var(--ca-primary, #2F4A5F) !important;
    height: 3px !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link .cbp-submenu-aindicator,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link .cbp-submenu-aindicator {
    color: var(--ca-primary-dark, #223845) !important;
    opacity: .78 !important;
  }

  /* Tie the dropdown panel to the new ribbon so it feels intentional. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    border-top: 3px solid rgba(93, 127, 138, .42) !important;
    background:
      linear-gradient(135deg, rgba(252,250,246,.99) 0%, rgba(255,255,255,.99) 58%, rgba(234,240,242,.82) 100%) !important;
    box-shadow:
      0 4px 0 rgba(255, 255, 255, .72) inset,
      0 26px 74px rgba(29, 37, 41, .18) !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — Menu Paper Band v5
   Purpose: keep the improved pill menu, but move the band back
   into the existing category-description palette.
   Direction: warm paper card, subtle ink accent, no new blue/grey wash.
   Paste after the previous menu upgrade CSS in custom.css.
   ========================================================= */

@media (min-width: 900px) {
  /* Match the category-description language: warm paper, soft border, subtle depth. */
  body:not(#checkout) .iqit-megamenu-container {
    padding-top: 10px !important;
    padding-bottom: 11px !important;
    background:
      linear-gradient(180deg, var(--ca-paper-soft, #FCFAF6) 0%, var(--ca-paper, #F8F6F1) 100%) !important;
    border-top: 1px solid var(--ca-paper-border, #E3DED5) !important;
    border-bottom: 1px solid var(--ca-paper-border, #E3DED5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .88),
      0 10px 24px rgba(29, 37, 41, .055) !important;
  }

  /* Quiet accent rule, borrowed from the category-description left accent but adapted horizontally. */
  body:not(#checkout) .iqit-megamenu-container::before {
    content: "" !important;
    display: block !important;
    height: 4px !important;
    width: min(1180px, calc(100% - 28px)) !important;
    margin: -10px auto 9px !important;
    border-radius: 0 0 999px 999px !important;
    background: linear-gradient(90deg,
      rgba(93, 127, 138, .18) 0%,
      rgba(93, 127, 138, .46) 18%,
      rgba(93, 127, 138, .18) 100%) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul {
    gap: 10px !important;
    padding: 0 14px !important;
  }

  /* Keep the pills improved, but make them white paper sitting on warm paper. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link {
    border-color: rgba(227, 222, 213, .98) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, var(--ca-paper-soft, #FCFAF6) 100%) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .94),
      0 1px 0 rgba(255, 255, 255, .75),
      0 7px 16px rgba(29, 37, 41, .06) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link::after {
    background: rgba(93, 127, 138, .30) !important;
    opacity: .34 !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link {
    border-color: rgba(93, 127, 138, .42) !important;
    background:
      linear-gradient(180deg, #FFFFFF 0%, #FAF8F3 100%) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .96),
      0 12px 26px rgba(47, 74, 95, .13) !important;
    transform: translateY(-2px) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link::after {
    background: var(--ca-accent, #5D7F8A) !important;
    opacity: .88 !important;
  }

  /* Active remains elegant: no filled nav color, just stronger ink/accent treatment. */
  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link {
    background:
      linear-gradient(180deg, #FFFFFF 0%, var(--ca-paper-soft, #FCFAF6) 100%) !important;
    border-color: rgba(93, 127, 138, .46) !important;
    color: var(--ca-primary-dark, #223845) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .96),
      0 0 0 3px rgba(93, 127, 138, .11),
      0 12px 24px rgba(47, 74, 95, .13) !important;
    transform: translateY(-1px) !important;
  }

  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link::after,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link::after,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link::after,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link::after,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link::after,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link::after,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link::after,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link::after,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link::after,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link::after,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link::after,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link::after,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link::after,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link::after,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link::after,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link::after,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link::after,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link::after {
    background: var(--ca-accent, #5D7F8A) !important;
    height: 3px !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  /* Dropdown follows the same warm-paper family, with the ink accent only as trim. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    border-top: 3px solid rgba(93, 127, 138, .40) !important;
    background:
      linear-gradient(135deg, var(--ca-paper-soft, #FCFAF6) 0%, #FFFFFF 62%, var(--ca-paper, #F8F6F1) 100%) !important;
    box-shadow:
      0 4px 0 rgba(255, 255, 255, .72) inset,
      0 24px 68px rgba(29, 37, 41, .16) !important;
  }
}


/* =========================================================
   PH Calligraphy Arts — Rounded Menu Rail v6
   Purpose: keep the v5 warm paper palette, remove the square band feel,
   and make the menu read like a crafted category-description card.
   Paste after v5 menu CSS in /themes/warehouse/assets/css/custom.css.
   ========================================================= */

@media (min-width: 900px) {
  /* The menu band should feel like a rounded paper rail, not a square strip. */
  body:not(#checkout) .iqit-megamenu-container {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 12px 16px 13px 20px !important;
    border: 1px solid var(--ca-paper-border, #E3DED5) !important;
    border-left: 5px solid var(--ca-accent, #5D7F8A) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, var(--ca-paper-soft, #FCFAF6) 0%, var(--ca-paper, #F8F6F1) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .90),
      0 10px 24px rgba(29, 37, 41, .07) !important;
    overflow: visible !important;
  }

  /* Replace the earlier horizontal accent line with the left-card accent language. */
  body:not(#checkout) .iqit-megamenu-container::before {
    content: none !important;
    display: none !important;
  }

  body:not(#checkout) .iqit-megamenu-container::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 1px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    pointer-events: none !important;
  }

  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu {
    overflow: visible !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul {
    align-items: center !important;
    gap: 9px !important;
    padding: 0 !important;
  }

  /* Slightly more handmade: less perfect capsule, more refined soft button. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link {
    border-radius: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .95),
      0 2px 0 rgba(255, 255, 255, .72),
      0 8px 18px rgba(29, 37, 41, .065) !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab > a.nav-link::after {
    bottom: 7px !important;
    width: calc(100% - 38px) !important;
    max-width: 92px !important;
    height: 2px !important;
    border-radius: 999px !important;
  }

  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:hover > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hropen > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-open > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab.cbp-hover > a.nav-link {
    border-radius: 15px !important;
    transform: translateY(-2px) !important;
  }

  /* Keep active subtle, but visible enough when scanning. */
  body#category.category-id-8 #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-parent-8:not(.category-id-48) #cbp-hrmenu-tab-2 > a.nav-link,
  body#category.category-id-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-parent-48 #cbp-hrmenu-tab-11 > a.nav-link,
  body#category.category-id-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-parent-52 #cbp-hrmenu-tab-10 > a.nav-link,
  body#category.category-id-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-parent-63 #cbp-hrmenu-tab-3 > a.nav-link,
  body#category.category-id-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-parent-50 #cbp-hrmenu-tab-6 > a.nav-link,
  body#category.category-id-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-parent-6 #cbp-hrmenu-tab-5 > a.nav-link,
  body#category.category-id-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-parent-78 #cbp-hrmenu-tab-7 > a.nav-link,
  body#category.category-id-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-parent-7 #cbp-hrmenu-tab-8 > a.nav-link,
  body#category.category-id-81 #cbp-hrmenu-tab-4 > a.nav-link,
  body#category.category-id-parent-81 #cbp-hrmenu-tab-4 > a.nav-link {
    border-radius: 15px !important;
    border-color: rgba(93, 127, 138, .50) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .96),
      0 0 0 3px rgba(93, 127, 138, .10),
      0 10px 22px rgba(47, 74, 95, .12) !important;
  }

  /* Dropdown should also avoid square theme-box corners. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    margin-top: 8px !important;
    border: 1px solid var(--ca-paper-border, #E3DED5) !important;
    border-top: 4px solid rgba(93, 127, 138, .44) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-hrsub::before {
    height: 12px !important;
    top: -12px !important;
  }
}
/* =========================================================
   PH Calligraphy Arts — Menu/header shadow cleanup v8
   Purpose: remove the remaining full-width beige/grey divider under
   the rounded desktop menu rail while preserving the rail and pills.
   Paste at the bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (min-width: 900px) {
  /* The visible line is coming from the full-width header/wrapper layer,
     not from the menu pills. Kill only the horizontal divider/shadow layer. */
  body:not(#checkout) #header,
  body:not(#checkout) #desktop-header,
  body:not(#checkout) #desktop-header .header-top,
  body:not(#checkout) #desktop-header-container,
  body:not(#checkout) #main-page-content > header,
  body:not(#checkout) #wrapper {
    border-bottom: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  body:not(#checkout) #header::before,
  body:not(#checkout) #header::after,
  body:not(#checkout) #desktop-header::before,
  body:not(#checkout) #desktop-header::after,
  body:not(#checkout) #desktop-header .header-top::before,
  body:not(#checkout) #desktop-header .header-top::after,
  body:not(#checkout) #main-page-content > header::before,
  body:not(#checkout) #main-page-content > header::after,
  body:not(#checkout) #wrapper::before,
  body:not(#checkout) #wrapper::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
    background: none !important;
    border: 0 !important;
  }

  /* Keep spacing intentional instead of relying on a theme divider/shadow. */
  body:not(#checkout) .iqit-megamenu-container {
    margin-bottom: 18px !important;
  }

  /* Keep the card shadow inside the rail only. */
  body:not(#checkout) .iqit-megamenu-container {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .90),
      0 10px 24px rgba(29, 37, 41, .07) !important;
  }
}


/* =========================================================
   PH Calligraphy Arts — Index wrapper strip cleanup v9
   Purpose: remove the remaining full-width warm/beige strip that
   appears below the rounded desktop menu rail on the index page.
   Diagnosis: this is the top of #wrapper, not the menu rail itself.
   Paste at the bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (min-width: 900px) {
  /* The index page starts a full-width #wrapper immediately after the header.
     Make that wrapper match the normal page canvas instead of showing a warm strip. */
  body#index:not(#checkout) #wrapper {
    background: #FAFAFA !important;
    background-color: #FAFAFA !important;
    background-image: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body#index:not(#checkout) #wrapper::before,
  body#index:not(#checkout) #wrapper::after,
  body#index:not(#checkout) #inner-wrapper::before,
  body#index:not(#checkout) #inner-wrapper::after,
  body#index:not(#checkout) #content-wrapper::before,
  body#index:not(#checkout) #content-wrapper::after,
  body#index:not(#checkout) #main::before,
  body#index:not(#checkout) #main::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body#index:not(#checkout) #inner-wrapper,
  body#index:not(#checkout) #content-wrapper,
  body#index:not(#checkout) #main,
  body#index:not(#checkout) #content.page-home {
    background: transparent !important;
    background-image: none !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  /* Keep the menu rail shadow contained and reduce the chance that the shadow
     reads as a full-width horizontal divider on the home page. */
  body#index:not(#checkout) .iqit-megamenu-container {
    margin-bottom: 28px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .90),
      0 7px 18px rgba(29, 37, 41, .045) !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Header Overlay Stack Fix v1.8
   Purpose: preserve the upgraded rounded menu rail while allowing
   header overlays (cart, account, recently viewed) to display above it.
   Paste at bottom of /themes/warehouse/assets/css/custom.css
   ========================================================= */

@media (min-width: 900px) {
  /* Keep the header layers visible above the category menu rail.
     The menu rail is intentionally left at its existing z-index so the
     v5/v6/v8/v9 menu design remains untouched. */
  body:not(#checkout) #header,
  body:not(#checkout) .header-nav,
  body:not(#checkout) #desktop-header,
  body:not(#checkout) #desktop-header .header-top,
  body:not(#checkout) #desktop-header-container {
    position: relative !important;
    overflow: visible !important;
  }

  body:not(#checkout) .header-nav {
    z-index: 5200 !important;
  }

  body:not(#checkout) #desktop-header,
  body:not(#checkout) #desktop-header .header-top,
  body:not(#checkout) #desktop-header-container {
    z-index: 5100 !important;
  }

  body:not(#checkout) #desktop-header .col-header-right,
  body:not(#checkout) #desktop-header .header-btn-w,
  body:not(#checkout) #header-user-btn,
  body:not(#checkout) #ps-shoppingcart-wrapper,
  body:not(#checkout) #ps-shoppingcart,
  body:not(#checkout) #blockcart {
    position: relative !important;
    z-index: 5300 !important;
    overflow: visible !important;
  }

  /* Cart/account dropdowns must beat the menu rail and mega-menu panel. */
  body:not(#checkout) #header-user-btn .dropdown-menu,
  body:not(#checkout) #ps-shoppingcart .dropdown-menu,
  body:not(#checkout) #ps-shoppingcart .dropdown-menu-custom,
  body:not(#checkout) #_desktop_blockcart-content,
  body:not(#checkout) #blockcart-content {
    z-index: 9000 !important;
  }

  /* Recently viewed module: keep the trigger and flyout above the menu rail.
     Scoped to the header/top area first, with module-name fallbacks because
     this module may render its panel outside the immediate trigger wrapper. */
  body:not(#checkout) #header [class*="phviewed"],
  body:not(#checkout) #header [id*="phviewed"],
  body:not(#checkout) .header-nav [class*="phviewed"],
  body:not(#checkout) .header-nav [id*="phviewed"],
  body:not(#checkout) [class*="phviewedproduct"],
  body:not(#checkout) [id*="phviewedproduct"],
  body:not(#checkout) [class*="ph-viewed"],
  body:not(#checkout) [id*="ph-viewed"] {
    position: relative !important;
    z-index: 8800 !important;
  }

  body:not(#checkout) #header [class*="phviewed"] .dropdown-menu,
  body:not(#checkout) #header [id*="phviewed"] .dropdown-menu,
  body:not(#checkout) .header-nav [class*="phviewed"] .dropdown-menu,
  body:not(#checkout) .header-nav [id*="phviewed"] .dropdown-menu,
  body:not(#checkout) [class*="phviewedproduct"] .dropdown-menu,
  body:not(#checkout) [id*="phviewedproduct"] .dropdown-menu,
  body:not(#checkout) [class*="ph-viewed"] .dropdown-menu,
  body:not(#checkout) [id*="ph-viewed"] .dropdown-menu {
    z-index: 9100 !important;
  }

  /* Keep Bootstrap/warehouse dropdowns from being clipped by header wrappers. */
  body:not(#checkout) #header .dropdown,
  body:not(#checkout) #header .dropdown-menu,
  body:not(#checkout) #desktop-header .dropdown,
  body:not(#checkout) #desktop-header .dropdown-menu,
  body:not(#checkout) .header-nav .dropdown,
  body:not(#checkout) .header-nav .dropdown-menu {
    overflow: visible !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Header Overlay Stack Fix v1.9
   Purpose: repair v1.8 overlay stacking without allowing the
   recently viewed dropdown to expand the blue header/nav bar.

   Use: append after v1.8 at the bottom of custom.css.
   ========================================================= */

@media (min-width: 900px) {
  /* Keep the nav wrapper compact. The flyouts should overlay the page;
     they should never participate in header-nav height calculation. */
  body:not(#checkout) #header,
  body:not(#checkout) .header-nav,
  body:not(#checkout) .header-nav > .container,
  body:not(#checkout) .header-nav > .container > .row {
    overflow: visible !important;
  }

  body:not(#checkout) .header-nav > .container > .row {
    align-items: center !important;
  }

  /* The viewed-products wrapper can be relative for anchoring. */
  body:not(#checkout) #header #ph-viewedproduct-button,
  body:not(#checkout) .header-nav #ph-viewedproduct-button {
    position: relative !important;
    z-index: 9300 !important;
    overflow: visible !important;
  }

  /* Critical correction: v1.8 used broad ph-viewed selectors that can
     accidentally make the dropdown position:relative. That puts the
     full product grid into the header flow and creates the giant blue band.
     Force the flyout back to absolute overlay behavior. */
  body:not(#checkout) #header #ph-viewedproduct-button > .ph-viewedproduct-dropdown,
  body:not(#checkout) #header #ph-viewedproduct-button > .dropdown-menu,
  body:not(#checkout) .header-nav #ph-viewedproduct-button > .ph-viewedproduct-dropdown,
  body:not(#checkout) .header-nav #ph-viewedproduct-button > .dropdown-menu,
  body:not(#checkout) #ph-viewedproduct-menu-PC.ph-viewedproduct-dropdown {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9400 !important;
    max-width: min(1180px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  /* When the module/Bootstrap opens the dropdown, keep it as an overlay.
     Do not force display:block globally; let the module decide open/closed. */
  body:not(#checkout) #header #ph-viewedproduct-button.show > .ph-viewedproduct-dropdown,
  body:not(#checkout) #header #ph-viewedproduct-button.open > .ph-viewedproduct-dropdown,
  body:not(#checkout) #header #ph-viewedproduct-button.dropdown.show > .ph-viewedproduct-dropdown,
  body:not(#checkout) #header #ph-viewedproduct-button > .ph-viewedproduct-dropdown.show,
  body:not(#checkout) .header-nav #ph-viewedproduct-button.show > .ph-viewedproduct-dropdown,
  body:not(#checkout) .header-nav #ph-viewedproduct-button.open > .ph-viewedproduct-dropdown,
  body:not(#checkout) .header-nav #ph-viewedproduct-button.dropdown.show > .ph-viewedproduct-dropdown,
  body:not(#checkout) .header-nav #ph-viewedproduct-button > .ph-viewedproduct-dropdown.show {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9400 !important;
  }

  /* Keep cart/account dropdowns above the menu, but also as overlays. */
  body:not(#checkout) #header-user-btn > .dropdown,
  body:not(#checkout) #ps-shoppingcart,
  body:not(#checkout) #blockcart {
    position: relative !important;
    z-index: 9300 !important;
    overflow: visible !important;
  }

  body:not(#checkout) #header-user-btn .dropdown-menu,
  body:not(#checkout) #ps-shoppingcart > .dropdown-menu,
  body:not(#checkout) #ps-shoppingcart .dropdown-menu-custom,
  body:not(#checkout) #_desktop_blockcart-content {
    position: absolute !important;
    z-index: 9400 !important;
  }

  /* Preserve the upgraded menu rail below header overlays. */
  body:not(#checkout) .iqit-megamenu-container,
  body:not(#checkout) #iqitmegamenu-wrapper,
  body:not(#checkout) .container-iqitmegamenu,
  body:not(#checkout) #iqitmegamenu-horizontal,
  body:not(#checkout) #cbp-hrmenu {
    z-index: 1000 !important;
  }

  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    z-index: 1001 !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Multi-row IQIT menu hover corridor v10.1
   Purpose: keep the active parent menu item open while the cursor
   travels across wrapped lower menu rows to the submenu panel.

   Why this is needed: IQIT positions .cbp-hrsub beneath the complete
   wrapped menu rail. A first-row parent therefore loses :hover when the
   cursor crosses a second-row top-level item. This invisible corridor is
   attached to the real IQIT parent link and preserves the hover path.
   ========================================================= */

@media (min-width: 900px) {
  /* The active item must stack above the wrapped sibling rows. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu:hover,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu:hover,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hropen,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-open,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hover {
    z-index: 1250 !important;
  }

  /* The link is the stable anchor for the invisible hover corridor.
     Override the earlier overflow:hidden rule so the corridor is not clipped. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu > a.nav-link,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu > a.nav-link {
    position: relative !important;
    overflow: visible !important;
  }

  /* Disable the older 12px LI bridge; it is too short once the menu wraps. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu::after,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu::after {
    content: none !important;
    display: none !important;
  }

  /* Invisible mouse corridor. It overlays wrapped sibling buttons while the
     parent is open, but remains below the actual submenu so submenu links work. */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu:hover > a.nav-link::before,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu:hover > a.nav-link::before,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hropen > a.nav-link::before,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-open > a.nav-link::before,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hover > a.nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: -120px !important;
    right: -120px !important;
    top: calc(100% - 2px) !important;
    height: 220px !important;
    z-index: 1 !important;
    display: block !important;
    background: rgba(255, 255, 255, .001) !important;
    pointer-events: auto !important;
  }

  /* Final cascade correction: v6 later restored an 8px dead zone.
     Keep the panel flush with the bottom of the complete menu rail. */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    top: 100% !important;
    margin-top: 0 !important;
    z-index: 1300 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   PH Calligraphy Arts — Desktop Menu Hover Intent v10.2
   Purpose: prevent submenu flashes when the cursor merely passes
   across a top-level menu item. A deliberate hover opens normally
   after a short delay. The existing multi-row hover corridor remains
   intact so visitors can still move into wrapped-row submenus.
   ========================================================= */

@media (min-width: 900px) {
  /*
   * Closed state:
   * - Keep the submenu visually hidden.
   * - A small close grace period prevents accidental collapse while
   *   moving between the parent item and its submenu.
   */
  body:not(#checkout) #cbp-hrmenu .cbp-hrsub {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity 120ms ease 90ms,
      visibility 0s linear 210ms !important;
  }

  /*
   * Open state:
   * - 180ms hover-intent delay filters out cursor pass-through.
   * - Works with both CSS :hover and IQIT's JavaScript open classes.
   */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submeu:hover > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-has-submenu:hover > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hropen > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-open > .cbp-hrsub,
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hover > .cbp-hrsub {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      opacity 140ms ease 180ms,
      visibility 0s linear 180ms !important;
  }

  /*
   * Keyboard navigation should remain immediate and predictable.
   */
  body:not(#checkout) #cbp-hrmenu > ul > li.cbp-hrmenu-tab:focus-within > .cbp-hrsub {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
}