/* Shop sort box — full, unclipped label (Greg, Oct 26 2026). Loaded by inc/stock-order.php.
   Cause: body.natura select {padding:12px 14px} (natura.css) inside Blocksy's fixed 40px select
   left ~14px for a 23px line, cutting off the top/bottom of "Default sorting" / "Domyślne sortowanie". */
body.natura .woo-listing-top .woocommerce-ordering select{
  box-sizing:border-box;height:40px;line-height:38px;padding:0 30px 0 14px;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;white-space:nowrap;
}
/* Phones (Blocksy turns the box into a 34px icon-only button < 690px; on iOS the label still showed, clipped).
   Show a proper full-text box instead: 16px text (no iOS zoom), 44px tap target, chevron, no overlay icon. */
@media (max-width: 689.98px){
  body.natura .woo-listing-top .woocommerce-ordering{width:100%;justify-content:flex-end}
  body.natura .woo-listing-top .woocommerce-ordering select{
    color:#3A4F66;width:auto;min-width:220px;max-width:100%;height:44px;line-height:42px;
    padding:0 34px 0 14px;font-size:16px;-webkit-user-select:auto;user-select:auto;
    background-image:url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%234F5D6D' fill-rule='nonzero'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-size:9px auto;background-position:right 12px top 50%;
  }
  body.natura .woo-listing-top .woocommerce-ordering .ct-sort-icon{display:none}
}

/* Natura Peptides — shop sort bar v1 (Ivy). Drop into natura-blocksy premium.css or a child stylesheet.
   Targets WooCommerce/Blocksy: body.natura .woo-listing-top .woocommerce-ordering select.orderby
   Approach: native <select>. Styled closed control everywhere; styled open menu via
   appearance: base-select where supported (Chrome/Edge 135+, Safari/iOS 27+, Samsung 29+).
   Other browsers (Firefox, older Safari) keep the OS menu. No JS needed. */

body.natura .woo-listing-top .woocommerce-ordering {
  --sb-bg: #0F241D;          /* --rf-forest */
  --sb-bg-hover: #1B3A34;    /* --rf-moss   */
  --sb-text: #F6F1E8;        /* --rf-cream  */
  --sb-text-dim: #D9D2C1;    /* --rf-text-d */
  --sb-gold: #D4AF37;        /* --rf-gold   */
  --sb-gold-l: #F1D98A;      /* --rf-gold-l */
  --sb-ring: #9C7A26;        /* --rf-gold-d, focus ring on cream page */
  --sb-line: rgba(212,175,55,.45);
  --sb-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D4AF37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  --sb-chev-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
}

/* ---------- Closed control (all browsers) ---------- */
body.natura .woo-listing-top .woocommerce-ordering select.orderby {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 300px;
  max-width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 48px 0 22px;
  border: 1px solid var(--sb-line);
  border-radius: 999px;
  background: var(--sb-bg) var(--sb-chev) no-repeat right 20px center / 14px 14px;
  color: var(--sb-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px -10px rgba(6,17,13,.45);
  transition: background-color .2s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .2s;
}
body.natura .woo-listing-top .woocommerce-ordering select.orderby:hover {
  background-color: var(--sb-bg-hover);
  border-color: var(--sb-gold);
}
body.natura .woo-listing-top .woocommerce-ordering select.orderby:focus { outline: none; }
body.natura .woo-listing-top .woocommerce-ordering select.orderby:focus-visible {
  border-color: var(--sb-gold);
  outline: 2px solid var(--sb-ring);
  outline-offset: 3px;
}
/* Native OS menu (fallback browsers): keep options readable */
body.natura .woo-listing-top .woocommerce-ordering select.orderby option {
  background: var(--sb-bg);
  color: var(--sb-text);
}
body.natura .woo-listing-top .woocommerce-ordering .ct-sort-icon { display: none; }

/* ---------- Open menu (customizable select) ---------- */
@supports (appearance: base-select) {
  body.natura .woo-listing-top .woocommerce-ordering select.orderby,
  body.natura .woo-listing-top .woocommerce-ordering select.orderby::picker(select) {
    appearance: base-select;
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby {
    display: flex;
    align-items: center;
    background-image: none;
    padding-right: 20px;
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby::picker-icon {
    content: "";
    width: 14px;
    height: 14px;
    margin-inline-start: auto;
    padding-inline-start: 14px;
    box-sizing: content-box;
    background-color: var(--sb-gold);
    -webkit-mask: var(--sb-chev-mask) right center / 14px 14px no-repeat;
    mask: var(--sb-chev-mask) right center / 14px 14px no-repeat;
    transition: rotate .2s cubic-bezier(.2,.7,.2,1);
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby:hover::picker-icon { background-color: var(--sb-gold-l); }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby:open::picker-icon { rotate: 180deg; }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby:open { border-color: var(--sb-gold); background-color: var(--sb-bg-hover); }

  body.natura .woo-listing-top .woocommerce-ordering select.orderby::picker(select) {
    box-sizing: border-box;
    min-width: anchor-size(width);
    margin-block: 8px;
    padding: 6px;
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 16px;
    background: var(--sb-bg);
    box-shadow: 0 18px 40px -12px rgba(6,17,13,.55), 0 2px 6px rgba(6,17,13,.25);
    opacity: 0;
    translate: 0 -4px;
    transition: opacity .16s, translate .16s, overlay .16s allow-discrete, display .16s allow-discrete;
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style {
    body.natura .woo-listing-top .woocommerce-ordering select.orderby:open::picker(select) { opacity: 0; translate: 0 -4px; }
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    background: transparent;
    color: var(--sb-text-dim);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby option::checkmark {
    order: 2;
    margin-inline-start: auto;
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sb-gold);
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby option:hover,
  body.natura .woo-listing-top .woocommerce-ordering select.orderby option:focus-visible {
    background: rgba(212,175,55,.12);
    color: var(--sb-text);
    outline: none;
  }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby option:checked {
    background: rgba(212,175,55,.18);
    color: var(--sb-gold-l);
  }
}

/* ---------- Mobile (Blocksy collapses this to a 34px icon below 690px; undo that) ---------- */
@media (max-width: 689.98px) {
  body.natura .woo-listing-top .woocommerce-ordering { flex: 1 1 100%; margin-inline-start: 0; }
  body.natura .woo-listing-top .woocommerce-ordering select.orderby {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding-left: 20px;
    color: var(--sb-text);
    -webkit-user-select: auto;
    user-select: auto;
    background-image: var(--sb-chev);
  }
  @supports (appearance: base-select) {
    body.natura .woo-listing-top .woocommerce-ordering select.orderby { background-image: none; }
  }
}
