/* EU Guarantee Notice & GARAN Labels — brand: teal #0f766e, ink #0b3b36 */

.eggl-widget{margin:.8rem 0;max-width:460px;font-family:inherit}
.eggl-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  background:#f8f9fb;border:1px solid #e2e5eb;border-radius:12px;padding:12px 16px;margin-bottom:8px;
  transition:border-color .15s ease}
.eggl-row:last-child{margin-bottom:0}
.eggl-row[data-eggl-open]{cursor:pointer}
button.eggl-row:hover,.eggl-row[data-eggl-open]:hover{border-color:#c7ccd6}
.eggl-row__icon{flex:0 0 auto;display:inline-flex;line-height:0}
.eggl-row__icon--badge{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;background:#333c4d;color:#fff;
  font-weight:800;font-size:13px}
/* Minimal row style (default): title grows on the left, the sub text (e.g.
   "at least 2 years") sits inline on the right, next to the chevron —
   .eggl-row__text is unwrapped via display:contents so strong/sub become
   direct flex children of .eggl-row instead of stacking on top of each other. */
.eggl-row__text{display:contents;margin-top:-3px}
.eggl-row__text strong{flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;color:#1f2530;line-height:1.3;margin-top:-3px}
.eggl-row__sub{flex:0 0 auto;font-size:13px;color:#8a94a3;white-space:nowrap}
.eggl-row__btn{flex:0 0 auto;position:relative;width:20px;height:20px;padding:0;margin:0;
  background:none;border:0;cursor:pointer}
.eggl-row__btn::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  margin:-6px 0 0 -6px;border-right:2px solid #8a94a3;border-bottom:2px solid #8a94a3;
  transform:rotate(45deg);transition:transform .15s ease}
.eggl-row--trigger[aria-expanded="true"] .eggl-row__btn::after{transform:rotate(225deg);margin-top:-3px}
.eggl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Row style "classic": teal-accented row with a pill "View" button (the plugin's original look) */
.eggl-widget--classic{--eggl-notice-icon:#0f766e}
.eggl-widget--classic .eggl-row{background:#f4fbfa;border-color:#cfe8e4}
.eggl-widget--classic button.eggl-row:hover,.eggl-widget--classic .eggl-row[data-eggl-open]:hover{border-color:#cfe8e4}
/* Classic keeps the original stacked layout: title above, sub below — undo the minimal style's display:contents. */
.eggl-widget--classic .eggl-row__text{display:block;flex:1 1 auto;min-width:0;color:#0b3b36}
.eggl-widget--classic .eggl-row__text strong{color:#0b3b36}
.eggl-widget--classic .eggl-row__sub{display:block;flex:none;white-space:normal;margin-top:1px;font-size:12px;color:#4c6864}
.eggl-widget--classic .eggl-row__btn{width:auto;height:auto;background:#fff;
  border:1px solid #0f766e;border-radius:999px;padding:6px 12px}
.eggl-widget--classic .eggl-row__btn::after{display:none}
.eggl-widget--classic .eggl-row__btn .eggl-sr-only{position:static;width:auto;height:auto;padding:0;
  margin:0;overflow:visible;clip:auto;white-space:normal;font-weight:600;font-size:12px;color:#0f766e}
.eggl-widget--classic .eggl-row__btn:hover{background:#0f766e}
.eggl-widget--classic .eggl-row__btn:hover .eggl-sr-only{color:#fff}

/* Row style "custom": no row/card at all — just the merchant's own text (no decoration/color of
   its own, inherits the surrounding page styles) with a shield icon leading and a down chevron
   trailing, click to open the notice */
.eggl-notice-custom-trigger{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-decoration:none;cursor:pointer;text-align:left;
  display:inline-flex;align-items:center;gap:6px}
.eggl-notice-custom-trigger__icon{flex:0 0 auto;display:inline-flex;line-height:0}
.eggl-notice-custom-trigger__icon svg{width:1em;height:1em;display:block}
.eggl-notice-custom-trigger__text{text-decoration:none}
.eggl-notice-custom-trigger__chevron{flex:0 0 auto;width:.5em;height:.5em;margin-left:.15em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease}
.eggl-notice-custom-trigger[aria-expanded="true"] .eggl-notice-custom-trigger__chevron{transform:rotate(225deg)}

/* Modal */
.eggl-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.eggl-modal[hidden]{display:none}
.eggl-modal__backdrop{position:absolute;inset:0;background:rgba(11,59,54,.55)}
.eggl-modal__dialog{position:relative;background:#fff;border-radius:14px;max-width:420px;width:100%;
  max-height:80vh;overflow:auto;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.eggl-modal__close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;
  line-height:1;color:#4c6864;cursor:pointer;padding:4px 8px}
.eggl-modal__close:hover{color:#0b3b36}
.eggl-modal__panel[hidden]{display:none}

/* Shared by the modal panel and "full" inline mode */
.eggl-graphic-img{width:100%;height:auto;display:block;border:1px solid #e1efec;border-radius:0px}
.eggl-modal__panel svg,
.eggl-nested__panel svg,
.eggl-widget--garan > svg{width:100%;height:auto;display:block}
.eggl-more{margin:12px 0 0;font-size:13px;color:#4c6864;line-height:1.4}
.eggl-more a{color:#0f766e}

/* "Nested" display mode: compact trigger that expands/collapses in place */
button.eggl-row--trigger{appearance:none;-webkit-appearance:none;font:inherit;text-align:left;cursor:pointer;width:100%;color:inherit}
.eggl-nested__trigger{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;max-width:100%}
.eggl-nested__trigger svg{width:var(--eggl-garan-width, 220px);max-width:100%;height:auto;display:block}
.eggl-nested__chevron{flex:0 0 auto;width:8px;height:8px;border-right:2px solid #4c6864;border-bottom:2px solid #4c6864;
  transform:rotate(45deg);transition:transform .15s ease}
.eggl-nested__trigger[aria-expanded="true"] .eggl-nested__chevron{transform:rotate(225deg)}
.eggl-nested__panel{margin-top:10px}
.eggl-nested__panel[hidden]{display:none}

/* Site-wide header notice: sentence + hover preview + click-to-open modal */
.eggl-header-notice{font-family:inherit;font-size:13px;line-height:1.3}
.eggl-header-notice__wrap{position:relative;display:inline-block}
.eggl-header-notice__link{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;font-size:13px;color:#0f766e;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;cursor:pointer}
.eggl-header-notice__link:hover,.eggl-header-notice__link:focus{color:#0b3b36}
.eggl-header-notice__popover{display:none;position:absolute;top:100%;left:0;margin-top:8px;z-index:100000;
  width:260px;max-width:80vw;background:#fff;border:1px solid #cfe8e4;border-radius:10px;padding:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.18)}
.eggl-header-notice__wrap:hover .eggl-header-notice__popover,
.eggl-header-notice__wrap:focus-within .eggl-header-notice__popover{display:block}
.eggl-header-notice__popover img{border-radius:4px}

/* Nav-menu-item placement: inherit the theme's own menu-link look, like Home / Cart / Checkout */
li.eggl-header-notice-menu-item{list-style:none}
.eggl-header-notice-menu-item .eggl-header-notice__wrap{display:inline-flex;align-items:center}
.eggl-header-notice-menu-item .eggl-header-notice__link{color:inherit;font-size:inherit;text-decoration:none}
.eggl-header-notice-menu-item .eggl-header-notice__link:hover,
.eggl-header-notice-menu-item .eggl-header-notice__link:focus{color:inherit;text-decoration:underline}
.eggl-header-notice-menu-item .eggl-header-notice__popover{top:100%;left:auto;right:0}

/* Checkout-page notice: a bit more breathing room under the page heading */
.eggl-widget--checkout{margin:0 0 1.5rem;max-width:100%}

/* GARAN label shown at checkout/cart for each qualifying item (classic checkout's
   review-order row, classic cart's thumbnail cell, or the block checkout's cart-item row via JS).
   Padding above (clears the product row it follows) and margin below (clears whatever
   comes after — the next product row, shipping options, totals, etc.). */
.eggl-garan-checkout-slot,.eggl-garan-checkout-meta{display:block;padding-top:10px;margin:0 0 14px;max-width:100%}
.eggl-garan-checkout-slot .eggl-widget,.eggl-garan-checkout-meta .eggl-widget{margin:0}

/* Block checkout/cart: the label is inserted as a new row right after the whole
   cart-item row (see assets/js/eggl-garan-checkout.js) rather than nested inside the
   item's thumbnail column — that column has a fixed width set by the surrounding
   flex/grid layout, so content nested inside it can't grow past that regardless of
   the configured "Checkout badge size". As a full-width sibling row it's free to size
   itself; the --under-image modifier left-aligns/indents it to roughly line up under
   where the image sits above it, and adds extra bottom margin so it doesn't crowd
   into the next cart item's own row directly below it. */
.eggl-garan-checkout-slot--under-image{margin:0 0 20px 4px;padding-top:8px}

/* Optional "Powered by GARAN Labs" credit */
.eggl-credit{margin:2px 0 10px;font-size:11px;color:#8a97a8;font-family:inherit}
.eggl-credit strong{color:#0b3b36}