/* ==========================================================================
   Posh product page polish
   CSS only. No theme files touched, nothing hidden or moved, no scripts.
   Part 1 only changes product pages. Part 2 is site-wide and optional.
   To remove: delete this block from the Magento design configuration.
   ========================================================================== */

/* ---------- PART 1: PRODUCT PAGES ONLY ---------- */

/* Description text: easier to read (line length, darker grey, spacing) */
body.catalog-product-view .product.attribute.description .value p {
  max-width: 72ch;
  color: #3d3d3d;
  line-height: 1.7;
  margin: 0 0 1.1em;
}

/* Feature list: a tidy two-column table (label left, value right).
   Only lists that START and END with a bold-label item are changed; any other list keeps the theme's bullets.
   (CSS cannot check every item, so a plain item in the middle of a labelled list just gets a full-width row.) */
body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong) {
  max-width: 72ch;
  list-style: none;
  margin: 1.4em 0 1.6em;
  padding: 0;
  border-top: 1px solid #e3e3e3;
}
:is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li {
  display: block;                 /* undo the theme's flex, which ate the space after the label */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-height: 2.6em;
  line-height: 1.5;
  color: #3d3d3d;
  border-bottom: 1px solid #e3e3e3;
}
:is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li:has(> strong),
:is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li:has(> span > strong) {
  padding-left: 12.5rem;          /* value column starts here */
}
/* label sits in its own column; works with or without a span around the item */
:is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li > strong,
:is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li > span > strong {
  position: absolute;
  left: 0;
  top: 10px;
  width: 11.5rem;
  color: #222529;
  font-weight: 600;
}
/* small screens: label above value instead of side by side */
@media (max-width: 600px) {
  :is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li:has(> strong),
  :is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li:has(> span > strong) {
    padding-left: 0;
  }
  :is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li > strong,
  :is(body.catalog-product-view .product.attribute.description .value ul:has(> li:first-child > strong, > li:first-child > span > strong):has(> li:last-child > strong, > li:last-child > span > strong)) > li > span > strong {
    position: static;
    display: block;
    width: auto;
  }
}

/* Tabs (computer screens only; phones keep the theme's own rows):
   bigger tap area, hover, clear active tab, visible keyboard focus */
@media (min-width: 768px) {
  body.catalog-product-view .product.data.items > .item.title {
    min-height: 44px;
    height: auto;
    transition: background-color 150ms ease-out;
  }
  body.catalog-product-view .product.data.items > .item.title > a.switch {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    height: 100%;
    padding: 0 14px;
    transition: background-color 150ms ease-out, color 150ms ease-out;
  }
  body.catalog-product-view .product.data.items > .item.title:hover:not(.active) {
    background-color: #f0f0f0;
  }
  body.catalog-product-view .product.data.items > .item.title.active {
    background-color: #222529;
  }
  body.catalog-product-view .product.data.items > .item.title.active > a.switch {
    color: #fff;
    font-weight: 600;
  }
  body.catalog-product-view .product.data.items > .item.title:not(.active) > a.switch {
    color: #6b707c;               /* darker grey so unselected tab names are readable */
  }
  body.catalog-product-view .product.data.items > .item.title > a.switch:focus-visible {
    outline: 3px solid #007cba;
    outline-offset: 2px;
  }
}

