/* ============================================================
   Foody — Product Detail page
   Adapted from design reference product.html (pageProduct)
   Loaded via view 2332 (global head loader).
   Scoped under .o_wsale_product_page (the product #wrap) so it
   never leaks onto other pages.
   Tokens (--green, --rose, --pink-soft, --mint, --line, --muted,
   --r-md …) come from foody_home.css :root, loaded globally.
   ============================================================ */

.o_wsale_product_page {
  --r-lg: 24px;
  --gap-xl: 3.5rem;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
}

/* ---------- Flavor pill (product tag) ---------- */
.o_wsale_product_page .foody-flavor-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--pink);
  color: var(--rose-deep);
  border-radius: 999px;
  padding: .32rem .9rem;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .6rem;
}

/* ---------- Meta row (SKU · Weight) ---------- */
.o_wsale_product_page .foody-pd-meta {
  display: flex;
  gap: 1.4rem;
  font-size: .78rem;
  color: var(--muted);
  margin: .3rem 0 1.1rem;
  flex-wrap: wrap;
  font-weight: 600;
}

.o_wsale_product_page .foody-pd-meta span {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
}

/* ---------- Perks strip ---------- */
.o_wsale_product_page .foody-pd-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.o_wsale_product_page .foody-pd-perks span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  gap: .5rem;
  align-items: center;
}

.o_wsale_product_page .foody-pd-perks svg {
  flex-shrink: 0;
  color: var(--green);
}

/* ---------- Tabs (CSS-only radio switcher) ---------- */
.o_wsale_product_page .foody-tabs {
  margin-top: var(--gap-xl);
}

.o_wsale_product_page .foody-tabs > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.o_wsale_product_page .foody-tab-labels {
  display: flex;
  gap: .4rem;
  border-bottom: 1.6px solid var(--line);
  flex-wrap: wrap;
}

.o_wsale_product_page .foody-tab-labels label {
  border: none;
  background: transparent;
  padding: .85rem 1.2rem;
  font-weight: 700;
  font-size: .84rem;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1.6px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  user-select: none;
}

.o_wsale_product_page .foody-tab-labels label:hover {
  color: var(--green);
}

.o_wsale_product_page .foody-tab-pane {
  padding: 1.8rem .2rem;
  display: none;
  max-width: 820px;
  line-height: 1.65;
  color: var(--ink);
}

.o_wsale_product_page .foody-tab-pane p {
  margin-bottom: .8rem;
}

.o_wsale_product_page .foody-tab-pane .muted {
  color: var(--muted);
}

/* active tab: label highlight + matching pane visible */
#foody-tab-desc:checked ~ .foody-tab-labels label[for="foody-tab-desc"],
#foody-tab-spec:checked ~ .foody-tab-labels label[for="foody-tab-spec"],
#foody-tab-cert:checked ~ .foody-tab-labels label[for="foody-tab-cert"],
#foody-tab-ship:checked ~ .foody-tab-labels label[for="foody-tab-ship"],
#foody-tab-faq:checked  ~ .foody-tab-labels label[for="foody-tab-faq"] {
  color: var(--green);
  border-color: var(--green);
}

#foody-tab-desc:checked ~ .foody-tab-panes .foody-pane-desc,
#foody-tab-spec:checked ~ .foody-tab-panes .foody-pane-spec,
#foody-tab-cert:checked ~ .foody-tab-panes .foody-pane-cert,
#foody-tab-ship:checked ~ .foody-tab-panes .foody-pane-ship,
#foody-tab-faq:checked  ~ .foody-tab-panes .foody-pane-faq {
  display: block;
}

/* ---------- Specifications table (inside the Specs tab) ---------- */
.o_wsale_product_page .foody-pane-spec table {
  width: 100%;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.o_wsale_product_page .foody-pane-spec th {
  text-align: left;
  font-family: "Unbounded", sans-serif;
  font-size: .8rem;
  padding: .6rem 0 .4rem;
  color: var(--ink);
}

.o_wsale_product_page .foody-pane-spec td {
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Certifications checklist ---------- */
.o_wsale_product_page .foody-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.o_wsale_product_page .foody-checks li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  font-size: .92rem;
}

.o_wsale_product_page .foody-checks .tk {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
  display: grid;
  place-items: center;
}

/* ---------- FAQ ---------- */
.o_wsale_product_page .foody-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: .7rem;
  background: #fff;
  overflow: hidden;
}

.o_wsale_product_page .foody-faq-item summary {
  padding: 1rem 1.3rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.o_wsale_product_page .foody-faq-item summary::-webkit-details-marker {
  display: none;
}

.o_wsale_product_page .foody-faq-item summary .chev {
  transition: transform .25s;
  color: var(--green);
  flex-shrink: 0;
}

.o_wsale_product_page .foody-faq-item[open] summary .chev {
  transform: rotate(180deg);
}

.o_wsale_product_page .foody-faq-item .fa-body {
  padding: 0 1.3rem 1.1rem;
  font-size: .9rem;
  color: var(--muted);
}

/* ---------- Related products (4 in same category) ---------- */
.o_wsale_product_page .foody-related {
  margin-top: var(--gap-xl);
}

.o_wsale_product_page .foody-related .foody-rel-head {
  margin-bottom: 1.4rem;
}

.o_wsale_product_page .foody-related .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.o_wsale_product_page .foody-related .eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--rose);
  border-radius: 2px;
}

