/* ==========================================================================
   BIO METABOL — design system (ported verbatim from the Claude Design export)
   Palette: cream #FBF7EF, honey #E0A82E / #C8791A, dark brown #3B2410,
   green #4B6B3A. Fonts: Cairo (body) + El Messiri (headings). RTL.
   ========================================================================== */

*{box-sizing:border-box}

html{font-family:'Cairo',system-ui,sans-serif}
body{
  margin:0;
  background:#FBF7EF;
  font-family:'Cairo',system-ui,sans-serif;
  color:#3B2410;
  -webkit-font-smoothing:antialiased;
}
a{color:#C8791A;text-decoration:none}
a:hover{color:#4B6B3A}
::selection{background:#F5D98A}
input,select,textarea,button{font-family:inherit}

h1,h2,h3,h4{font-family:'El Messiri',serif;color:#3B2410}

/* layout helpers from the export */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.grid-p{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* animations */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes beefly{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(10px,-8px) rotate(4deg)}100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:fadeup .6s ease both}
.bio-floaty{animation:floaty 6s ease-in-out infinite}
.bio-beefly{animation:beefly 5s ease-in-out infinite}

/* responsive show/hide (matches export breakpoint 860px) */
@media(max-width:860px){.d-only{display:none!important}}
@media(min-width:861px){.m-only{display:none!important}}

/* keep space for the mobile bottom nav */
@media(max-width:860px){body{padding-bottom:64px}}

/* ==========================================================================
   Product card — the exact BioProductCard design, used for the WooCommerce
   loop (shop, category, home grids) so cards match while data stays dynamic.
   ========================================================================== */
ul.products,.grid-p{list-style:none;margin:0;padding:0}
.bio-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid #F0E7D6;
  border-radius:20px;overflow:hidden;box-shadow:0 6px 20px rgba(74,46,19,.06);
  transition:transform .25s ease,box-shadow .25s ease;height:100%;
}
.bio-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(74,46,19,.14)}
.bio-card__media{position:relative;cursor:pointer;display:block}
.bio-card__img{aspect-ratio:1/1;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#FBF4E6}
.bio-card__badge{position:absolute;top:12px;inset-inline-start:12px;background:#C8791A;color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(200,121,26,.3)}
.bio-card__body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1}
.bio-card__cat{font-size:12px;color:#A98A5E;font-weight:600}
.bio-card__title{margin:0;font-family:'El Messiri',serif;font-size:19px;font-weight:700;color:#3B2410;line-height:1.35}
.bio-card__title a{color:inherit}
.bio-card__short{margin:0;font-size:13.5px;color:#7A6A54;line-height:1.6;flex:1}
.bio-card__price-row{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.bio-card__price{font-family:'El Messiri',serif;font-size:22px;font-weight:700;color:#C8791A}
.bio-card__weight{font-size:12.5px;color:#A98A5E}
.bio-card__actions{display:flex;gap:8px;margin-top:10px}
.bio-card__add{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#E0A82E;color:#3B2410;border:none;border-radius:12px;padding:11px 8px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.bio-card__add:hover{background:#C8791A;color:#fff}
.bio-card__wa{width:46px;display:flex;align-items:center;justify-content:center;background:#fff;color:#4B6B3A;border:1.5px solid #4B6B3A;border-radius:12px;cursor:pointer;transition:all .2s}
.bio-card__wa:hover{background:#4B6B3A;color:#fff}

/* ==========================================================================
   WooCommerce page shells (shop / category / cart / checkout / single)
   styled to sit inside the honey palette without the old theme look.
   ========================================================================== */
.bio-shell{max-width:1200px;margin:0 auto;padding:26px 20px 60px}
.bio-shell h1.entry-title,.woocommerce-products-header__title{font-family:'El Messiri',serif;color:#3B2410}
.woocommerce ul.products{display:grid !important;gap:18px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:0}
.woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important}
.woocommerce .woocommerce-result-count{color:#8A7660}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce #respond input#submit,.woocommerce input.button{
  background:#E0A82E;color:#3B2410;border-radius:12px;font-weight:700;border:none;
}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:#C8791A;color:#fff}
.woocommerce .button.alt,.woocommerce #place_order,.woocommerce button.button.alt{background:#E0A82E;color:#3B2410}
.woocommerce #place_order:hover{background:#C8791A;color:#fff}
.woocommerce span.price,.woocommerce div.product p.price,.woocommerce ul.products li.product .price{color:#C8791A;font-weight:700}
.woocommerce-message,.woocommerce-info{border-top-color:#E0A82E}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection{border:1px solid #EFE3CE;border-radius:12px}