/* Holo Frontier — Product Page Redesign
 * Scoped under .single-product so nothing here leaks onto other page
 * types even if the stylesheet is ever enqueued more broadly.
 */

.single-product {
  --hf-navy: #0d1b3d;
  --hf-gold: #F7C948;
  --hf-orange: #FF6B1A;
  --hf-amber: #854F0B;
  --hf-border: #e6e4df;
  --hf-border-strong: #d8d5cd;
  --hf-text-secondary: #5f5e5a;
  --hf-text-muted: #8a8880;
}

/* ------------------------------------------------------------------
 * Shared page container
 *
 * Wraps the whole product block (breadcrumb, image/info grid, and the
 * description section below it) in one consistently-padded, centered
 * container — see hf_pp_page_wrapper_open()/close() in the PHP, hooked
 * to woocommerce_before_single_product / woocommerce_after_single_product
 * so it brackets everything at once. Blocksy only applies its own width
 * constraint to the image/info grid itself
 * (.product-entry-wrapper.is-width-constrained below), not to the rest
 * of the product template, which is why the description section used
 * to render flush against the browser edge instead of lining up.
 * ------------------------------------------------------------------ */

.hf-pp-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Blocksy renders its own breadcrumb (Customizer "Hero Section" builder,
 * configured by default for the WooCommerce Product content type) above
 * the product block, in ALL CAPS via its own typography settings. This
 * plugin renders its own normal-case one inside .hf-pp-page instead
 * (hf_pp_render_breadcrumb()), so the theme's native one is hidden here
 * rather than shipping both. */
.single-product .hero-section {
  display: none;
}

.hf-pp-breadcrumb {
  display: block;
  font-size: 12px;
  color: var(--hf-text-muted);
  margin: 24px 0 0;
}

.hf-pp-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.hf-pp-breadcrumb a:hover {
  text-decoration: underline;
}

.hf-pp-breadcrumb-sep {
  margin: 0 6px;
}

/* ------------------------------------------------------------------
 * Two-column layout (image left, info right, vertically centered)
 *
 * Blocksy's own gallery-common.scss (compiled into ct-woocommerce-
 * styles-css) sets `.ct-default-gallery .product-entry-wrapper` to
 * display:flex at desktop widths, and — independent of that — sets
 * fixed widths directly on the two children themselves:
 * `.woocommerce-product-gallery { width: 50% }` and
 * `.entry-summary { width: calc(100% - 50%); margin-inline-start: 40px }`.
 * Nothing in this stylesheet touched those two child rules before, so
 * they applied uncontested even once display:grid took over the
 * parent — shrinking the actual gallery to half-width inside an
 * already-correctly-sized frame, and offsetting the info column. Both
 * are reset below with selectors specific enough to beat Blocksy's
 * (4 classes vs its 2) regardless of stylesheet load order.
 * ------------------------------------------------------------------ */

.single-product .product-entry-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 20px;
}

.single-product .product-entry-wrapper .hf-pp-image-frame {
  width: 100%;
}

.single-product .product-entry-wrapper .hf-pp-image-frame .woocommerce-product-gallery {
  width: 100%;
}

.single-product .product-entry-wrapper > .summary.entry-summary {
  width: 100%;
  margin-inline-start: 0;
}

