/*
 * Single product page redesign. Every selector below targets WooCommerce's
 * own default markup/classes (or the theme's existing content-product.php
 * card, reused as-is for Related Products) — no cart, quantity, stock, or
 * order logic is touched here, only layout and appearance.
 */

.am-product-page {
  background: #fff;
  color: #000;
  font-family: var(--am-font-body);
}

/* woocommerce_output_content_wrapper() (hooked to woocommerce_before_
   main_content) prints the actual #primary/.content-area and #main/
   .site-main wrapper divs around everything below — same WooCommerce
   structure the shop archive already resets for the same reason (see
   shop.css). Without this, div.product's own max-width:1800px below is
   set on a *child* of these, but doesn't help if either one is itself
   constrained by leftover width/padding rules. */
.am-product-page .content-area,
.am-product-page .site-main {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* WooCommerce's own default stylesheet targets this element as
   ".woocommerce .woocommerce-breadcrumb" (two classes), which has higher
   specificity than a plain ".woocommerce-breadcrumb" selector and was
   winning on font-size (0.8em against the theme's 10px root em-scale,
   ~13px instead of the intended 16px) — confirmed live.
   display: block is required here too — the theme's own base stylesheet
   (style_1.css) hides ".woocommerce-breadcrumb" sitewide by default (the
   shop archive deliberately keeps that hidden and shows its own nav
   instead), and the old single-product.php had its own separately-styled
   custom breadcrumb markup that never went through that hidden class.
   Switching to WooCommerce's own woocommerce_breadcrumb() output in the
   product page rewrite inherited that sitewide display:none with nothing
   to override it — confirmed live (rendered in the DOM with the right
   text, just invisible). */
.woocommerce .woocommerce-breadcrumb {
  color: rgba(0, 0, 0, .75);
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin: 24px 0;
  padding: 0 60px;
}

.woocommerce .woocommerce-breadcrumb a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--am-red);
}

/* Each crumb is wrapped in .am-crumb by automania_product_breadcrumb_defaults()
   (product page only) so the current page — the last crumb, printed as bare
   text by WooCommerce's own template — can be picked out and styled bold
   navy per Figma, while earlier crumbs stay regular. */
.woocommerce .woocommerce-breadcrumb .am-crumb:last-child {
  color: var(--am-navy-dark);
  font-weight: 600;
}

/*
 * div.product also contains the product data tabs, upsells, related
 * products, and the shared Promise/Testimonials/Newsletter sections as
 * later siblings of the gallery and summary (all hooked onto
 * woocommerce_after_single_product_summary) — so only the gallery and
 * summary get placed into the two-column grid; every other direct child
 * is forced to span both columns and stack normally below.
 */
/* align-items: start (not the default stretch) — without it, the
   gallery column was stretched to match the summary column's height
   whenever the two differ (summary is usually taller, with its title/
   meta/description/price/cart stack), which either distorted the
   gallery's box beyond the photo's own aspect ratio or left it looking
   vertically centered instead of flush with the top of the summary. */
div.product {
  align-items: start;
  display: grid;
  column-gap: 60px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin: 0 auto;
  max-width: 1800px;
  padding: 0 60px;
  row-gap: 0;
}

/* WooCommerce's own default stylesheets (woocommerce-layout.css /
   woocommerce.css) are still loaded site-wide and ship classic float-based
   rules for these exact elements (div.images { width: 38%; float: left },
   div.summary { width: 48%; float: right }) with higher selector
   specificity than a plain class selector, so they win over our grid
   layout unless forced with !important — confirmed live (gallery/summary
   were shrinking to ~38%/48% of their grid column instead of filling it).
   margin-bottom needed the same treatment but was missed: WooCommerce's
   own div.images/div.summary rules also set "margin-bottom: 2em" and
   were winning that property too — confirmed live, computed 28px instead
   of our intended 80px regardless of viewport width. */
div.product > .woocommerce-product-gallery {
  float: none !important;
  grid-column: 1;
  margin-bottom: 80px !important;
  width: 100% !important;
}

div.product > .summary.entry-summary {
  clear: none !important;
  float: none !important;
  grid-column: 2;
  margin-bottom: 80px !important;
  width: 100% !important;
}

div.product > *:not(.woocommerce-product-gallery):not(.summary) {
  grid-column: 1 / -1;
}

/* Gallery */

.woocommerce-product-gallery {
  opacity: 1 !important;
  position: relative;
  width: 100%;
}