.o_wsale_product_page .foody-related h2 {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: .5rem;
  color: var(--ink);
}

.o_wsale_product_page .foody-rel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.o_wsale_product_page .foody-rel-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}

.o_wsale_product_page .foody-rel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.o_wsale_product_page .foody-rel-card .foody-rel-img {
  height: 210px;
  background: var(--pink-soft);
  display: grid;
  place-items: center;
  padding: 16px;
}

.o_wsale_product_page .foody-rel-card:nth-child(even) .foody-rel-img {
  background: var(--mint);
}

.o_wsale_product_page .foody-rel-card .foody-rel-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform .2s ease;
}

.o_wsale_product_page .foody-rel-card:hover .foody-rel-img img {
  transform: scale(1.05);
}

.o_wsale_product_page .foody-rel-card .foody-rel-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}

.o_wsale_product_page .foody-rel-card .foody-rel-cat {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.o_wsale_product_page .foody-rel-card .foody-rel-name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
}

.o_wsale_product_page .foody-rel-card:hover .foody-rel-name {
  color: var(--green);
}

.o_wsale_product_page .foody-rel-card .foody-rel-price {
  margin-top: auto;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-deep);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .o_wsale_product_page .foody-rel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .o_wsale_product_page .foody-pd-perks {
    grid-template-columns: 1fr;
  }

  .o_wsale_product_page .foody-rel-grid {
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }

  .o_wsale_product_page .foody-rel-card .foody-rel-img {
    height: 150px;
  }
}

/* ============================================================
   Native Odoo elements restyled to the design language
   (breadcrumb, gallery image, title, price, qty, CTA buttons)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.o_wsale_product_page .o_wsale_breadcrumb.breadcrumb {
  font-size: .76rem;
  font-weight: 600;
}

.o_wsale_product_page .o_wsale_breadcrumb .breadcrumb-item,
.o_wsale_product_page .o_wsale_breadcrumb .breadcrumb-item a {
  color: var(--muted);
  text-decoration: none;
}

.o_wsale_product_page .o_wsale_breadcrumb .breadcrumb-item a:hover {
  color: var(--green);
}

.o_wsale_product_page .o_wsale_breadcrumb .breadcrumb-item.active span {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Gallery — soft rounded image panel ---------- */
.o_wsale_product_page .o_product_detail_img_wrapper,
.o_wsale_product_page .o_carousel_product_outer {
  background: var(--pink-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.o_wsale_product_page .product_detail_img {
  border-radius: var(--r-lg);
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply;
}

/* carousel thumbnail indicators → rounded mint chips */
.o_wsale_product_page .o_carousel_product_indicators .o_indicators_item,
.o_wsale_product_page .o_carousel_product_indicators img {
  border-radius: 14px;
  overflow: hidden;
}

.o_wsale_product_page .o_carousel_product_indicators .o_indicators_item {
  border: 2px solid transparent;
  background-color: var(--mint);
}

.o_wsale_product_page .o_carousel_product_indicators .o_indicators_item.active {
  border-color: var(--green);
}

/* ---------- Product title ---------- */
.o_wsale_product_page .o_wsale_product_details_content_section_title h1 {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--ink);
}

/* ---------- Price ---------- */
.o_wsale_product_page .product_price .oe_price,
.o_wsale_product_page .product_price .oe_currency_value {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--green-deep);
  line-height: 1.1;
}

.o_wsale_product_page .product_price del,
.o_wsale_product_page .product_price .text-muted {
  color: var(--muted) !important;
}

/* ---------- Quantity selector → pill ---------- */
.o_wsale_product_page .css_quantity.input-group {
  border: 1.6px solid var(--line) !important;
  border-radius: 999px;
  overflow: hidden;
  width: auto;
}

.o_wsale_product_page .css_quantity .form-control.quantity {
  font-weight: 700;
  background: transparent;
  max-width: 52px;
}

.o_wsale_product_page .css_quantity .btn {
  color: var(--ink);
}

.o_wsale_product_page .css_quantity .btn:hover {
  background: var(--mint);
  color: var(--green);
}

/* ---------- CTA buttons → green pill (hover rose) ---------- */
.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-primary,
.o_wsale_product_page #add_to_cart {
  background: var(--green);
  border-color: var(--green);
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  padding: .8rem 1.8rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
}

.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-primary:hover,
.o_wsale_product_page #add_to_cart:hover {
  background: var(--rose);
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* secondary CTAs (e.g. wishlist/compare) → outline green pill */
.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-secondary,
.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-outline-secondary {
  border-radius: 999px;
  border-color: var(--green);
  color: var(--green);
}

.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-secondary:hover,
.o_wsale_product_page .o_wsale_product_details_content_section_cta .btn-outline-secondary:hover {
  background: var(--green);
  color: #fff;
}

/* "View all certificates" button inside the Certifications tab */
.o_wsale_product_page .foody-pane-cert .btn {
  border-radius: 999px;
  border-color: var(--green);
  color: var(--green);
  font-weight: 700;
}

.o_wsale_product_page .foody-pane-cert .btn:hover {
  background: var(--green);
  color: #fff;
}