/* =========================================================================
   peptidelab — clean light "clinical / lab" design layer
   Component-level styling on top of Blocksy. Product-neutral.
   Palette pulled from the Peptide Lab logo (navy + electric blue + azure).
   Refined: pure-white ground, azure (תכלת) secondary accent, mono prices.
   ========================================================================= */

:root {
  --pl-accent: #1f6feb;        /* primary blue (links, buttons)   */
  --pl-accent-strong: #1657c9; /* hover / press                   */
  --pl-azure: #2ea6e6;         /* תכלת — secondary accent          */
  --pl-azure-soft: #e4f4fd;    /* azure tint                       */
  --pl-ink: #0f1d33;           /* headings / deep navy            */
  --pl-body: #46566b;          /* body text                       */
  --pl-muted: #8593a4;         /* secondary text                  */
  --pl-line: #e8edf3;          /* hairline borders                */
  --pl-surface: #ffffff;       /* cards                           */
  --pl-bg: #ffffff;            /* page background — pure white     */
  --pl-bg-soft: #eaf4fd;       /* image / soft area (azure tint)   */
  --pl-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Blocksy's light-grey neutrals (color-6 #f2f5f7, color-7 #FAFBFC) paint the
   page canvas and footer. Force them to pure white per the requested look.
   html:root out-specifies Blocksy's own :root defaults regardless of load order. */
html:root{
  --theme-palette-color-6: #ffffff !important;
  --theme-palette-color-7: #ffffff !important;
}

/* ---- base / typography ---- */
body {
  background: var(--pl-bg);
  color: var(--pl-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.entry-title, .product_title,
.woocommerce-loop-product__title,
.wp-block-post-title {
  color: var(--pl-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}
a { color: var(--pl-accent); }
a:hover { color: var(--pl-accent-strong); }

/* keyboard focus — azure ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.button:focus-visible, .ct-header a:focus-visible {
  outline: 2px solid var(--pl-azure);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- header ---- */
.ct-header [data-row="middle"] {
  background: #fff;
  box-shadow: 0 1px 0 var(--pl-line);
}

/* ---- shop header: title, count, sort ---- */
.woocommerce .woocommerce-result-count { color: var(--pl-muted); }
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
  border: 1px solid var(--pl-line);
  border-radius: 10px;
  padding: 0.6em 2.2em 0.6em 0.9em;
  background-color: #fff;
  color: var(--pl-body);
  box-shadow: 0 1px 2px rgba(16, 29, 51, 0.04);
}

/* ---- product cards ---- */
.woocommerce ul.products { gap: 26px 22px; }
.woocommerce ul.products li.product {
  background: transparent !important;      /* no card frame — like the reference */
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;             /* name + price on the left (like the reference) */
  transition: transform .18s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
}
/* image tile = the .ct-media-container wrapper (neutral grey, rounded — like the reference) */
.woocommerce ul.products li.product figure { margin: 0 0 12px !important; }  /* image → name gap (Blocksy defaults 25px) */
.woocommerce ul.products li.product .ct-media-container {
  background: #eef0f3;
  border-radius: 16px;
  padding: 10px;                         /* less grey margin → bigger vial */
  margin-bottom: 0;
}
.woocommerce ul.products li.product a img {
  background: transparent;
  border: none;
  border-radius: 6px;
  margin: 0;
  padding: 0;
  mix-blend-mode: multiply;              /* white photo bg melts into the grey tile — no white square */
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  line-height: 1.35;
  padding: 0;
  margin: 0 0 3px;
  min-height: 1.5em;                     /* desktop names are 1 line → keep name tight to price */
  text-align: left;
}
.woocommerce ul.products li.product .price {
  color: var(--pl-ink);
  font-weight: 600;
  display: block;
  text-align: left;
  margin: 0 0 14px;
}
.woocommerce ul.products li.product .entry-meta,
.woocommerce ul.products li.product .meta-categories { display: none !important; }  /* category not in the reference */
.woocommerce ul.products li.product .price del { color: var(--pl-muted); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { color: var(--pl-accent); text-decoration: none; }

/* prices read as "instrument data": mono + tabular figures */
.woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--pl-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- sale badge ---- */
.woocommerce span.onsale {
  background: var(--pl-azure-soft);
  color: var(--pl-accent-strong);
  border: 1px solid #cfe6fa;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 600;
  min-height: 0;
  min-width: 0;
  padding: 4px 12px;
  line-height: 1.4;
}

/* ---- buttons: blue → azure gradient (blue + תכלת) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product a.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button {
  background: linear-gradient(135deg, var(--pl-accent) 0%, #2f9fe6 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 0.75em 1.5em !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px -8px rgba(31, 111, 235, 0.55);
  transition: filter .18s ease, box-shadow .18s ease, transform .06s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce div.product form.cart .button:hover {
  filter: brightness(0.94) saturate(1.05);
  color: #fff !important;
  box-shadow: 0 12px 26px -8px rgba(31, 111, 235, 0.6);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }
.woocommerce a.added_to_cart {
  background: none !important;            /* Blocksy paints this blue → blue-on-blue text; kill the box */
  color: var(--pl-accent) !important;
  font-weight: 600;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  border: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
}
/* shop cards: "מעבר לסל הקניות" on its own line under the button, centered, subtle */
.woocommerce ul.products li.product a.added_to_cart {
  display: block !important;
  width: 100%;
  margin: 8px 0 0 !important;
  font-size: 11px;
}

/* shop-card "add to cart": solid flat blue + full-width pill, directly under the price (match reference) */
.woocommerce ul.products li.product a.button {
  display: inline-block !important;      /* hug the text, not full-width */
  width: auto !important;
  min-height: 0 !important;              /* kill Blocksy's forced button height */
  line-height: 1.2 !important;
  margin: 0 !important;
  background: var(--pl-accent) !important;
  border-radius: 999px !important;       /* pill */
  padding: 0.62em 1.5em !important;
  box-shadow: 0 6px 16px -8px rgba(31, 111, 235, 0.5) !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--pl-accent-strong) !important;
  filter: none !important;
}
/* Blocksy wraps the button in .ct-woo-card-actions (the real flex item); left-align the button inside it */
.woocommerce ul.products li.product .ct-woo-card-actions {
  display: block !important;
  width: 100% !important;
  text-align: center !important;         /* center the button in the card */
  margin: 0 !important;
}

/* ---- single product ---- */
.woocommerce div.product .product_title { font-size: 30px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--pl-ink); font-weight: 600; }
.single-product .summary .stock.in-stock { color: #1a8f5a; }

/* ---- inputs ---- */
.woocommerce form .form-row input.input-text,
.woocommerce .quantity input,
.select2-container--default .select2-selection--single,
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border: 1px solid var(--pl-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

/* ---- footer ---- */
.ct-footer { border-top: 1px solid var(--pl-line); }

/* ---- homepage hero (shop front page) ---- */
.pl-hero {
  position: relative;
  margin: 0 0 2.4rem;
  border: 1px solid var(--pl-line);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 88% 6%, rgba(51, 177, 236, 0.16), transparent 58%),
    linear-gradient(180deg, #f3faff, #ffffff);
}
.pl-hero__in {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .pl-hero__in { grid-template-columns: 1.15fr 0.85fr; }
}
.pl-hero__eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--pl-accent); text-transform: uppercase;
}
.pl-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12;
  color: var(--pl-ink); margin: 0.55rem 0 0; letter-spacing: -0.02em; font-weight: 700;
}
.pl-hero__title em { font-style: normal; color: var(--pl-accent); }
.pl-hero__lead {
  font-size: 1.06rem; color: var(--pl-body); max-width: 36ch; margin: 0.9rem 0 1.4rem;
}
.pl-hero__cta {
  display: inline-block; color: #fff !important;
  background: linear-gradient(135deg, var(--pl-accent), #2f9fe6);
  padding: 0.8rem 1.7rem; border-radius: 11px; font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(31, 111, 235, 0.55);
  transition: filter 0.18s ease;
}
.pl-hero__cta:hover { filter: brightness(0.94); color: #fff !important; }
.pl-hero__logo {
  justify-self: center; width: min(320px, 78vw);
  background: #fff; border: 1px solid var(--pl-line); border-radius: 22px;
  padding: clamp(1rem, 3vw, 1.8rem);
  box-shadow: 0 22px 42px -22px rgba(13, 42, 78, 0.18);
  display: grid; place-items: center;
}
.pl-hero__logo img { width: 100%; height: auto; display: block; }
/* the hero carries the branding, so hide Blocksy's plain shop page title */
.woocommerce-shop .entry-header,
body.home .entry-header { display: none !important; }

/* ---- larger header logo ---- */
.site-logo-container img,
.site-logo-container img.default-logo { max-height: 90px !important; width: auto !important; }

/* ---- homepage assurance band (under the hero) ---- */
.pl-assure {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--pl-line); border: 1px solid var(--pl-line);
  border-radius: 16px; overflow: hidden; margin: 0 0 2.4rem;
}
@media (min-width: 820px) { .pl-assure { grid-template-columns: repeat(4, 1fr); } }
.pl-assure .cell { background: #fff; padding: 1.05rem 1.2rem; display: flex; gap: 0.7rem; align-items: center; }
.pl-assure .cell svg { width: 22px; height: 22px; color: var(--pl-accent); flex: 0 0 auto; }
.pl-assure .cell b { display: block; color: var(--pl-ink); font-weight: 600; font-size: 0.95rem; }
.pl-assure .cell span { font-size: 0.8rem; color: var(--pl-muted); }

/* ---- FAQ page accordions ---- */
.pl-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.pl-faq__item { border: 1px solid var(--pl-line); border-radius: 14px; background: #fff; overflow: hidden; }
.pl-faq__item summary {
  cursor: pointer; list-style: none; padding: 1.05rem 1.3rem; font-weight: 600;
  color: var(--pl-ink); display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-size: 1.05rem;
}
.pl-faq__item summary::-webkit-details-marker { display: none; }
.pl-faq__item summary::after { content: "+"; color: var(--pl-accent); font-size: 1.5rem; line-height: 1; font-weight: 400; transition: transform 0.2s ease; }
.pl-faq__item[open] summary::after { transform: rotate(45deg); }
.pl-faq__a { padding: 0 1.3rem 1.2rem; color: var(--pl-body); line-height: 1.75; }
.pl-faq__a p { margin: 0.2rem 0; }

/* ---- RTL header: nav on the right, next to the logo (Blocksy default pushed it left) ---- */
[data-device="desktop"] [data-row="middle"] > .ct-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(1.4rem, 4vw, 3rem);
}
[data-device="desktop"] [data-row="middle"] > .ct-container > [data-column] {
  width: auto !important;
}
[data-device="desktop"] [data-row="middle"] .header-menu-1 > .menu {
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* ---- single product: smaller gallery image ---- */
.single-product div.product .woocommerce-product-gallery {
  text-align: center;
  width: 40% !important;
  max-width: 440px !important;
}
.single-product div.product .entry-summary,
.single-product div.product .summary { width: 55% !important; }
/* hard cap the image itself so it shrinks regardless of Blocksy's column layout */
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery__wrapper img,
.single-product div.product .woocommerce-product-gallery img {
  max-width: 340px !important;
  height: auto !important;
  margin-inline: auto !important;
}

/* ---- restored from shared notes: unify heading font to Heebo (--pl-font) ---- */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .wp-block-post-title,
.product_title, .woocommerce-loop-product__title {
  font-family: var(--pl-font) !important;
}

/* ---- restored from shared notes: WhatsApp (Joinchat) button in brand blue ---- */
.joinchat__button { background: #25d366 var(--joinchat-ico) 50%/60% no-repeat !important; }

/* ---- Joinchat WhatsApp launcher: lock to WhatsApp green everywhere ----
   The free plugin outputs its custom button color via a deferred, cache-
   sensitive inline style; on the shop page that leaked the site accent (blue).
   Pin the Joinchat color vars to WhatsApp green so the launcher, its hover
   state and the chat box stay green on every page, with no blue flicker. */
.joinchat { --ch: 142 !important; --cs: 70% !important; --cl: 49% !important; }


/* ---- per-product research content in the "מידע נוסף" tab ---- */
.pl-moreinfo { max-width: 860px; line-height: 1.85; color: var(--pl-body); }
.pl-moreinfo > *:first-child { margin-top: 0; }
.pl-moreinfo p { margin: 0 0 1rem; }
.pl-moreinfo strong { color: var(--pl-ink); font-weight: 600; }
.pl-moreinfo .pl-moreinfo__label { color: var(--pl-ink); font-weight: 600; margin: 1.5rem 0 0.5rem; }
.pl-moreinfo ul { margin: 0 0 1.15rem; padding: 0; list-style: none; }
.pl-moreinfo ul li { position: relative; margin: 0 0 0.55rem; padding-inline-start: 1.2rem; }
.pl-moreinfo ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-accent); }
.pl-moreinfo a { color: var(--pl-accent); text-decoration: none; border-bottom: 1px solid rgba(31,111,235,.35); word-break: break-word; }
.pl-moreinfo a:hover { color: var(--pl-accent-strong); border-bottom-color: currentColor; }

/* ---- footer legal/info links bar ---- */
.pl-legal-bar{background:var(--pl-bg,#fff);border-top:1px solid var(--pl-line,#e8edf3);padding:1rem 1.2rem}
.pl-legal-bar .pl-legal-in{max-width:1100px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:center}
.pl-legal-bar a{color:var(--pl-muted,#8593a4);font-size:.85rem;text-decoration:none}
.pl-legal-bar a:hover{color:var(--pl-accent,#1f6feb)}


/* ===================== MOBILE: 3-column product grid ===================== */
@media (max-width: 767px) {
  /* tighter page margins → product gallery uses more width (Blocksy fixes container width + auto-centers ~23px each) */
  #main-container .ct-container {
    max-width: none !important;
    width: calc(100% - 20px) !important;   /* 10px each side instead of ~23px */
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .woocommerce ul.products {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 18px 8px !important;
    margin-bottom: 1.4rem !important;
  }
  .woocommerce ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  .woocommerce ul.products li.product figure { margin: 0 0 8px !important; }
  .woocommerce ul.products li.product .ct-media-container {
    padding: 7px !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }
  .woocommerce ul.products li.product img {
    padding: 0 !important;
    border-radius: 5px !important;
    margin: 0 !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
    min-height: 1.4em;                    /* tighter name→price gap */
    text-align: left !important;
  }
  .woocommerce ul.products li.product .price {
    display: block !important;
    font-size: 12.5px !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }
  .woocommerce ul.products li.product .meta-categories { display: none !important; }
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button {
    display: inline-block !important;    /* hug the text, not full-width */
    width: auto !important;
    min-height: 0 !important;            /* kill Blocksy's forced 40px height → neat, not chunky */
    margin: 0 !important;
    padding: 0.5em 0.9em !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}