/* Same black "status" badge (Pre-order/Sold Out/etc., the "status"
   product_cat) as the shop card, on the main product's own gallery
   image now too — matches what automania.co.in's existing live site
   already shows here. */
.am-product-gallery__status {
  background: #363839;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  left: 18px;
  padding: 6px 12px;
  position: absolute;
  top: 18px;
  z-index: 3;
}

.woocommerce-product-gallery__wrapper {
  background: #fff;
  border: 1px solid var(--am-line, #e8e8e8);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder {
  display: block;
  width: 100%;
}

/* object-fit:contain, not cover — checked the actual catalog's uploaded
   images (not just the Figma mockup's one sample photo) and product
   photos here come from many different sources over time with wildly
   different aspect ratios (a 500x667 portrait shot next to an 800x400
   landscape one next to a 1024x1024 square one). A fixed 850/556
   landscape box with cover would crop a portrait photo's top/bottom
   right off — contain always shows the whole product instead, at the
   cost of some letterboxing, which blends into the wrapper's own white
   background anyway. */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image--placeholder img {
  aspect-ratio: 850 / 556;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

/* Restyles WooCommerce's own gallery zoom trigger (a real, functional
   button that opens the PhotoSwipe fullscreen view — added by WC's own
   gallery JS, not theme markup) to match Figma's floating bottom-right
   magnifier instead of WC's default top-right placement. An earlier pass
   also added a second, decorative-only badge here; removed since this
   native one already does the same job. */
.woocommerce-product-gallery__trigger {
  align-items: center;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--am-line, #e8e8e8);
  border-radius: 20px !important;
  bottom: 15px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  color: var(--am-text, #1a1a1a);
  display: flex !important;
  font-size: 16px !important;
  height: 40px !important;
  justify-content: center;
  left: auto !important;
  right: 15px !important;
  top: auto !important;
  width: 40px !important;
  z-index: 2;
}

/* Summary */

.summary.entry-summary {
  display: grid;
  column-gap: 16px;
  grid-template-areas:
    "stock wishlist"
    "title title"
    "meta meta"
    "desc desc"
    "price cart";
  grid-template-columns: 1fr auto;
  position: relative;
  row-gap: 24px;
}

.product-border {
  display: none;
}

/* The theme's own legacy base stylesheet (style_1.css) has
   ".woocommerce div.product p.stock { display: none }" — same class
   count as this rule (3: woocommerce/product/stock vs. summary/
   entry-summary/stock here) but 2 real elements (div, p) against our 0,
   so it wins the specificity tie and hides this outright. Confirmed
   live: the stock status text ("In stock"), which Figma places directly
   above the product title, was rendering in the DOM with the right text
   but display:none. Same class of bug as the breadcrumb fix above. */
.summary.entry-summary > .stock {
  align-items: center;
  color: #007a55 !important;
  display: flex !important;
  font-size: 12px !important;
  font-weight: 400;
  gap: 10px;
  grid-area: stock;
  line-height: 23px;
  margin: 0;
  text-transform: uppercase;
}

.summary.entry-summary > .stock:before {
  background: #00bc7d;
  border-radius: 50%;
  content: "";
  height: 9px;
  width: 9px;
}

.summary.entry-summary > .stock.out-of-stock {
  color: var(--am-red);
}

.summary.entry-summary > .stock.out-of-stock:before {
  background: var(--am-red);
}

/* Fallback status text (automania_product_status_fallback() in
   inc/automania-product.php) for Pre-order/Sold-out products, which
   have no native in-stock/out-of-stock text at all. Neutral dark gray
   instead of the base rule's green — "Pre-order" isn't the "available
   now" state that color implies. */
.summary.entry-summary > .stock.status-fallback {
  color: #363839 !important;
}

.summary.entry-summary > .stock.status-fallback:before {
  background: #363839;
}

/* Figma's own title text (node 651:8087) is set at 52px/Bold, matching
   the H2 heading size — reduced to H3 (42px) per request, since 52px
   reads as oversized against the rest of the page's proportions in
   practice. Weight switched from Figma's literal Bold (700) to 600 per
   request, to match the SemiBold weight every other heading/button on
   the site uses (.am-hero h1, .am-section-head h2, .am-button, the shop
   card's own add-to-cart button) — this page's title/price/CTA were the
   only Bold outliers, confirmed directly against the Figma nodes. */
.summary.entry-summary > .product_title {
  color: #111110;
  font-family: var(--am-font-heading);
  font-size: var(--am-h3-size);
  font-weight: 600;
  grid-area: title;
  line-height: var(--am-h3-line-height);
  margin: 0;
}

/* flex-wrap + align-items: center together — wrap alone (the original
   rule) let this pill's rows sit flush at the top instead of centered
   whenever a wrapped line was shorter than the tallest one; nowrap alone
   (tried and reverted) forced a horizontal scrollbar here instead, which
   wasn't wanted either. Wrapping AND centering each line is what
   actually fixes the misalignment without introducing scroll. */
.summary.entry-summary > .product_meta {
  align-items: center;
  background: #f5f5f5;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  grid-area: meta;
  justify-content: space-between;
  margin: 0;
  min-height: 48px;
  padding: 12px 13px;
}

.summary.entry-summary > .product_meta > * {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
  font-weight: 400;
}

.summary.entry-summary > .product_meta .am-product-specs {
  order: 1;
}

/* Figma sizes the SKU segment differently from the rest of this pill
   (18px/medium against the category list's 16px/regular) rather than
   using one flat size for the whole thing. */
.summary.entry-summary > .product_meta .sku_wrapper {
  color: rgba(0, 0, 0, .75);
  font-size: 18px;
  font-weight: 500;
  order: 2;
}

.summary.entry-summary > .product_meta .tagged_as {
  order: 3;
  width: 100%;
}

.summary.entry-summary > .product_meta a {
  color: inherit;
  text-decoration: none;
}

/* Injected by a stock-notification plugin (not this theme) — its own
   "Notify Me When Available" button, shown instead of the normal
   add-to-cart form on out-of-stock/pre-order products. It used to render
   inside .product_meta above (fighting for space with the maker/SKU
   badges); automania-product.js moves it here, into the same grid cell
   the add-to-cart form would otherwise occupy, since the two states
   (purchasable vs. not) never appear at the same time. */
.summary.entry-summary > .autuskey-stock-notify-meta {
  align-self: center;
  grid-area: cart;
}

.summary.entry-summary > .autuskey-stock-notify-meta p.cart {
  margin: 0 !important;
}

/* The same plugin also prints a fixed-height clearfix spacer right
   after .summary in the markup (<div class="autuskey-stock-notify-
   product-clear" style="clear:both;height:32px">), meant to add
   breathing room below the notify button back when it rendered inline
   with floated content in .product_meta. Now that
   automania-product.js moves the button into .summary itself, this
   spacer is a leftover — confirmed live, it was stacking its own 32px
   with .summary's 80px margin-bottom right after the button, a large
   dead gap for a shopper who just used it. */
div.product > .autuskey-stock-notify-product-clear {
  display: none;
}

/* The plugin renders its own <a class="single_add_to_cart_button button
   alt"> with inline styles (a purple background, fixed 260px width) that
   don't match the real add-to-cart button at all — confirmed live,
   rgb(127, 84, 179) instead of the site's red. Same class name as our
   real button, so the same rule would normally apply, but the plugin's
   inline "style" attribute outranks any stylesheet rule regardless of
   selector specificity, hence !important on every property it sets. */
.summary.entry-summary > .autuskey-stock-notify-meta .single_add_to_cart_button {
  align-items: center !important;
  background: var(--am-red) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  display: inline-flex !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  height: 56px !important;
  justify-content: center !important;
  line-height: 28px !important;
  padding: 0 22px !important;
  white-space: nowrap !important;
  width: auto !important;
}

.summary.entry-summary > .autuskey-stock-notify-meta .single_add_to_cart_button:hover {
  background: #a91e26 !important;
}

.summary.entry-summary > .woocommerce-product-details__short-description {
  color: rgba(0, 0, 0, .75);
  font-size: 18px;
  grid-area: desc;
  line-height: 28px;
}

.summary.entry-summary > .woocommerce-product-details__short-description p {
  margin: 0;
}

/* WooCommerce's own default stylesheet targets this exact element
   (div.product p.price) and, at equal class-specificity, wins on element
   count — color and font-size both need !important to actually stick
   (confirmed live: without it, WooCommerce's own rule was painting the
   price an olive yellow, rgb(149, 142, 9), instead of Figma's #111110).
   Figma's own price text (node 651:8105) is set to 52px, matching the H2
   heading size, but the design system's documented "Price Large" token
   is 34px/700 — 52px here looks like the frame reusing a heading style
   by mistake rather than an intentional size, so this uses the
   documented price token instead. */
.summary.entry-summary > p.price {
  align-self: center;
  color: #111110 !important;
  font-size: 34px !important;
  font-weight: 600;
  grid-area: price;
  margin: 0;
}

/* WooCommerce already prints this store's tax-inclusive note natively
   (Settings > Tax > price display suffix, e.g. "Inclusive of Tax") as
   part of the price HTML, so it's styled here to match Figma's
   "Inclusive of all taxes" line rather than adding a second, duplicate
   line of text. */
.summary.entry-summary > p.price .woocommerce-price-suffix {
  color: rgba(0, 0, 0, .75);
  display: block;
  font-size: 16px;
  font-weight: 400;
}

.summary.entry-summary > p.price del {
  color: var(--am-muted, #666);
  font-size: 20px;
  font-weight: 500;
  margin-right: 10px;
}

/* The real cause of the oversized gap before the wishlist link below
   wasn't row-gap or alignment — it's WooCommerce's own default
   stylesheet (".woocommerce div.product form.cart { margin-bottom: 2em }",
   confirmed live), one element more specific than our selector so it won
   the tie and added an invisible ~28px of margin under this form on top
   of the grid's own row-gap. align-self: end (instead of center) also
   keeps this form's bottom edge flush with the price cell's bottom
   rather than floating mid-track, now that the margin isn't fighting it. */
.summary.entry-summary > form.cart {
  align-items: center;
  align-self: end;
  display: flex;
  gap: 16px;
  grid-area: cart;
  justify-self: end;
  margin: 0 !important;
}

/* Button before the quantity stepper, per Figma — WooCommerce prints the
   quantity input before the submit button, so flex order swaps them
   visually without touching form field order. */
.summary.entry-summary > form.cart .quantity {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(245, 245, 245, .6);
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .05);
  display: flex;
  float: none !important;
  gap: 16px;
  height: 56px;
  margin: 0 !important;
  order: 2;
  padding: 0 16px;
}

.summary.entry-summary > form.cart .single_add_to_cart_button {
  order: 1;
}

.summary.entry-summary > form.cart .qty-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: #111110;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 16px;
  justify-content: center;
  padding: 0;
  width: 16px;
}

.summary.entry-summary > form.cart .qty {
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
  border: 0;
  color: #111110;
  font-size: 18px;
  font-weight: 700;
  height: auto;
  padding: 0;
  text-align: center;
  width: 24px;
}

.summary.entry-summary > form.cart .qty::-webkit-inner-spin-button,
.summary.entry-summary > form.cart .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.summary.entry-summary > form.cart .single_add_to_cart_button {
  align-items: center;
  background: var(--am-red);
  border: 0;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 20px;
  font-weight: 600;
  gap: 12px;
  height: 56px;
  justify-content: center;
  line-height: 28px;
  padding: 0 22px;
  white-space: nowrap;
}

.summary.entry-summary > form.cart .single_add_to_cart_button i {
  font-size: 20px;
}

.summary.entry-summary > form.cart .single_add_to_cart_button:hover {
  background: #a91e26;
}

/* Moved up to share a row with the stock status per request, instead of
   its own row after the cart — right-aligned and vertically centered
   against the stock text on the same line. */
.summary.entry-summary > .yith-add-to-wishlist-button-block {
  align-self: center;
  grid-area: wishlist;
  justify-self: end;
}

.summary.entry-summary .yith-wcwl-add-to-wishlist-button {
  align-items: center;
  color: var(--am-muted, #666);
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
  text-decoration: none;
}

.summary.entry-summary .yith-wcwl-add-to-wishlist-button-icon {
  height: 18px;
  width: 18px;
}

/* Related products rail, now wrapped in the shared <section class="am-section
   am-products"><div class="am-fluid"> band (see related.php) — the same
   light-gray full-bleed section used for New Arrivals on the homepage. The
   eyebrow/heading/View All link/arrows row above it is rendered by
   automania_home_render_section_heading() and styled by the shared
   .am-section-head rules already loaded — only the arrow buttons themselves
   need product-page-specific styling. */

.am-related-tools {
  display: flex;
  gap: 11px;
}

.am-related-tools button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--am-line, #e8e8e8);
  border-radius: 30%;
  color: #787272;
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.am-related-tools button:hover {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}

/* WooCommerce's own default stylesheet still applies a clearfix
   (ul.products:before/:after { content: ""; display: table }) meant for
   its classic float-based grid — as grid items instead, those two empty
   boxes count as two more tracks. Confirmed live: a rail with exactly 4
   real cards computed 6 grid-template-columns, the extra two being this
   clearfix, which pushed the 4 real cards visually off-center instead of
   flush left. Same fix the shop archive grid already needed. */
.related.products ul.products:before,
.related.products ul.products:after {
  content: none;
  display: none;
}

/* Same "3 full cards + a peek of the 4th" formula as the homepage's New
   Arrivals rail (.am-product-rail in automania-home.css) — both sit
   inside the same .am-fluid-width container, so matching the formula
   keeps card width (and therefore button/price sizing) consistent
   between the two rails instead of this one being independently
   shrunk down, which is why its add-to-cart button used to look
   noticeably smaller than everywhere else on the site. */
.related.products ul.products {
  display: grid;
  gap: 24px;
  grid-auto-columns: calc((100% - 3 * 24px) / 3.2);
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
}

.related.products ul.products::-webkit-scrollbar {
  display: none;
}

/* WooCommerce's default stylesheet still applies its classic float-based
   product grid (ul.products li.product { width: ...%; float: left;
   margin: ... }) to every <li>, which fights the grid layout above and
   squashes each card to a sliver — confirmed live. Same reset shop.css
   already uses for the shop archive's product grid. */
.related.products ul.products li.product {
  clear: none;
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

/* Related products section + shared sections reused from the homepage/
   About Us page. These need their full-bleed background to reach the
   actual viewport edges, but they're all grid children of div.product,
   which is padded and width-capped for the gallery/summary layout above
   — so break out of that padding here (their own internal .am-fluid
   still centers the content at the usual max-width). */

div.product > .am-products,
.am-promise,
.am-product-testimonials,
.am-newsletter {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.am-product-testimonials {
  background: #fff;
}

/* "Ask a question" tab (functions.php: woo_enquiry_form()) — a raw
   Contact Form 7 shortcode with none of this theme's styling applied at
   all, confirmed live: default browser input boxes, a 10-row textarea
   (~240px tall) totally out of proportion with a 3-line message field,
   and no consistent spacing between fields. Styled to match the site's
   existing form treatment (same radius/height/red button already used
   for the newsletter form in automania-shared-sections.css) instead of
   inventing a new one. */
#tab-enquiry_form h2 {
  color: #111110;
  font-family: var(--am-font-heading);
  font-size: var(--am-h4-size);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
}

#tab-enquiry_form > p {
  color: rgba(0, 0, 0, .75);
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 28px;
  max-width: 620px;
}

#tab-enquiry_form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

#tab-enquiry_form .wpcf7-form > p {
  margin: 0;
}

#tab-enquiry_form .wpcf7-form-control-wrap {
  display: block;
}

#tab-enquiry_form input.wpcf7-form-control,
#tab-enquiry_form textarea.wpcf7-form-control {
  background: #fff;
  border: 1px solid var(--am-line, #e8e8e8);
  border-radius: 10px;
  box-sizing: border-box;
  color: #111110;
  font-family: var(--am-font-body);
  font-size: 16px;
  padding: 0 18px;
  width: 100%;
}

#tab-enquiry_form input.wpcf7-form-control:focus,
#tab-enquiry_form textarea.wpcf7-form-control:focus {
  border-color: var(--am-red);
  outline: 0;
}

#tab-enquiry_form input.wpcf7-form-control {
  height: 52px;
}

/* The default rows="10" textarea (~240px) towered over 3 single-line
   inputs above it — confirmed live. A fixed height instead of relying
   on the rows attribute keeps it proportionate to the rest of the form;
   resize:vertical still lets a shopper drag it taller for a long message. */
#tab-enquiry_form textarea.wpcf7-form-control {
  height: 110px;
  min-height: 80px;
  padding: 14px 18px;
  resize: vertical;
}

#tab-enquiry_form input.wpcf7-form-control::placeholder,
#tab-enquiry_form textarea.wpcf7-form-control::placeholder {
  color: rgba(0, 0, 0, .45);
}

#tab-enquiry_form input.wpcf7-submit {
  align-self: flex-start;
  background: var(--am-red);
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-family: var(--am-font-body);
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  padding: 0 32px;
  width: auto;
}

#tab-enquiry_form input.wpcf7-submit:hover {
  background: #a91e26;
}

#tab-enquiry_form .wpcf7-spinner {
  margin-left: 10px;
}

#tab-enquiry_form .wpcf7-response-output {
  border-radius: 10px;
  font-size: 14px;
  margin: 20px 0 0;
  max-width: 620px;
}