@media (max-width: 768px) {
  .single-product .product-entry-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
 * Signature element: rotating conic-gradient border around the
 * product gallery, plus a soft static drop shadow.
 * ------------------------------------------------------------------ */

@keyframes hf-pp-border-rotate {
  0%   { --hf-pp-angle: 0deg; }
  100% { --hf-pp-angle: 360deg; }
}

@property --hf-pp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.hf-pp-image-frame {
  position: relative;
  border-radius: 14px;
  padding: 4px;
  background: conic-gradient(from var(--hf-pp-angle), var(--hf-navy), var(--hf-orange), var(--hf-gold), var(--hf-navy), var(--hf-amber), var(--hf-orange), var(--hf-navy));
  animation: hf-pp-border-rotate 3s linear infinite;
  box-shadow: 0 6px 20px rgba(13, 27, 61, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .hf-pp-image-frame {
    animation: none;
  }
}

.hf-pp-image-frame-inner {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  background: #ffffff;
  padding: 12px;
}

.hf-pp-image-frame-inner .woocommerce-product-gallery {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* WooCommerce/Blocksy gallery markup nests the <img> a couple of divs
 * deep (.woocommerce-product-gallery > .ct-product-gallery-container >
 * figure.ct-media-container > img). The <img> tag itself carries
 * width/height attributes from its intrinsic size (e.g. 600x600),
 * which without an explicit CSS width left it rendering at that fixed
 * pixel size instead of filling the frame — this stretches the
 * wrapping elements to 100% and the image to fill+contain within the
 * square aspect-ratio box above. */
.hf-pp-image-frame-inner .ct-product-gallery-container,
.hf-pp-image-frame-inner .ct-media-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* :not(.zoomImg) excludes WooCommerce zoom's cloned hi-res overlay image
 * (also disabled server-side, see woocommerce_single_product_zoom_enabled
 * in the PHP) — belt and suspenders against it ever picking up this
 * full-size, full-opacity sizing if zoom gets re-enabled later. */
.hf-pp-image-frame-inner img:not(.zoomImg) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.hf-pp-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--hf-navy);
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(13, 27, 61, 0.35);
  z-index: 2;
}

/* WooCommerce's native sale-flash badge (.onsale, rendered by Blocksy at
 * woocommerce_before_single_product_summary:10 — before hf_pp_image_frame_open
 * at :11) defaults to the same top-left corner as .hf-pp-badge above,
 * stacking the two when a product has both a tag and a sale price.
 * Recolored to a dedicated sale-red so it stays visually distinct from the
 * navy tag badge. Left offset here is just a same-corner fallback for the
 * (rare) no-JS case — product-page.js repositions it immediately to the
 * right of .hf-pp-badge, since the tag badge's width varies per product
 * (e.g. "sealed" vs "coming soon") and can't be accounted for in CSS alone. */
.single-product .onsale {
  top: 12px;
  bottom: auto;
  inset-inline-start: 12px;
  inset-inline-end: auto;
  background-color: #E4292C;
  color: #ffffff;
}

/* ------------------------------------------------------------------
 * Info column
 * ------------------------------------------------------------------ */

.single-product .summary.entry-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hf-pp-eyebrow {
  font-size: 12px;
  color: var(--hf-text-muted);
  margin: 0 0 4px;
  text-transform: lowercase;
}

.single-product .summary .product_title {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
  color: var(--hf-navy);
}

.hf-pp-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 4px;
}

.hf-pp-price {
  font-size: 22px;
  font-weight: 500;
  color: var(--hf-navy);
}

.hf-pp-price .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.hf-pp-stock {
  font-size: 13px;
  color: var(--hf-amber);
}

.single-product .woocommerce-product-details__short-description {
  font-size: 14px;
  color: var(--hf-text-secondary);
  margin: 8px 0 18px;
  line-height: 1.6;
}

.single-product .woocommerce-product-details__short-description p {
  margin: 0;
}

/* ------------------------------------------------------------------
 * Quantity stepper + Add to cart, same row
 *
 * Blocksy already renders a fully working native quantity stepper
 * (div.quantity[data-type="type-2"], +/- as absolutely-positioned
 * .ct-increase/.ct-decrease icons, wired up by its own JS) inside its
 * own .ct-cart-actions flex wrapper alongside the Add to Cart button.
 * Restyled via Blocksy's own CSS custom properties rather than
 * replacing the markup/JS.
 * ------------------------------------------------------------------ */

.single-product form.cart {
  margin: 0;
}

.single-product .quantity[data-type="type-2"] {
  --quantity-width: 120px;
  --quantity-height: 44px;
  --quantity-initial-color: transparent;
  --quantity-hover-color: var(--hf-navy);
  --quantity-arrows-initial-color: var(--hf-navy);
  --quantity-arrows-hover-color: #ffffff;
  --theme-form-field-border-radius: 8px;
  --theme-form-field-border-initial-color: var(--hf-border-strong);
}

.single-product .single_add_to_cart_button {
  flex: 1;
  background: var(--hf-orange) !important;
  border: none;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 500;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.single-product .single_add_to_cart_button:hover {
  box-shadow: 0 0 20px rgba(255, 107, 26, 0.4);
}

/* ------------------------------------------------------------------
 * Highlights (checkmark bullet list)
 * ------------------------------------------------------------------ */

.hf-pp-highlights {
  border-top: 0.5px solid var(--hf-border);
  margin-top: 22px;
  padding-top: 16px;
}

.hf-pp-highlights ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-pp-highlights li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--hf-text-secondary);
}

.hf-pp-highlights li::before {
  content: "\2713";
  color: #0F6E56;
}

/* ------------------------------------------------------------------
 * Description section — full width, below the two-column area
 * ------------------------------------------------------------------ */

.hf-pp-description-section {
  border-top: 0.5px solid var(--hf-border);
  margin-top: 2rem;
  padding-top: 2rem;
  text-align: left;
}

.hf-pp-description-label {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--hf-navy);
}

.hf-pp-description-body {
  font-size: 14px;
  color: var(--hf-text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

.hf-pp-description-body p {
  margin: 0 0 1em;
  font-style: italic;
}

.hf-pp-description-body p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Related products — Blocksy's own default output below the product
 * block, not part of the approved mockup's scope.
 * ------------------------------------------------------------------ */

.single-product .related.products,
.single-product .upsells.products {
  display: none;
}