/* Add to Cart: hover and press feedback */
body.catalog-product-view .action.tocart {
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out, transform 100ms ease-out;
}
body.catalog-product-view .action.tocart:hover {
  /* the theme's own hover colour is kept; only a soft shadow is added */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
body.catalog-product-view .action.tocart:active {
  transform: translateY(1px);
  box-shadow: none;
}
body.catalog-product-view .action.tocart:focus-visible {
  outline: 3px solid #007cba;
  outline-offset: 2px;
}

/* Same slightly rounded corners on quantity box, wishlist and compare buttons */
body.catalog-product-view .action.tocart,
body.catalog-product-view .box-tocart .field.qty,
body.catalog-product-view .box-tocart input.qty,
body.catalog-product-view .action.towishlist,
body.catalog-product-view .action.tocompare {
  border-radius: 4px;
}
body.catalog-product-view .action.towishlist,
body.catalog-product-view .action.tocompare {
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
body.catalog-product-view .action.towishlist:hover,
body.catalog-product-view .action.tocompare:hover {
  border-color: #222529;
  background-color: #f6f6f6;
}

/* "You may also like" cards: titles wrap onto up to 3 lines (no cut-off dots), gentle lift and image zoom */
body.catalog-product-view .block.upsell .product-item-name {
  height: auto;
}
body.catalog-product-view .block.upsell .product-item-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  height: auto;
  min-height: 4.2em;              /* every card reserves 3 lines so prices line up */
  line-height: 1.4;
}
body.catalog-product-view .block.upsell .owl-stage-outer {
  padding: 8px 0 14px;            /* room so the lift and shadow are not clipped... */
  margin: -8px 0 -14px;           /* ...without moving anything else on the page */
}
body.catalog-product-view .block.upsell .product-item-info {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
body.catalog-product-view .block.upsell .product-item-info:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
body.catalog-product-view .block.upsell .product-item-photo {
  overflow: hidden;
}
body.catalog-product-view .block.upsell .product-image-photo {
  transition: transform 300ms ease-out;
}
body.catalog-product-view .block.upsell .product-item-info:hover .product-image-photo {
  transform: scale(1.04);
}

/* Contrast fixes on product pages (small, text only, all now 4.5:1 or better) */
body.catalog-product-view .product-reviews-summary .action.add,          /* "Be the first to review" in the buy box */
body.catalog-product-view .product-reviews-summary .action.add:visited { color: #757575; }
body.catalog-product-view .reviews-actions a.add-review,                 /* same link in the sticky bar */
body.catalog-product-view .product.attribute.description .value a { color: #0d78c9; }
body.catalog-product-view .product.attribute.sku .type,
body.catalog-product-view .product-info-stock-sku .stock,
body.catalog-product-view .product.attribute.overview .value { color: #757575; }

/* Switch off every movement above for people who ask their device for less motion */
@media (prefers-reduced-motion: reduce) {
  body.catalog-product-view .product.data.items > .item.title,
  body.catalog-product-view .product.data.items > .item.title > a.switch,
  body.catalog-product-view .action.tocart,
  body.catalog-product-view .action.towishlist,
  body.catalog-product-view .action.tocompare,
  body.catalog-product-view .block.upsell .product-item-info,
  body.catalog-product-view .block.upsell .product-image-photo {
    transition: none;
  }
  body.catalog-product-view .action.tocart:active,
  body.catalog-product-view .block.upsell .product-item-info:hover,
  body.catalog-product-view .block.upsell .product-item-info:hover .product-image-photo {
    transform: none;
  }
}

/* ==========================================================================
   PART 2: SITE-WIDE (OPTIONAL)
   These change colours on every page of the shop: main menu bar, breadcrumbs,
   newsletter box. Delete this whole part if you only want product pages changed.
   ========================================================================== */

/* Main menu bar (992px and wider only, where the theme shows its blue desktop bar): slightly deeper blue, SALE slightly deeper red.
   Hover, tablet and phone menus are left as the theme has them. !important and :not(#_) because the menu app sets its own colours with an ID-strength rule. */
@media (min-width: 992px) {
  .ninjamenus:not(#_) .level0:not(.item-hovered) > a:not(:hover):not(:focus) { color: #0076b1 !important; }
  .ninjamenus:not(#_) .level0:not(.item-hovered) > a[href*="special-offers"]:not(:hover):not(:focus) { color: #e00008 !important; }
}

/* Breadcrumbs: darker grey */
.page-wrapper > .breadcrumbs .items > li,
.page-wrapper > .breadcrumbs .items > li a,
.page-wrapper > .breadcrumbs strong { color: #696969; }

/* Newsletter: Submit button slightly deeper blue, readable placeholders */
.page-footer form#google_form_widget button.action.submit { background-color: #007cba; }
.page-footer form#google_form_widget input::placeholder { color: #757575; opacity: 1; }