/*
Theme Name:   Ízeltláb
Description:  Storefront child theme for the Ízeltláb shop, in the "Retro Handheld" look of the Codex card: teal device colours, IBM Plex fonts, yellow press-down buttons and product tiles shaped like the Codex. Works with the Codex plugin (Codex number, difficulty and colour on the product tiles).
Author:       Dan
Template:     storefront
Version:      2.8.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  izeltlab
Domain Path:  /languages
*/

/* ------------------------------------------------------------------ tokens
   --izl-teal and --izl-teal-dark follow the Codex default colour theme (added inline by functions.php). */
:root{
  --izl-bg:#E9F1EC;--izl-ink:#17302E;--izl-muted:#4E6663;--izl-teal:#1F8A8A;--izl-teal-dark:#14605F;
  --izl-yellow:#F4D35E;--izl-panel:#DDEFE3;--izl-paper:#fff;--izl-line:#9FC3B8;
  --izl-lv1:#4C8DF6;--izl-lv2:#2EC4B6;--izl-lv3:#6CCB5F;--izl-lv4:#F4C430;--izl-lv5:#E5484D;
  --izl-sans:"Izeltlab Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --izl-mono:"Izeltlab Mono","Courier New",Courier,monospace;
  --izl-press:0 0.25rem 0 var(--izl-ink);
}

/* ------------------------------------------------------------------ base */
body{background:var(--izl-bg);color:var(--izl-ink);font-family:var(--izl-sans)}
h1,h2,h3,h4,h5,h6,.site-title,.page-title,.entry-title,.product_title{font-family:var(--izl-mono);color:var(--izl-ink);letter-spacing:-.01em}
h1,.page-title,.entry-title{font-weight:700}
a{color:var(--izl-teal-dark)}
a:hover,a:focus{color:var(--izl-ink)}
.col-full{max-width:82.5rem;box-sizing:border-box}
@media (min-width:768px){.col-full{padding-left:2.5rem;padding-right:2.5rem}}
.site-content{padding-top:0.5rem}
/* Breadcrumb (1.7.11): a dark strip glued under the header, like the handheld's status bar. Mono capitals, a bold ›
   between the steps, the last step in yellow; on a phone it stays on one line and scrolls sideways. */
.storefront-breadcrumb{background:var(--izl-teal-dark);margin:0 0 1.5rem;padding:0;box-shadow:inset 0 -0.1875rem 0 #0F4B4A}
.woocommerce-breadcrumb{display:flex;align-items:center;gap:0.25rem;min-height:1.875rem;margin:0;padding:0 0 0.1875rem;font:600 max(13px,0.8125rem)/1 var(--izl-mono);letter-spacing:.1em;text-transform:uppercase;color:#9FC3B8;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.woocommerce-breadcrumb::-webkit-scrollbar{display:none}
.woocommerce-breadcrumb a,.woocommerce-breadcrumb .is-last{flex:none;display:inline-flex;align-items:center;min-height:1.875rem;padding:0 0.375rem;color:#DDF0EC;text-decoration:none}
.woocommerce-breadcrumb a:hover,.woocommerce-breadcrumb a:focus{color:#fff;text-decoration:underline}
.woocommerce-breadcrumb .is-last,.woocommerce-breadcrumb a.is-last{color:var(--izl-yellow);font-weight:700}
.woocommerce-breadcrumb a:first-of-type::before{display:none}
.woocommerce-breadcrumb .izl-crumb-mark{flex:none;color:var(--izl-yellow);margin-left:-0.125rem}
.woocommerce-breadcrumb .izl-crumb-sep{flex:none;font:700 2em/1 var(--izl-sans);color:#B9D9D1;transform:translateY(-0.08em)}
@media (max-width:767px){.woocommerce-breadcrumb,.woocommerce-breadcrumb a,.woocommerce-breadcrumb .is-last{min-height:2.25rem}}
::selection{background:var(--izl-yellow);color:var(--izl-ink)}

/* ------------------------------------------------------------------ buttons: yellow, dark edge, press down */
.button,button.button,input.button,a.button,input[type=submit],button[type=submit]:not(.search-submit),
.added_to_cart,.wc-block-components-button:not(.is-link),.wp-element-button,.wp-block-button__link,.izl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;
  background:var(--izl-yellow);color:var(--izl-ink);border:2px solid var(--izl-ink);border-radius:0.625rem;box-shadow:var(--izl-press);
  font:700 max(13px,0.9375rem)/1.2 var(--izl-sans);letter-spacing:0;text-decoration:none;text-transform:none;padding:0.6875rem 1.25rem;cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.button:hover,button.button:hover,input.button:hover,a.button:hover,input[type=submit]:hover,button[type=submit]:not(.search-submit):hover,
.added_to_cart:hover,.wc-block-components-button:not(.is-link):hover,.wp-element-button:hover,.wp-block-button__link:hover,.izl-btn:hover{
  background:var(--izl-yellow);color:var(--izl-ink);filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 0.3125rem 0 var(--izl-ink)}
.button:active,button.button:active,input.button:active,a.button:active,input[type=submit]:active,button[type=submit]:not(.search-submit):active,
.added_to_cart:active,.wc-block-components-button:not(.is-link):active,.wp-element-button:active,.wp-block-button__link:active,.izl-btn:active{
  transform:translateY(0.25rem);box-shadow:0 0 0 var(--izl-ink)}
.button:focus-visible,a.button:focus-visible,.izl-btn:focus-visible,.wc-block-components-button:focus-visible{outline:0.1875rem solid var(--izl-teal);outline-offset:0.1875rem}
/* Second rank: white, same edge. */
.izl-btn.is-alt,.izl-more,.button.alt.is-light,.woocommerce-cart .cart .button[name=update_cart],.button.wc-backward{background:#fff;color:var(--izl-ink)}
.izl-btn.is-alt:hover,.izl-more:hover{background:#fff}
.button.disabled,.button:disabled,button:disabled{opacity:.55;cursor:default;transform:none}
/* WooCommerce "loading" spinner on the add to cart button */
.button.loading{opacity:.75}
.button.loading::after{color:var(--izl-ink)}
.button.added::after{color:var(--izl-ink)}

/* ------------------------------------------------------------------ forms */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=url],textarea,select,
.select2-container .select2-selection--single{background:#fff;color:var(--izl-ink);border:2px solid var(--izl-ink);border-radius:0.5rem;box-shadow:none;font-family:var(--izl-sans)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=password]:focus,input[type=search]:focus,input[type=number]:focus,textarea:focus,select:focus{
  background:#fff;outline:0.1875rem solid color-mix(in srgb,var(--izl-teal) 45%,transparent);outline-offset:0}
.select2-container .select2-selection--single{height:auto;padding:0.375rem 0.25rem}
.quantity .qty{width:4.4em;padding:0.625rem 0.375rem;text-align:center;font:700 max(13px,1rem) var(--izl-mono)}

/* ------------------------------------------------------------------ header */
.site-header{background:var(--izl-teal);color:#fff;border-bottom:0.25rem solid var(--izl-teal-dark);padding:0;margin-bottom:0}
.site-header .col-full{display:flex;align-items:center;gap:2.25rem;min-height:5.25rem;flex-wrap:wrap}
.site-header .col-full::before,.site-header .col-full::after{display:none}
.site-header .site-branding,.woocommerce-active .site-header .site-branding{float:none;width:auto;margin:0;padding:0.875rem 0}
.site-header .site-title,.site-header .site-title a,.site-header .site-title a:hover{color:#fff;font:700 max(13px,1.625rem)/1 var(--izl-mono);letter-spacing:-.02em;margin:0}
.site-header .site-description{color:rgba(255,255,255,.75);font-size:max(12px,0.75rem);margin:0.25rem 0 0}
.site-header .custom-logo-link{display:block}
.site-header .custom-logo-link img{max-height:3.5rem;width:auto}
.izl-nav{flex:1;min-width:0}
.izl-nav ul{display:flex;flex-wrap:wrap;gap:0.375rem 1.875rem;margin:0;padding:0;list-style:none}
.izl-nav li{margin:0}
.site-header .izl-nav a{display:block;padding:0.375rem 0;color:#fff;font:600 max(13px,0.9375rem) var(--izl-sans);text-decoration:none;border-bottom:0.1875rem solid transparent}
.site-header .izl-nav a:hover,.site-header .izl-nav a:focus{color:var(--izl-yellow)}
.site-header .izl-nav .current-menu-item>a,.site-header .izl-nav .is-current>a{color:var(--izl-yellow);border-bottom-color:var(--izl-yellow)}
.izl-icons{display:flex;align-items:center;gap:0.75rem;margin-left:auto}
.izl-icon{position:relative;display:grid;place-items:center;width:2.625rem;height:2.625rem;border-radius:0.625rem;background:var(--izl-teal-dark);color:#fff;border:0;padding:0;cursor:pointer;text-decoration:none}
.izl-icon:hover,.izl-icon:focus-visible,.izl-search-btn.is-on{background:var(--izl-ink);color:var(--izl-yellow)}
.izl-icon svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.izl-cart-count{position:absolute;top:-0.375rem;right:-0.375rem;min-width:1.25rem;height:1.25rem;padding:0 0.3125rem;box-sizing:border-box;border-radius:0.625rem;background:var(--izl-yellow);color:var(--izl-ink);border:2px solid var(--izl-ink);font:700 max(11px,0.6875rem)/1rem var(--izl-sans);text-align:center}
.izl-cart-count.is-empty{display:none}
@media (max-width:767px){
  .site-header .col-full{gap:0.5rem 1rem;min-height:0;padding-top:0.625rem;padding-bottom:0.625rem}
  .izl-nav{order:3;flex-basis:100%}
  .izl-nav ul{gap:0.25rem 1.25rem}
}
/* Storefront's own mobile bar repeats search, account and cart: the header has them now. */
.storefront-handheld-footer-bar{display:none}
@media (max-width:767px){.storefront-handheld-footer-bar+.site-footer,.site-footer{padding-bottom:2em}}

/* ------------------------------------------------------------------ page titles */
.woocommerce-products-header,.storefront-full-width-content .woocommerce-products-header{padding:0 0 0.25rem;margin:0;text-align:left}
.woocommerce-products-header__title.page-title,.page-title{font-size:max(13px,2.25rem);margin:0 0 0.375rem}
.term-description,.page-description{color:var(--izl-muted);font-size:max(13px,0.9375rem);margin:0 0 1.125rem}
.term-description p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ difficulty pills (replace the Codex dropdown) */
.izl-pills{display:flex;flex-wrap:wrap;gap:0.625rem;margin:0.375rem 0 1.625rem}
.izl-pill{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 0.9375rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff;color:var(--izl-ink);font:600 max(13px,0.8125rem)/1.2 var(--izl-sans);text-decoration:none;transition:transform .08s,box-shadow .08s}
.izl-pill:hover{color:var(--izl-ink);transform:translateY(-1px);box-shadow:0 0.1875rem 0 var(--izl-ink)}
.izl-pill.is-on{background:var(--izl-teal);color:#fff;box-shadow:0 0.1875rem 0 var(--izl-ink)}
/* 1.7.14: the level pills carry a dot per level in its card colour (green, yellow). */
.izl-pill-dots{display:inline-flex;gap:0.1875rem}
.izl-pill-dots i{width:0.625rem;height:0.625rem;border-radius:50%;border:1.5px solid var(--izl-ink);box-sizing:border-box}
.izl-pill-dots i.lv3{background:var(--izl-lv3)}.izl-pill-dots i.lv4{background:var(--izl-lv4)}
.izl-pill.is-on .izl-pill-dots i{border-color:#fff}
.fsz-filter{display:none} /* the pills do the same */
.storefront-sorting{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 1.125rem;margin-bottom:1.375rem;font-size:max(13px,0.875rem)}
.storefront-sorting .woocommerce-ordering,.storefront-sorting .woocommerce-result-count{float:none;margin:0}
.storefront-sorting::before,.storefront-sorting::after{display:none}
.woocommerce-ordering select{min-height:2.375rem;padding:0.375rem 2.125rem 0.375rem 0.75rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317302E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.75rem center/0.75rem 0.5rem;color:var(--izl-ink);font:600 max(13px,0.875rem) var(--izl-sans);appearance:none;-webkit-appearance:none;cursor:pointer}
.woocommerce-ordering select:focus{outline:0.1875rem solid var(--izl-yellow);outline-offset:1px}
.storefront-sorting .woocommerce-pagination{margin-left:auto}

/* ------------------------------------------------------------------ product tiles: small Codex devices */
ul.products,.wc-block-grid__products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.625rem 1.5rem;margin:0 0 2.5em;padding:0}
ul.products::before,ul.products::after{display:none}
/* stronger than Storefront's float columns (.site-main ul.products.columns-4 li.product:nth-child(4n) …) */
ul.products li.product,ul.products[class] li.product[class].izl-tile,.site-main ul.products[class] li.product[class].izl-tile{width:auto;float:none;margin:0;padding:0;clear:none;text-align:left}
@media (max-width:1100px){ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.125rem}}
@media (max-width:480px){ul.products{grid-template-columns:minmax(0,1fr)}}
.izl-tile{--izl-tile:var(--izl-teal);--izl-tile-dark:var(--izl-teal-dark);position:relative;display:flex;flex-direction:column;
  background:var(--izl-tile);border-radius:1.125rem 1.125rem 1.125rem 2.5rem;box-shadow:0.375rem 0.375rem 0 var(--izl-tile-dark);padding:0.75rem;box-sizing:border-box;transition:transform .15s ease,box-shadow .15s ease}
ul.products li.product.izl-tile{display:flex}
.izl-tile:hover{transform:translate(-2px,-2px);box-shadow:0.5rem 0.5rem 0 var(--izl-tile-dark)}
.izl-tile-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:0.5rem;background:color-mix(in srgb,var(--izl-tile-dark) 80%,#000);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
ul.products li.product .izl-tile-photo img{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;border-radius:0;transition:transform .3s ease}
.izl-tile-photo .izl-noimg{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.6);font:600 max(12px,0.75rem) var(--izl-mono)}
.izl-num{position:absolute;top:0.5rem;left:0.5rem;z-index:1;padding:0.1875rem 0.5rem;border-radius:0.25rem;background:var(--izl-ink);color:var(--izl-yellow);font:700 max(12px,0.75rem)/1.3 var(--izl-mono)}
.izl-tile .onsale{position:absolute;top:1.25rem;right:1.25rem;z-index:2;margin:0;padding:0.1875rem 0.5625rem;min-width:0;min-height:0;border:2px solid var(--izl-ink);border-radius:0.375rem;background:var(--izl-yellow);color:var(--izl-ink);font:700 max(12px,0.75rem)/1.3 var(--izl-mono);text-transform:uppercase}
.izl-tile-body{flex:1;display:flex;flex-direction:column;gap:0.25rem;margin-top:0.75rem;padding:0.875rem 0.875rem 0.875rem;border-radius:0.5rem;background:var(--izl-panel);color:var(--izl-ink)}
ul.products li.product .izl-tile-name,ul.products li.product .woocommerce-loop-product__title.izl-tile-name{margin:0;padding:0;font:700 max(13px,1rem)/1.25 var(--izl-mono);text-transform:uppercase;letter-spacing:0}
.izl-tile.is-supply .izl-tile-name{text-transform:none}
.izl-tile-name a{color:var(--izl-ink);text-decoration:none}
.izl-tile-name a:hover{color:var(--izl-teal-dark)}
.izl-tile-latin{margin:0;font:italic 400 max(13px,0.8125rem) var(--izl-sans);color:var(--izl-muted)}
.izl-tile-meta{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;margin:0.5rem 0 0.875rem}
.izl-diff{display:inline-flex;align-items:center;padding:0.1875rem 0.5625rem;border-radius:62.4375rem;background:#c9d8d1;color:#1F2412;font:700 max(12px,0.75rem)/1.3 var(--izl-mono);letter-spacing:1px}
.izl-diff{text-transform:uppercase} /* 1.7.14: the Codex level word (Kezdő, Haladó, Profi) instead of stars */
.izl-diff.lv1{background:var(--izl-lv1)}.izl-diff.lv2{background:var(--izl-lv2)}.izl-diff.lv3{background:var(--izl-lv3)}.izl-diff.lv4{background:var(--izl-lv4)}.izl-diff.lv5{background:var(--izl-lv5)}
ul.products li.product .izl-tile-meta .price{margin:0 0 0 auto;color:var(--izl-ink);font:700 max(13px,1.1875rem)/1.2 var(--izl-mono)}
.izl-tile-meta .price del{opacity:.5;font-size:.75em}
.izl-tile-meta .price ins{text-decoration:none;font-weight:700}
.izl-tile-btns{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:auto}
ul.products li.product .izl-tile-btns .button{flex:1;margin:0;padding:0.625rem 0.75rem;font-size:max(13px,0.875rem)}
.izl-tile-btns .izl-more{display:inline-flex;align-items:center;justify-content:center;padding:0.625rem 0.75rem;border:2px solid var(--izl-ink);border-radius:0.625rem;box-shadow:var(--izl-press);color:var(--izl-ink);font:700 max(13px,0.875rem)/1.2 var(--izl-sans);text-decoration:none;transition:transform .08s,box-shadow .08s}
.izl-tile-btns .izl-more:hover{color:var(--izl-ink);transform:translateY(-1px);box-shadow:0 0.3125rem 0 var(--izl-ink)}
.izl-tile-btns .izl-more:active{transform:translateY(0.25rem);box-shadow:none}
ul.products li.product .izl-tile-btns .added_to_cart{flex-basis:100%;margin:2px 0 0;padding:0.5rem 0.75rem;font-size:max(13px,0.8125rem);background:#fff}

/* ------------------------------------------------------------------ product page */
.single-product div.product .product_title{font-size:max(13px,2rem);margin-bottom:.3em}
.single-product div.product p.price,.single-product div.product span.price{color:var(--izl-ink);font:700 max(13px,1.75rem) var(--izl-mono)}
.single-product div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;padding:1.125rem;margin:1em 0 1.5em;border-radius:0.75rem;background:var(--izl-panel);box-shadow:inset 0 0 0 2px var(--izl-line)}
.single-product div.product form.cart .quantity{margin:0;float:none}
.single-product div.product form.cart .single_add_to_cart_button{float:none;flex:1;min-width:12.5rem;padding:0.875rem 1.5rem;font-size:max(13px,1.0625rem)}
.single-product div.product .woocommerce-product-gallery .flex-viewport,.single-product div.product .woocommerce-product-gallery img{border-radius:0.75rem}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img{border-radius:0.375rem}
.single-product .product_meta{font-size:max(13px,0.8125rem);color:var(--izl-muted)}

/* buy box (trust stack): title, Latin name, price row, pack + quantity + cart panel, trust points, short description, questions */
.single-product div.product .summary .product_title{margin-bottom:.1em}
/* the card left of the buy box, also when an older Codex marks it "top" */
@media (min-width:768px){.single-product div.product>.fsz-wrap{float:left;width:41%;clear:none;margin:0 0 2em;justify-content:flex-start}}
.izl-admin-hint{margin:0.875rem 0;padding:0.75rem 0.875rem;border-radius:0.625rem;background:#FFF4CC;border:2px dashed #C9A227;color:var(--izl-ink);font-size:max(13px,0.875rem)}
.izl-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.875rem;margin:1rem 0 0.875rem}
.single-product div.product .izl-price-row p.price{margin:0;font-size:max(13px,2rem);letter-spacing:-.03em}
.single-product div.product .izl-price-row p.price del{font-size:max(13px,1.0625rem);font-weight:400;color:var(--izl-muted);opacity:1;margin-right:0.5rem}
.single-product div.product .izl-price-row p.price ins{text-decoration:none;font-weight:700}
.izl-price-note{font-size:max(13px,0.875rem);color:var(--izl-muted)}
.single-product div.product form.cart{width:fit-content;max-width:100%;margin:0 0 0.375rem;padding:0.875rem;border-radius:0.75rem} /* the panel hugs its buttons */
.single-product div.product form.cart .single_add_to_cart_button{width:21.25rem}
.single-product div.product form.variations_form{display:block}
.single-product div.product form.cart table.variations{width:auto;margin:0;border:0;background:none}
.single-product div.product form.cart table.variations tr{display:flex;flex-direction:column;gap:0.375rem}
.single-product div.product form.cart table.variations tr+tr{margin-top:0.75rem}
.single-product div.product form.cart table.variations th,.single-product div.product form.cart table.variations td{padding:0;margin:0;background:none;border:0;text-align:left}
.single-product div.product form.cart table.variations th label{font:600 max(13px,0.875rem) var(--izl-sans);margin:0}
.single-product div.product form.cart .reset_variations{display:none!important}
.izl-chips-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.izl-chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.izl-chip{all:unset;box-sizing:border-box;cursor:pointer;height:2.125rem;display:inline-flex;align-items:center;padding:0 0.75rem;border:2px solid var(--izl-line);border-radius:0.5rem;background:#fff;color:var(--izl-ink);font:600 max(13px,0.8438rem)/1 var(--izl-sans);transition:border-color .12s,transform .08s,box-shadow .08s}
.izl-chip:hover{border-color:var(--izl-ink)}
.izl-chip[aria-checked=true]{border-color:var(--izl-ink);background:var(--izl-yellow);box-shadow:0 2px 0 var(--izl-ink)}
.izl-chip:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.izl-chip:focus-visible{outline:0.1875rem solid var(--izl-teal);outline-offset:2px}
.single-product div.product .single_variation_wrap .woocommerce-variation-price{display:none}
.single-product div.product .single_variation_wrap .woocommerce-variation-availability p{margin:0 0 0.625rem}
.single-product div.product .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;padding-top:0.75rem}
/* Storefront's clearfix pseudo-elements would be flex items (an empty first slot) */
.single-product div.product form.cart::before,.single-product div.product form.cart::after,.single-product div.product .woocommerce-variation-add-to-cart::before,.single-product div.product .woocommerce-variation-add-to-cart::after{display:none}
.single-product div.product form.cart :is(.izl-qty,.quantity:has(>.izl-qty-btn)){display:flex;align-items:center;height:2.875rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff}
.single-product div.product form.cart :is(.izl-qty,.quantity:has(>.izl-qty-btn)) input.qty{width:2.25rem;height:100%;padding:0;border:0;background:none;box-shadow:none;text-align:center;font:700 max(13px,1rem) var(--izl-mono);color:var(--izl-ink);-moz-appearance:textfield}
:is(.izl-qty,.quantity:has(>.izl-qty-btn)) input.qty::-webkit-inner-spin-button,:is(.izl-qty,.quantity:has(>.izl-qty-btn)) input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.izl-qty-btn{all:unset;cursor:pointer;width:2.125rem;height:100%;display:grid;place-items:center;font:700 max(13px,1.125rem) var(--izl-mono);color:var(--izl-ink)}
.izl-qty-btn:hover{background:var(--izl-panel)}
.izl-qty-btn.is-less{border-radius:0.5rem 0 0 0.5rem}.izl-qty-btn.is-more{border-radius:0 0.5rem 0.5rem 0}
.izl-qty-btn:focus-visible{outline:0.1875rem solid var(--izl-teal);outline-offset:-0.1875rem}
.single-product div.product form.cart .single_add_to_cart_button{flex:1 1 auto;max-width:21.25rem;min-width:0;height:2.875rem;padding:0 1.375rem;font-size:max(13px,1rem)}
.izl-trust{list-style:none;margin:1.375rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0.875rem 1.25rem}
.izl-trust li{display:flex;gap:0.75rem;align-items:flex-start;margin:0}
.izl-trust-icon{flex:none;width:2.5rem;height:2.5rem;border-radius:0.75rem;display:grid;place-items:center;background:color-mix(in srgb,var(--izl-group,var(--izl-teal)) 20%,#fff)}
.izl-trust-icon svg{width:1.375rem;height:1.375rem;fill:none;stroke:var(--izl-group-dark,var(--izl-teal-dark));stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.izl-trust b{display:block;font:700 max(13px,0.9375rem)/1.3 var(--izl-sans)}
.izl-trust li>div>span{display:block;margin-top:2px;font-size:max(13px,0.8438rem);line-height:1.4;color:var(--izl-muted)}
.single-product div.product .summary .woocommerce-product-details__short-description{margin:1.375rem 0 0.25rem;padding-top:1.125rem;border-top:1px solid var(--izl-line);font-size:max(13px,0.9375rem);line-height:1.55}
.izl-faqs{margin-top:0.875rem}
.izl-faq{border-bottom:1px solid var(--izl-line)}
.izl-faq summary{cursor:pointer;padding:0.75rem 0;font:600 max(13px,0.9375rem) var(--izl-sans);list-style:none;display:flex;justify-content:space-between;gap:0.75rem}
.izl-faq summary::-webkit-details-marker{display:none}
.izl-faq summary::after{content:"+";font:700 max(13px,1.125rem)/1 var(--izl-mono);color:var(--izl-muted)}
.izl-faq[open] summary::after{content:"−"}
.izl-faq-a{padding:0 0 0.75rem;font-size:max(13px,0.9062rem);line-height:1.55;color:var(--izl-muted)}
.izl-faq-a p:last-child{margin-bottom:0}
.woocommerce-tabs ul.tabs li a{font-family:var(--izl-mono)}
.related.products>h2,.upsells.products>h2,.izl-section-head h2{font:700 max(13px,1.5rem) var(--izl-mono);margin:0 0 1.125rem}
.stock.in-stock{color:#2E7D4F;font-weight:600}
.stock.out-of-stock{color:#B3261E;font-weight:600}

/* ------------------------------------------------------------------ cart, checkout, account */
.woocommerce-cart .site-main,.woocommerce-checkout .site-main,.woocommerce-account .site-main{font-size:max(13px,0.9375rem)}
table.shop_table,table.cart,.woocommerce-checkout-review-order-table{border:2px solid var(--izl-ink);border-radius:0.75rem;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
table.shop_table th{background:var(--izl-panel);font-family:var(--izl-mono);color:var(--izl-ink)}
table.shop_table td,table.shop_table th{border-color:var(--izl-line)}
table.cart td.product-name a{color:var(--izl-ink);font-weight:600}
table.cart img{border-radius:0.375rem;max-width:4rem}
.cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-form-login,.woocommerce-form-register,.woocommerce-MyAccount-content{border-radius:0.75rem}
.cart-collaterals .cart_totals{padding:1.25rem;background:var(--izl-panel);border:2px solid var(--izl-ink);box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark)}
.cart-collaterals .cart_totals h2{font-size:max(13px,1.375rem)}
.wc-proceed-to-checkout .checkout-button{width:100%;font-size:max(13px,1.0625rem);padding:0.9375rem 1.25rem}
#payment{background:var(--izl-panel);border-radius:0.75rem}
#payment .place-order .button,#place_order{width:100%;font-size:max(13px,1.0625rem);padding:0.9375rem 1.25rem}
.woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-noreviews,p.no-comments{border-radius:0.625rem;border:2px solid var(--izl-ink);background:#fff;color:var(--izl-ink);border-left-width:0.5rem}
.woocommerce-message{border-left-color:var(--izl-teal)}
.woocommerce-info{border-left-color:var(--izl-lv1)}
.woocommerce-error{border-left-color:var(--izl-lv5)}
.woocommerce-info a,.woocommerce-message a:not(.button),.woocommerce-error a{color:var(--izl-teal-dark);font-weight:600}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{color:var(--izl-ink)}
.woocommerce-message .button,.woocommerce-info .button{margin-left:0.75rem}
.woocommerce-MyAccount-navigation ul{margin:0;border:2px solid var(--izl-ink);border-radius:0.75rem;overflow:hidden;background:#fff}
.woocommerce-MyAccount-navigation ul li{border-color:var(--izl-line)}
.woocommerce-MyAccount-navigation ul li a{padding:0.75rem 1rem;color:var(--izl-ink);font-weight:600;text-decoration:none}
.woocommerce-MyAccount-navigation ul li.is-active a{background:var(--izl-teal);color:#fff}
.woocommerce-MyAccount-navigation ul li a::before{display:none}
/* Block cart and checkout (WooCommerce's default pages since 8.3) */
.wc-block-cart,.wc-block-checkout{font-family:var(--izl-sans)}
.wc-block-components-title,.wc-block-cart__totals-title,.wc-block-components-checkout-step__title{font-family:var(--izl-mono)!important;color:var(--izl-ink)}
.wc-block-components-sidebar .wc-block-components-panel,.wc-block-components-totals-wrapper{border-color:var(--izl-line)}
.wc-block-cart .wc-block-cart__sidebar,.wp-block-woocommerce-checkout-order-summary-block{background:var(--izl-panel);border:2px solid var(--izl-ink);border-radius:0.75rem;box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark);padding:1rem}
.wc-block-components-text-input input,.wc-block-components-combobox .wc-block-components-combobox-control input,.wc-blocks-components-select__select{border:2px solid var(--izl-ink)!important;border-radius:0.5rem!important}
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{width:100%;min-height:3.25rem;font-size:max(13px,1.0625rem)}
.wc-block-components-product-name{color:var(--izl-ink);font-weight:600}
.wc-block-cart-item__image img{border-radius:0.375rem}
.wc-block-components-quantity-selector{border:2px solid var(--izl-ink);border-radius:0.5rem}
.wc-block-components-quantity-selector::after{display:none}

/* ------------------------------------------------------------------ front page */
.izl-home{padding-bottom:3em}
.izl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28.75rem);align-items:center;gap:2.5rem;padding:0.5rem 0 0}
.izl-hero-kicker{display:inline-block;margin:0 0 0.875rem;padding:0.25rem 0.625rem;border-radius:0.375rem;background:var(--izl-ink);color:var(--izl-yellow);font:700 max(12px,0.75rem)/1.3 var(--izl-mono);letter-spacing:.08em;text-transform:uppercase}
.izl-hero h1{margin:0 0 1rem;font:700 max(13px,3rem)/1.08 var(--izl-mono);letter-spacing:-.03em}
.izl-hero-text{margin:0 0 1.625rem;max-width:34em;font-size:max(13px,1.125rem);line-height:1.55;color:var(--izl-muted)}
.izl-hero.no-card{grid-template-columns:minmax(0,1fr)}
.izl-hero-text p{margin:0 0 .6em}
.izl-hero-btns{display:flex;flex-wrap:wrap;gap:0.875rem;margin:0}
.izl-hero-btns .izl-btn{padding:0.875rem 1.625rem;font-size:max(13px,1rem)}
.izl-hero-card .fsz-wrap{margin:0 0 0.5rem}
.izl-hero-card{position:relative}
/* Smaller than on the product page, and smaller still on short screens (down to 70%), so the top of the newest isopods
   always peeks in at the bottom of the first screen: the cut-off row makes people scroll. 750 = the card's height in --fsz-u. */
.izl-hero-card .fsz-device{--fsz-u:clamp(.0375rem,calc((100vh - 22.5rem) / 750),.05375rem)}
body.home.page:not(.page-template-template-homepage) .site-header,body.home.blog .site-header{margin-bottom:1.5rem}
@media (max-width:960px){.izl-hero{grid-template-columns:minmax(0,1fr);gap:1.75rem}.izl-hero h1{font-size:max(13px,2.25rem)}}
.izl-section{margin-top:2.5rem}
.izl-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.25rem}
.izl-section-head a{font:700 max(13px,0.875rem) var(--izl-sans);color:var(--izl-teal-dark);text-decoration:none;white-space:nowrap}
.izl-section-head a:hover{text-decoration:underline}
.izl-about{display:grid;grid-template-columns:minmax(0,1fr);margin-top:4rem;padding:2rem 2.25rem;border-radius:1.125rem 1.125rem 1.125rem 2.5rem;background:var(--izl-teal);color:#fff;box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark)}
.izl-about h2{margin:0 0 0.75rem;color:#fff;font:700 max(13px,1.625rem) var(--izl-mono)}
.izl-about-text{max-width:48em;font-size:max(13px,1rem);line-height:1.65;color:rgba(255,255,255,.92)}
.izl-about-text p:last-child{margin-bottom:0}
.izl-about-text a{color:var(--izl-yellow)}

/* ------------------------------------------------------------------ footer */
.site-footer{background:var(--izl-ink);color:rgba(255,255,255,.75);border-top:0.25rem solid var(--izl-teal)}
.site-footer a,.site-footer a:not(.button):not(.components-button),.site-footer .widget-title,.site-footer h1,.site-footer h2,.site-footer h3{color:#fff}
.site-footer .site-info{font-size:max(13px,0.8125rem)}

/* product page: the Codex card tilts and floats out of its column, so nothing may clip it */
.single-product div.product{overflow:visible;display:flow-root;padding-top:1.875rem}
.related.products>h2,.upsells.products>h2{text-align:left}

/* pages (cart, checkout, account …): title on the left, close to the content; block cart / checkout inside the content width */
.site-main .hentry .entry-header,.storefront-full-width-content .site-main .hentry .entry-header{padding:0 0 1.375rem;margin:0;text-align:left}
.storefront-align-wide.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-cart.alignwide,.storefront-align-wide.storefront-full-width-content .hentry .entry-content .wp-block-woocommerce-checkout.alignwide,.entry-content .wp-block-woocommerce-cart.alignwide,.entry-content .wp-block-woocommerce-checkout.alignwide{margin-left:0;margin-right:0;width:auto;max-width:100%;padding-left:0;padding-right:0}
.wc-block-cart .wc-block-cart__sidebar{align-self:flex-start}
.entry-content a.wc-block-components-button,.entry-content a.wc-block-components-button:hover{text-decoration:none}

/* account login / register: a card, not a full-width form */
.woocommerce-account:not(.logged-in) .entry-content .woocommerce:not(:has(.u-columns)){max-width:32.5rem}
.woocommerce-account:not(.logged-in) .entry-content .woocommerce{max-width:62.5rem}
.woocommerce-account form.woocommerce-form-login,.woocommerce-account form.woocommerce-form-register{margin:0;padding:1.625rem 1.75rem;border:2px solid var(--izl-ink);border-radius:1.125rem 1.125rem 1.125rem 2.5rem;background:var(--izl-panel);box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark)}
.woocommerce-account .woocommerce>h2,.woocommerce-account .u-column1>h2,.woocommerce-account .u-column2>h2{font:700 max(13px,1.375rem) var(--izl-mono);margin:0 0 0.875rem}

/* front page carousel (assets/carousel.js): the cards share one spot, the script places them on the ring */
.izl-hero:has(.izl-carousel){grid-template-columns:minmax(0,1fr) minmax(0,37.5rem)}
.izl-carousel{display:grid;place-items:center;width:100%;perspective:87.5rem;perspective-origin:50% 40%}
.izl-slot{grid-area:1/1;width:100%;will-change:transform,filter}
/* Clicks: every slot spans the whole carousel, so only the card itself takes them (else the front slot covers the
   visible edges of the back cards). A back card takes the click as a whole: carousel.js turns it to the front. */
.izl-slot{pointer-events:none}
.izl-slot .fsz-device{pointer-events:auto}
.izl-slot:not(.is-front) .fsz-device{cursor:pointer}
.izl-slot:not(.is-front) .fsz-device *{pointer-events:none}
/* (1.7.1: the back cards' hover effect is chosen in the Edit cards panel, see the 1.7.1 block) */
.izl-carousel:not(.is-ready) .izl-slot:not(.is-front){visibility:hidden} /* until the script has placed them */
@media (prefers-reduced-motion:reduce){.izl-slot{will-change:auto}}
@media (max-width:960px){.izl-hero:has(.izl-carousel){grid-template-columns:minmax(0,1fr)}.izl-carousel{overflow:hidden;padding:1.25rem 0}}

/* front page quick edit (logged-in admins, assets/home-edit.js) */
.izl-edit-open{position:absolute;top:-1.875rem;right:0;z-index:300;padding:0.4375rem 0.875rem;border:2px solid var(--izl-ink);border-radius:62.4375rem;background:var(--izl-yellow);color:var(--izl-ink);font:700 max(13px,0.8125rem) var(--izl-sans);cursor:pointer;box-shadow:0 0.1875rem 0 var(--izl-ink)}
.izl-edit-open:hover{background:#fff}
.izl-edit{width:min(27.5rem,calc(100vw - 2rem));padding:1.5rem 1.625rem;border:2px solid var(--izl-ink);border-radius:1.125rem 1.125rem 1.125rem 2.5rem;background:var(--izl-panel);color:var(--izl-ink);box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark)}
.izl-edit::backdrop{background:rgba(23,48,46,.45)}
.izl-edit h2{margin:0 0 1rem;font:700 max(13px,1.25rem) var(--izl-mono)}
.izl-edit-count{display:flex;gap:0.5rem;align-items:center;margin:0 0 1rem;padding:0;border:0;background:none}
.izl-edit-count legend{float:left;margin:0 0.75rem 0 0;padding:0;background:none;font-weight:600;font-size:max(13px,0.875rem)}
.izl-edit-count label{margin:0}
.izl-edit-count input{position:absolute;opacity:0}
.izl-edit-count span{display:block;min-width:2.5rem;padding:0.375rem 0;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff;text-align:center;font:700 max(13px,0.9375rem) var(--izl-mono);cursor:pointer}
.izl-edit-count input:checked+span{background:var(--izl-teal);color:#fff}
.izl-edit-count input:focus-visible+span{outline:0.1875rem solid var(--izl-yellow);outline-offset:2px}
.izl-edit-card{display:block;margin:0 0 0.75rem;font-size:max(13px,0.875rem);font-weight:600}
.izl-edit-card[hidden]{display:none}
.izl-edit-card select{display:block;width:100%;margin-top:0.25rem;min-height:2.5rem;padding:0.375rem 0.625rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff;font:500 max(13px,0.875rem) var(--izl-sans)}
.izl-edit-note{margin:0.25rem 0 0;font-size:max(12px,0.75rem);color:var(--izl-muted)}
.izl-edit-msg{min-height:1.4em;margin:0.5rem 0 0;font-size:max(13px,0.8125rem)}
.izl-edit-btns{display:flex;justify-content:flex-end;gap:0.625rem;margin-top:0.625rem}
.izl-edit .izl-btn.is-alt{background:#fff}

/* ------------------------------------------------------------------ buy box: sales line, pack question, stock line (1.3.5) */
/* Codex products: no name here (the card shows it), the sales line takes its place. Then for packs: the question, a tip,
   the pack buttons, the price of the chosen pack, the cart panel. Under the cart button: in stock and when it ships. */
.izl-sales-line{margin:0 0 0.875rem;max-width:35rem;font:700 max(13px,1.875rem)/1.2 var(--izl-mono);letter-spacing:-.01em;color:var(--izl-ink);text-wrap:balance}
/* 1.7.13: the Codex tags as chips above the sales line, each a link to the shop filtered to that tag. */
.izl-tagchips{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 0.625rem}
.izl-tagchips a{display:inline-flex;align-items:center;gap:0.375rem;height:1.75rem;padding:0 0.75rem;border:1.5px solid var(--izl-teal);border-radius:999px;background:#fff;color:var(--izl-teal-dark);font:700 max(13px,0.75rem)/1 var(--izl-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .12s,color .12s}
.izl-tagchips a::after{content:"›";font-size:1.1em}
.izl-tagchips a:hover{background:var(--izl-teal);color:#fff}
.izl-tagchips a:focus-visible{outline:0.1875rem solid var(--izl-teal);outline-offset:2px}
.izl-pack-q{margin:0.375rem 0 0.25rem;font:700 max(13px,0.8125rem)/1.2 var(--izl-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--izl-teal)}
.izl-pack-tip{margin:0 0 0.75rem;max-width:32.5rem;font-size:max(13px,1rem);line-height:1.4;color:var(--izl-muted)}
/* The pack form: the buttons and the price sit on the page, only quantity + cart button keep the panel. */
.single-product div.product form.variations_form:has(.izl-buy-head){display:block;width:auto;padding:0;margin:0 0 0.375rem;background:none;box-shadow:none}
.single-product div.product form.variations_form .izl-price-row{margin:1rem 0 0.75rem}
.single-product div.product form.variations_form:has(.izl-pack-q) table.variations th{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* the question says it */
.single-product div.product form.variations_form:has(.izl-buy-head) .woocommerce-variation-availability{display:none}
.single-product div.product form.variations_form:has(.izl-buy-head) .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;width:fit-content;max-width:100%;padding:0.875rem;border-radius:0.75rem;background:var(--izl-panel);box-shadow:inset 0 0 0 2px var(--izl-line)}
.izl-stock{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.5rem;margin:0.625rem 0 1.25rem;padding:0.4375rem 0.75rem;border-radius:62.4375rem;font-size:max(13px,0.875rem);line-height:1.2;background:#DFF3E6;color:#1D5C3A}
.izl-stock i{flex:none;width:0.5625rem;height:0.5625rem;border-radius:50%;background:#2FB36B;box-shadow:0 0 0 0.1875rem rgba(47,179,107,.25)}
.izl-stock b{font-weight:600}
.izl-stock.is-low,.izl-stock.is-back{background:#FFF1CC;color:#7A5300}
.izl-stock.is-low i,.izl-stock.is-back i{background:#E6A700;box-shadow:0 0 0 0.1875rem rgba(230,167,0,.25)}
.izl-stock.is-out{background:#FBE3E3;color:#8A1F1F}
.izl-stock.is-out i{background:#D64545;box-shadow:0 0 0 0.1875rem rgba(214,69,69,.2)}
/* In-place editing, only for whoever can edit the product (English, like the rest of the admin tools). */
[data-izl-edit] .izl-edit-btn{all:unset;cursor:pointer;margin-left:0.625rem;padding:2px 0.5rem;border-radius:0.375rem;vertical-align:middle;font:600 max(12px,0.75rem)/1.6 var(--izl-sans);letter-spacing:0;text-transform:none;color:var(--izl-teal);box-shadow:inset 0 0 0 1px var(--izl-line);background:#fff}
[data-izl-edit] .izl-edit-btn:hover,[data-izl-edit] .izl-edit-btn:focus-visible{box-shadow:inset 0 0 0 2px var(--izl-teal)}
[data-izl-edit].is-empty .izl-edit-text{cursor:pointer;color:var(--izl-muted);opacity:.55;font-style:italic} /* the sample, admins only */
.izl-edit-form{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.izl-edit-form .izl-edit-input{flex:1 1 20rem;min-width:0;font:inherit;padding:0.375rem 0.625rem;border:2px solid var(--izl-teal);border-radius:0.5rem;background:#fff;color:var(--izl-ink)}
.izl-edit-form button{all:unset;cursor:pointer;padding:0.5rem 0.75rem;border-radius:0.5rem;font:600 max(13px,0.8125rem)/1 var(--izl-sans);letter-spacing:0;text-transform:none}
.izl-edit-form .izl-edit-save{background:var(--izl-yellow);color:var(--izl-ink);box-shadow:0 2px 0 var(--izl-ink)}
.izl-edit-form .izl-edit-cancel{color:var(--izl-muted)}
@media (max-width:767px){.izl-sales-line{font-size:max(13px,1.5rem)}}

/* ------------------------------------------------------------------ 1.3.6: one width for the whole buy box, editor */
/* Every part of the buy box (sales line, packs, price, cart panel, stock, trust points, questions) has the width of the
   cart panel, so the column reads as one block; the Codex card stands a little further from it. */
.single-product div.product{--izl-buy-w:31.25rem}
.single-product div.product .summary>*{max-width:var(--izl-buy-w)}
.single-product div.product .summary form.cart{max-width:var(--izl-buy-w)}
.single-product div.product form.cart:not(.variations_form){width:100%;box-sizing:border-box}
.single-product div.product .summary .stock.out-of-stock{max-width:var(--izl-buy-w)}
.single-product div.product form.variations_form:has(.izl-buy-head) .woocommerce-variation-add-to-cart{width:100%;box-sizing:border-box}
.single-product div.product form.cart .single_add_to_cart_button{max-width:none}
.izl-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:479px){.izl-trust{grid-template-columns:minmax(0,1fr)}}
@media (min-width:768px){.single-product div.product:has(>.fsz-wrap) .summary{padding-left:2.5rem;box-sizing:border-box}}
/* Admin only: the hidden name, and the editor. */
.izl-admin-name{margin:0 0 0.625rem;font-size:max(12px,0.75rem);color:var(--izl-muted)}
.izl-admin-name b{font-weight:600}
.izl-buybox-open{all:unset;cursor:pointer;display:inline-block;margin:0 0 0.75rem;padding:0.375rem 0.75rem;border-radius:62.4375rem;font:600 max(13px,0.8125rem)/1.4 var(--izl-sans);color:var(--izl-ink);background:#fff;box-shadow:inset 0 0 0 2px var(--izl-ink)}
.izl-buybox-open:hover,.izl-buybox-open:focus-visible{background:var(--izl-yellow)}
.izl-buybox{width:min(28.75rem,calc(100vw - 2rem));padding:0;border:0;border-radius:0.875rem;box-shadow:0 1.25rem 3.75rem rgba(0,0,0,.35);color:var(--izl-ink);font:max(13px,0.9375rem)/1.45 var(--izl-sans)}
.izl-buybox::backdrop{background:rgba(23,48,46,.45)}
.izl-bb-form{display:grid;gap:1rem;padding:1.375rem}
.izl-bb-form h2{margin:0;font:700 max(13px,1.25rem) var(--izl-mono)}
.izl-bb-row{margin:0;padding:0;border:0;background:none;display:grid;gap:0.5rem;min-width:0}
.izl-bb-row legend{padding:0;margin:0 0 0.5rem;font-weight:600}
.izl-bb-inline{display:flex;align-items:center;gap:0.5rem}
.izl-bb-inline input{width:7.5rem;padding:0.5rem 0.625rem;border:2px solid var(--izl-line);border-radius:0.5rem;font:600 max(13px,1rem) var(--izl-mono);color:var(--izl-ink);background:#fff}
.izl-bb-inline input:focus{border-color:var(--izl-teal);outline:0}
.izl-bb-help,.izl-bb-note{margin:0;font-size:max(13px,0.8125rem);color:var(--izl-muted)}
.izl-bb-warn{margin:0;padding:0.5rem 0.625rem;border-radius:0.5rem;background:#FFF4CC;font-size:max(13px,0.8125rem)}
.izl-bb-check{display:flex;gap:0.5rem;align-items:center;font-size:max(13px,0.875rem)}
.izl-bb-packs{display:flex;flex-wrap:wrap;gap:0.5rem}
.izl-bb-pack{display:flex;align-items:center;gap:0.375rem;padding:0.5rem 0.625rem;border:2px solid var(--izl-line);border-radius:0.5rem;cursor:pointer;font-size:max(13px,0.875rem)}
.izl-bb-pack:has(input:checked){border-color:var(--izl-ink);background:var(--izl-yellow)}
.izl-bb-switch{display:flex;align-items:center;gap:0.625rem;cursor:pointer}
.izl-bb-switch input{position:absolute;opacity:0}
.izl-bb-switch span{flex:none;width:2.625rem;height:1.5rem;border-radius:62.4375rem;background:#C9D6D1;position:relative;transition:background .2s}
.izl-bb-switch span::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;transition:transform .2s}
.izl-bb-switch input:checked+span{background:#2FB36B}
.izl-bb-switch input:checked+span::after{transform:translateX(1.125rem)}
.izl-bb-switch input:focus-visible+span{outline:2px solid var(--izl-teal);outline-offset:2px}
.izl-bb-switch b{font-weight:600;font-size:max(13px,0.875rem)}
.izl-bb-actions{display:flex;justify-content:flex-end;gap:0.625rem}
.izl-bb-actions button{all:unset;cursor:pointer;padding:0.625rem 1rem;border-radius:0.5rem;font-weight:600}
.izl-bb-save{background:var(--izl-yellow);box-shadow:0 0.1875rem 0 var(--izl-ink)}
.izl-bb-save:disabled{opacity:.6;cursor:default}
.izl-bb-cancel{color:var(--izl-muted)}
@media (prefers-reduced-motion:reduce){.izl-bb-switch span,.izl-bb-switch span::after{transition:none}}

/* 1.3.7: a hidden edit button really hides (all:unset above also resets display), errors in plain words */
[data-izl-edit] [hidden],.izl-edit-form [hidden]{display:none!important}
.izl-edit-error{flex-basis:100%;margin:0.375rem 0 0;padding:0.5rem 0.625rem;border-radius:0.5rem;background:#FBE3E3;color:#8A1F1F;font:500 max(13px,0.8125rem)/1.4 var(--izl-sans);letter-spacing:0;text-transform:none}
.izl-edit-form .izl-edit-input{font-size:max(13px,1.25rem)}

/* 1.3.8: the grey sample text also sits in the empty text box */
.izl-edit-form .izl-edit-input::placeholder{color:var(--izl-muted);opacity:.6;font-style:italic}

/* ------------------------------------------------------------------ 1.3.9: the buy box in clear, even blocks */
/* Blocks, 24px apart: admin strip (centred) · sales line · choose (question, tip, packs as 3 equal buttons, full width) ·
   the buy panel (price left + stock right, then quantity + cart button) · trust points 2×2 · questions. Every block is
   the same width, so both edges run straight down the column. */
.izl-admin-strip{display:flex;flex-direction:column;align-items:center;gap:0.375rem;margin:0 0 1.25rem;padding-bottom:0.875rem;border-bottom:1px dashed var(--izl-line);text-align:center}
.izl-admin-strip .izl-buybox-open{margin:0}
.izl-admin-strip .izl-admin-name{margin:0}
/* Codex "Edit card" sits above the card, centred over it (the card column), level with "Edit buy box". */
@media (min-width:768px){
  .single-product div.product>.fsz-editbar{float:left;width:41%;margin:0 0 0.75rem}
  .single-product div.product>.fsz-editbar+.fsz-wrap{clear:left}
}
.izl-sales-line{font-size:max(13px,1.625rem);margin:0 0 1.25rem}
.izl-pack-q{margin:0 0 0.25rem}
.izl-pack-tip{margin:0 0 0.75rem}
.single-product div.product form.variations_form table.variations,.single-product div.product form.variations_form table.variations tbody,.single-product div.product form.variations_form table.variations td{display:block;width:100%}
.izl-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0.625rem}
.izl-chip{height:2.75rem;justify-content:center;font-size:max(13px,0.9375rem)}
.single-product div.product form.variations_form:has(.izl-buy-head){margin:0 0 0.25rem}
.single-product div.product form.variations_form:has(.izl-buy-head) .single_variation_wrap{margin-top:1rem}
/* The buy panel */
.single-product div.product form.cart:has(.izl-buy-head):not(.variations_form),.single-product div.product form.variations_form:has(.izl-buy-head) .woocommerce-variation-add-to-cart{padding:1rem;gap:0.75rem}
.izl-buy-head{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 0.75rem;padding-bottom:0.75rem;border-bottom:1px solid var(--izl-line)}
.single-product div.product form.cart .izl-buy-head .izl-price-row{margin:0;flex-direction:column;align-items:flex-start;gap:2px} /* price over its VAT note, so the stock fits beside it */
.single-product div.product .izl-buy-head .izl-price-row p.price{font-size:max(13px,1.875rem)}
.izl-buy-head .izl-stock{margin:0;background:#fff}
.izl-buy-head .izl-stock.is-low,.izl-buy-head .izl-stock.is-back{background:#FFF1CC}
.izl-buy-head .izl-stock.is-out{background:#FBE3E3}
/* Trust points: an even 2×2 grid under a divider, the icons on one line per row. */
.izl-trust{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--izl-line);grid-auto-rows:1fr;gap:1rem 1.25rem}
.izl-faqs{margin-top:1.25rem;border-top:1px solid var(--izl-line)}

/* ------------------------------------------------------------------ 1.4.0: the buy panel as a ticket */
/* A white ticket: price on the left, stock as a tilted stamp on the right, shipping days and the live arrival date
   on dotted lines, then a torn line with two notches and the quantity + cart button under it. The notches are
   page-coloured circles sitting on the panel's edge (panel padding 16px + half the 22px circle = -27px). */
.single-product div.product form.cart:has(.izl-buy-head):not(.variations_form),.single-product div.product form.variations_form:has(.izl-buy-head) .woocommerce-variation-add-to-cart{position:relative;background:var(--izl-paper);border-radius:0.875rem;box-shadow:inset 0 0 0 2px var(--izl-ink),var(--izl-press);padding:1.125rem 1rem 1rem;margin-bottom:0.25rem}
.izl-buy-head{position:relative;align-items:flex-start;padding-bottom:1rem;border-bottom:2px dashed var(--izl-line)}
.izl-buy-head::before,.izl-buy-head::after{content:"";position:absolute;bottom:-0.75rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--izl-bg);box-shadow:inset 0 0 0 2px var(--izl-ink)}
.izl-buy-head::before{left:-1.6875rem;clip-path:inset(0 0 0 50%)}
.izl-buy-head::after{right:-1.6875rem;clip-path:inset(0 50% 0 0)}
/* Stock stamp (1.7.18): a rubber stamp, tilted, with a double frame in uneven ink (the SVG filter #izl-stock-ink from
   functions.php, on the frame only) and crisp heavy letters; colour by state (green in stock, amber few left / to
   order, red unavailable). */
.izl-buy-head .izl-stock{--izl-stamp:#1D7A46;--izl-stamp-ink:#17643A;position:relative;margin:0.5rem 4px 0 0;padding:0.625rem 0.9375rem 0.5625rem;border:0;border-radius:0.5rem;background:transparent;box-shadow:none;color:var(--izl-stamp-ink);font:800 max(16px,1.0625rem)/1 var(--izl-mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-6deg)}
.izl-buy-head .izl-stock::before{content:"";position:absolute;inset:0;border:3px solid var(--izl-stamp);border-radius:0.5rem;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--izl-stamp);filter:url(#izl-stock-ink);opacity:.92;pointer-events:none}
.izl-buy-head .izl-stock.is-low,.izl-buy-head .izl-stock.is-back{--izl-stamp:#9A6700;--izl-stamp-ink:#7A5300;background:transparent}
.izl-buy-head .izl-stock.is-out{--izl-stamp:#B42323;--izl-stamp-ink:#8A1F1F;background:transparent}
.izl-buy-head .izl-stock i{display:none}
.izl-buy-head .izl-stock b{position:relative;font-weight:800;text-shadow:0 0 .5px currentColor}
.izl-defs{position:absolute;width:0;height:0;overflow:hidden}
/* Ships / Arrives, label left, value right, a dotted leader between. */
.izl-ship-lines{flex:1 1 100%;display:grid;gap:0.25rem;margin-top:0.375rem;font:400 max(13px,0.9375rem)/1.4 var(--izl-mono);color:var(--izl-muted)}
.izl-ship-lines p{display:flex;align-items:baseline;gap:0.5rem;margin:0}
.izl-ship-lines p[hidden]{display:none}
.izl-ship-lines i{flex:1;min-width:1rem;border-bottom:1px dotted var(--izl-line)}
.izl-ship-lines b{color:var(--izl-ink);font-weight:700;text-align:right}
.izl-arrive b{color:#1D7A46}

/* ------------------------------------------------------------------ 1.5.0: fits every PC screen */
/* One scale for the whole shop on PC: the root size follows the screen, and every theme size is in rem, so the layout
   grows or shrinks as one piece. 1920×1080 (about 1920×945 inside the browser) = 16px, the size everything is drawn
   at; 2560×1440 ≈ 21px, 4K ≈ 32px. The smaller of width and height wins, so a short screen shrinks it too, but never
   under 11.2px (70%); text has its own floor of 13px (see max() in font sizes), so it stays readable. Phones and tablets keep 16px. */
@media (min-width:1024px){html{font-size:clamp(11.2px,min(.83333vw,1.6931vh),40px)}}
@media (min-width:1024px){
  /* A slimmer header and a tight top, so the first screen goes to the card and the buy box. */
  .site-header .col-full{min-height:4rem;padding-top:0.5rem;padding-bottom:0.5rem}
  .single-product .site-content{padding-top:0.5rem}
  .single-product .storefront-breadcrumb{margin-bottom:0.75rem}
  .single-product div.product{padding-top:1rem}
  /* The card fits the screen (Codex 1.37+): it keeps this much room under it for the "Related products" title (1.5.1:
     the title only, not the top of the tiles, so the card is bigger). Admins get their bars' room back (product.js). */
  .single-product .fsz-wrap.fsz-at-gallery{--fsz-fit-bottom:calc(6rem - var(--izl-admin-extra,0px));margin-bottom:1.5rem}
  .single-product div.product .summary{margin-bottom:1.5rem}
  /* Card and buy box side by side as one centred pair: the card column is exactly as wide as the card (it shrinks on
     short screens), so there is never a hole between them. Everything else (related products…) takes a full row. */
  .single-product div.product:has(>.fsz-wrap){display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:4.5rem}
  .single-product div.product:has(>.fsz-wrap)::before,.single-product div.product:has(>.fsz-wrap)::after{display:none}
  .single-product div.product:has(>.fsz-wrap)>*{flex:1 1 100%;float:none}
  .single-product div.product:has(>.fsz-wrap)>.fsz-wrap{flex:none;width:auto;margin:0 0 1.5rem}
  .single-product div.product:has(>.fsz-wrap)>.fsz-wrap .fsz-device{width:calc(440 * var(--fsz-u))}
  .single-product div.product:has(>.fsz-wrap)>.summary{flex:none;width:var(--izl-buy-w);padding-left:0;margin:0 0 1.5rem}
  .single-product div.product:has(>.fsz-wrap)>.fsz-editbar{width:auto;margin:0 0 0.5rem;text-align:center}
  .single-product .site-main{margin-bottom:0}
  .single-product .related.products>h2{margin-bottom:0.75rem}
  /* Trust points: the bold title only (the sentence is in the hover text), so the buy box is as tall as the card. */
  .single-product .izl-trust{margin-top:1.25rem;padding-top:1rem;grid-auto-rows:auto;gap:0.75rem 1.25rem}
  .single-product .izl-trust li{align-items:center}
  .single-product .izl-trust li>div>span{display:none}
  .single-product .izl-trust-icon{width:2.25rem;height:2.25rem}
  /* Admins: "Edit buy box" and the hidden name on one line. */
  .izl-admin-strip{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:0.375rem 0.875rem;margin-bottom:1rem;padding-bottom:0.75rem}
}
/* Short laptop screens (1366×768 and smaller): the text keeps its 13px floor, so the buy box packs a little tighter
   to stay as tall as the card. */
@media (min-width:1024px) and (max-height:700px){
  .single-product .izl-sales-line{font-size:max(13px,1.375rem);margin-bottom:0.75rem}
  .single-product .izl-trust{margin-top:0.625rem;padding-top:0.625rem;gap:0.375rem 1rem}
  .single-product .izl-pack-tip{margin-bottom:0.5rem}
  .single-product .izl-ship-lines{margin-top:0.25rem;gap:0.125rem}
  .single-product .izl-trust-icon{width:1.75rem;height:1.75rem}
  .single-product .izl-faqs{margin-top:0.875rem}
  .single-product .izl-faq summary{padding:0.5rem 0}
  .single-product div.product form.variations_form:has(.izl-buy-head) .single_variation_wrap{margin-top:0.75rem}
  /* 1.7.0: room for the free shipping line */
  .single-product .izl-setup{margin-top:0.625rem;padding-top:0.5rem;padding-bottom:0.25rem}
  .single-product .izl-setup li{padding:0.1875rem 0}
  .single-product .izl-setup-photo{width:2.25rem;height:2.25rem}
  .single-product a.izl-setup-add{width:2rem;height:2rem;font-size:1.25rem}
}
/* Admin toolbar (product.js moves it above the card and the buy box): Edit card · Edit buy box · hidden name. */
.izl-admin-strip.is-toolbar{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.375rem 0.875rem;max-width:none;margin:0 0 1.25rem;padding-bottom:0.625rem}
.izl-admin-strip.is-toolbar .fsz-editbar{float:none;width:auto;margin:0;padding:0}
.izl-admin-strip.is-toolbar .edit-link{margin:0;font-size:max(13px,0.875rem)}
.single-product div.product:has(>.izl-admin-strip.is-toolbar){padding-top:0}
.izl-admin-strip.is-toolbar{margin-bottom:0.875rem;padding-bottom:0.5rem}

/* ------------------------------------------------------------------ 1.5.1: more questions, same height */
/* The first 2 questions show; the rest open from one "More questions (N)" row, so the buy box keeps its height
   (IZL_FAQ_SHOWN in functions.php). */
.izl-faq-more>summary{cursor:pointer;padding:0.75rem 0;list-style:none;display:flex;align-items:center;gap:0.5rem;font:700 max(13px,0.875rem) var(--izl-mono);color:var(--izl-teal-dark);border-bottom:1px solid var(--izl-line)}
.izl-faq-more>summary::-webkit-details-marker{display:none}
.izl-faq-more>summary::after{content:"";width:0.4375rem;height:0.4375rem;margin-top:-0.1875rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.izl-faq-more[open]>summary::after{transform:rotate(225deg);margin-top:0.1875rem}
.izl-faq-more>summary:hover{color:var(--izl-ink)}
@media (min-width:1024px) and (max-height:700px){.single-product .izl-faq-more>summary{padding:0.5rem 0}}

/* ------------------------------------------------------------------ 1.6.0: supplies in the buy box, slim trust line */
/* "Goes well with": a white card under the cart button; each supply on one row: photo, name, price, yellow "+". */
.izl-setup{margin:1rem 0 0;padding:0.75rem 1rem 0.5rem;border-radius:0.875rem;background:var(--izl-paper);box-shadow:inset 0 0 0 2px var(--izl-line)}
.izl-setup-title{margin:0 0 0.25rem;font:700 max(13px,0.8125rem) var(--izl-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--izl-teal-dark)}
.izl-setup ul{list-style:none;margin:0;padding:0}
.izl-setup li{display:flex;align-items:center;gap:0.75rem;margin:0;padding:0.4375rem 0}
.izl-setup li+li{border-top:1px dashed var(--izl-line)}
.izl-setup-photo{flex:none;display:block;width:2.75rem;height:2.75rem;border-radius:0.5rem;overflow:hidden;background:var(--izl-panel)}
.izl-setup-photo img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.izl-setup-name{flex:1;min-width:0;color:var(--izl-ink);text-decoration:none;font:600 max(15px,1.0625rem)/1.25 var(--izl-sans)}
.izl-setup-name:hover{color:var(--izl-teal-dark)}
.izl-setup-price{flex:none;font:700 max(13px,0.9375rem) var(--izl-mono);color:var(--izl-ink)}
.izl-setup-price del{opacity:.5;font-size:.8em;margin-right:0.25rem}
.izl-setup-price ins{text-decoration:none}
a.izl-setup-add{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;margin:0;padding:0;border:2px solid var(--izl-ink);border-radius:0.5rem;background:var(--izl-yellow);box-shadow:0 0.1875rem 0 var(--izl-ink);color:var(--izl-ink);font:700 1.375rem/1 var(--izl-mono);text-decoration:none;transition:transform .1s,box-shadow .1s}
a.izl-setup-add:hover{color:var(--izl-ink);transform:translateY(-1px);box-shadow:0 0.25rem 0 var(--izl-ink)}
a.izl-setup-add:active{transform:translateY(0.1875rem);box-shadow:none}
a.izl-setup-add.loading{opacity:.6;pointer-events:none}
a.izl-setup-add.loading::after{display:none}
a.izl-setup-add.added{background:#DFF3E6;border-color:#1D7A46;box-shadow:0 0.1875rem 0 #1D7A46}
a.izl-setup-add.added span{display:none}
a.izl-setup-add.added::after{content:"✓";position:static;margin:0;font:700 1.25rem/1 var(--izl-sans);color:#1D7A46}
.izl-setup .added_to_cart{display:none} /* WooCommerce's "View cart" link: the tick and the header cart say it */
/* Trust points (Codex products): one slim line under the card and the buy box, icon bubbles + titles, the sentence on hover. */
.izl-codex-product div.product>.izl-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem 2.75rem;margin:0 0 2rem;padding:0.875rem 0;border-top:1px solid var(--izl-line);border-bottom:1px solid var(--izl-line)}
.izl-codex-product div.product>.izl-trust li{align-items:center;gap:0.625rem}
.izl-codex-product div.product>.izl-trust li>div>span{display:none}
.izl-codex-product div.product>.izl-trust .izl-trust-icon{width:2.25rem;height:2.25rem}
/* Common questions: under the trust line, all of them, in two columns. */
.izl-codex-product div.product>.izl-faqs{margin:0 0 2.5rem;border-top:0}
.izl-faqs>h2{margin:0 0 0.5rem;font:700 max(13px,1.375rem) var(--izl-mono)}
.izl-faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}
.izl-faq-cols>div{border-top:1px solid var(--izl-line)}
@media (max-width:767px){.izl-faq-cols{grid-template-columns:minmax(0,1fr)}.izl-faq-cols>div+div{border-top:0}}
/* The small-tile row under every product page (1.7.0; species: "Similar species"): 6 in a row, the whole tile is the link (no buttons). */
.single-product .related.products>h2,.single-product .related.products>h2:first-child{font-size:max(13px,1.375rem);margin-bottom:0.875rem;text-align:left}
.single-product .related.products ul.products{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.125rem}
@media (max-width:1100px){.single-product .related.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.single-product .related.products .izl-tile{padding:0.5rem;border-radius:0.875rem 0.875rem 0.875rem 1.75rem;box-shadow:0.25rem 0.25rem 0 var(--izl-tile-dark)}
.single-product .related.products .izl-tile-body{margin-top:0.5rem;padding:0.625rem 0.625rem 0.75rem}
.single-product .related.products ul.products li.product .izl-tile-name{font-size:max(13px,0.8125rem)}
.single-product .related.products .izl-tile-meta{margin:0.375rem 0 0}
.single-product .related.products ul.products li.product .izl-tile-meta .price{font-size:max(13px,0.875rem)}
.single-product .related.products .izl-tile-btns{display:none}
.single-product .related.products .izl-num{transform:scale(.85);transform-origin:top left}
.single-product .related.products .izl-tile-name a::after{content:"";position:absolute;inset:0;z-index:1}

/* ------------------------------------------------------------------ 1.7.0: supply pages, shipping, the product row */
/* Supplies: the sales line stands a little in from the name, behind a teal bar, in teal, so it reads as the reason to
   buy and not as a second title. */
.single-product:not(.izl-codex-product) .izl-sales-line{margin:0.625rem 0 1.125rem 0.25rem;padding:0.125rem 0 0.125rem 1rem;border-left:0.25rem solid var(--izl-teal);color:var(--izl-teal)}
/* Supplies: the description under the buy box, as wide as the buy box, the text size of the old tab. */
.izl-desc{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--izl-line)}
.izl-desc>h2{margin:0 0 0.625rem;font:700 max(13px,1.125rem) var(--izl-mono)}
.izl-desc-text{font-size:max(13px,1rem);line-height:1.6}
.izl-desc-text>:last-child{margin-bottom:0}
.izl-desc .woocommerce-product-attributes{margin:1rem 0 0;font-size:max(13px,0.875rem)}
/* Supplies: categories and tags as pills under the photo. */
.single-product div.product .izl-terms{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 2rem}
@media (min-width:768px){
  .single-product div.product .izl-terms{float:left;clear:left;width:39.1304347826%;margin-right:0} /* the photo column (Storefront) */
  .single-product div.product:has(>.izl-terms) .woocommerce-product-gallery{margin-bottom:1.25rem}
}
.izl-term{display:inline-flex;align-items:center;padding:0.3125rem 0.75rem;border-radius:62.4375rem;font:600 max(13px,0.8125rem)/1.2 var(--izl-mono);text-decoration:none;color:var(--izl-teal-dark);background:#fff;box-shadow:inset 0 0 0 2px var(--izl-teal)}
.izl-term.is-tag{font-weight:500;color:var(--izl-muted);background:transparent;box-shadow:inset 0 0 0 1px var(--izl-line)}
.izl-term:hover,.izl-term:focus-visible{color:#fff;background:var(--izl-teal);box-shadow:inset 0 0 0 2px var(--izl-teal)}
.single-product div.product .related.products{clear:both}
/* The buy ticket: free shipping over the amount (Customize → Ízeltláb product page). */
/* 1.7.12: a centred mint badge, so it reads as a perk. */
.izl-ship-lines p.izl-free-ship{display:block;justify-self:center;text-align:center;line-height:1.625rem;margin-top:0.5rem;padding:0.3125rem 1rem 0.3125rem 0.3125rem;border-radius:62.4375rem;background:var(--izl-panel);box-shadow:inset 0 0 0 1.5px var(--izl-line);font-weight:600;color:var(--izl-teal-dark)}
.izl-free-ship .izl-trust-icon{display:inline-grid;vertical-align:middle;margin:-0.125rem 0.5rem 0 0;background:#fff}
@media (max-width:1023px){.izl-ship-lines{font-size:max(13px,0.8125rem)}}
.single-product .izl-free-ship .izl-trust-icon{width:1.625rem;height:1.625rem;border-radius:62.4375rem}
.single-product .izl-free-ship .izl-trust-icon svg{width:1rem;height:1rem}
.izl-free-ship .woocommerce-Price-amount{color:var(--izl-ink)}
/* Buy box editor: live animal / normal product, and the row title. */
.izl-bb-ship{display:grid;gap:0.5rem}
.izl-bb-radio{display:flex;align-items:flex-start;gap:0.625rem;padding:0.5rem 0.75rem;border:2px solid var(--izl-line);border-radius:0.5rem;cursor:pointer;font-size:max(13px,0.875rem)}
.izl-bb-radio:has(input:checked){border-color:var(--izl-ink);background:var(--izl-yellow)}
.izl-bb-radio input{margin:0.25rem 0 0}
.izl-bb-radio b{display:block}
.izl-bb-text{width:100%;box-sizing:border-box;padding:0.5rem 0.625rem;border:2px solid var(--izl-line);border-radius:0.5rem;font:500 max(13px,0.9375rem) var(--izl-sans);color:var(--izl-ink);background:#fff}
.izl-bb-text:focus{border-color:var(--izl-teal);outline:0}

/* ------------------------------------------------------------------ 1.7.1: front page */
/* Back cards on hover (1.7.5): the card floats up a little (height: Edit cards → Float height = --izl-fx, 0-1). It stays a
   background card, dimmed and a little blurred, only less. The float moves .fsz-wrap; never a filter on .fsz-device (it
   would flatten the card's 3D sides). The slot is never 3D itself; carousel.js sets its resting filter inline, so the
   eased one needs !important. While the panel is open the back cards show it (is-fx-demo). */
.izl-slot:not(.is-front):hover,.izl-carousel.is-fx-demo .izl-slot:not(.is-front){filter:brightness(.68) saturate(.7) blur(.9px)!important;transition:filter .3s ease}
.izl-slot .fsz-wrap{transition:transform .3s ease}
.izl-slot:not(.is-front):hover .fsz-wrap,.izl-carousel.is-fx-demo .izl-slot:not(.is-front) .fsz-wrap{transform:translateY(calc(var(--izl-fx) * -1rem)) scale(calc(1 + var(--izl-fx) * .05))}
@media (prefers-reduced-motion:reduce){.izl-slot .fsz-wrap{transition:none}}
/* 1.7.9-1.7.10: the front page cards have a mirrored resting turn (functions.php: they face the headline). Codex sizes
   its fake resting side (right and bottom, --fsz-kx/--fsz-ky) for its own turn direction and moves it with every bit
   of mouse tilt (up to 19px). Mirrored, that doubled it at rest (the card looked fat) and made it overshoot the real 3D
   side on small mouse moves. Here it stays at its resting size (--izl-kx/--izl-ky from functions.php, under 1px
   sideways), so only the real 3D turn moves the side, in step with the front. Same transform as codex.css otherwise. */
.izl-hero-card .fsz-device.has-depth>.fsz-slice{transform:translate(calc(var(--fsz-ox,0px) * var(--izl-kx,1) * var(--i)),calc(var(--fsz-oy,0px) * var(--izl-ky,1) * var(--i))) translateZ(var(--z)) scale(var(--s))}
/* Speed (1.7.5): scrolled out of view, the cards' idle drift stops (carousel.js sets .is-away). */
.izl-carousel.is-away .fsz-device{animation-play-state:paused}
/* The Firefox engine only (1.7.7-1.7.8; html.izl-gecko from functions.php and carousel.js): Firefox and LibreWolf
   lagged and flashed white boxes on the 3D cards. Chromium browsers never get the class, so nothing here touches them.
   Back cards: dimmed but never blurred (carousel.js and the hover rule here), and no drift. */
.izl-gecko .izl-slot{will-change:transform}
.izl-gecko .izl-slot:not(.is-front):hover,.izl-gecko .izl-carousel.is-fx-demo .izl-slot:not(.is-front){filter:brightness(.68) saturate(.7)!important}
.izl-gecko .izl-slot:not(.is-front) .fsz-device{animation-play-state:paused}
/* No drift on any card during a turn (1.3 s; carousel.js .is-turning), so the changing dim is not redrawn under a moving card. */
.izl-gecko .izl-carousel.is-turning .fsz-device{animation-play-state:paused}
/* Every Codex card (front page and product page, 1.7.8): the 24 side slices are shaded with a colour instead of a filter
   each (Codex sets brightness 1.08 - 0.014 x slice number; the same colour maths, with an older-Firefox fallback, no filters
   in the 3D card),
   and while the mouse tilts the card the slices follow at once, instead of restarting 24 transitions on every move. */
.izl-gecko .fsz-device.has-depth .fsz-slice{--izl-b:calc(1.08 - var(--i) * .014);filter:none!important;background:color-mix(in srgb,color-mix(in srgb,var(--fsz-edge),#fff clamp(0%,calc(8% - var(--i) * 1.4%),100%)),#000 clamp(0%,calc(var(--i) * 1.4% - 8%),100%));background:rgb(from var(--fsz-edge) calc(r * var(--izl-b)) calc(g * var(--izl-b)) calc(b * var(--izl-b)))}
.izl-gecko .fsz-device.is-tilting .fsz-slice{transition:none!important}
/* The panel: the float height slider. */
.izl-edit-fx{margin:1rem 0 0;padding:0.875rem 0 0;border:0;border-top:1px solid var(--izl-line);background:none}
.izl-edit-fx legend{float:left;width:100%;margin:0 0 0.5rem;padding:0;background:none;font-weight:600;font-size:max(13px,0.875rem)}
/* The panel sits on the left (over the title, not the cards) on wide screens, with a light backdrop, so the effect on the
   cards stays visible while it is chosen. */
@media (min-width:961px){.izl-edit[open]{margin:auto auto auto max(1rem,calc(50% - 38.75rem))}.izl-edit::backdrop{background:rgba(23,48,46,.15)}}
.izl-edit-fx-range{display:block;margin:0.75rem 0 0;font-size:max(13px,0.875rem);font-weight:600}
.izl-edit-fx-range output{font:700 max(13px,0.875rem) var(--izl-mono);color:var(--izl-teal-dark)}
.izl-edit-fx-range input{display:block;width:100%;margin-top:0.25rem;accent-color:var(--izl-teal)}
/* "All products": a small button next to "Newest isopods". */
.izl-section-head a.izl-section-link.is-btn{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.875rem;border:2px solid var(--izl-ink);border-radius:62.4375rem;background:#fff;color:var(--izl-ink);font:700 max(13px,0.8125rem)/1.2 var(--izl-sans);box-shadow:0 0.1875rem 0 var(--izl-ink);text-decoration:none;transition:transform .08s ease,box-shadow .08s ease}
.izl-section-head a.izl-section-link.is-btn:hover,.izl-section-head a.izl-section-link.is-btn:focus-visible{transform:translateY(-1px);box-shadow:0 0.25rem 0 var(--izl-ink);text-decoration:none}
.izl-section-head a.izl-section-link.is-btn:active{transform:translateY(0.1875rem);box-shadow:none}
/* The isopod on the "Isopods" button (1.7.6): after the text, rolled up into a ball. Pointed at, the ball rolls open
   into the isopod seen from above, facing right, and it walks in place (legs step in two alternating sets, antennae
   twitch) while the mouse stays; it rolls up again after. Without a mouse (phones): open and still. */
.izl-bug{flex:none;width:2.5em;height:2em;margin:-0.625em -0.375em -0.625em -0.25em;overflow:visible}
.izl-bug-body,.izl-bug-head,.izl-bug-ball circle{fill:currentColor}
.izl-bug-band{fill:none;stroke:var(--izl-yellow);stroke-width:.6;stroke-linecap:round}
.izl-bug-head{stroke:var(--izl-yellow);stroke-width:.6}
.izl-bug-line,.izl-bug-leg{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.izl-bug-leg{stroke-width:.9;transform-box:fill-box}
.izl-bug-leg.is-top{transform-origin:100% 100%}
.izl-bug-leg.is-bottom{transform-origin:100% 0}
.izl-bug-walk,.izl-bug-ball{transform-box:view-box;transform-origin:14px 12px}
.izl-bug-walk{opacity:0;transform:scale(.45,.8) rotate(-90deg);transition:opacity .2s ease,transform .35s ease}
.izl-bug-ball{transform:rotate(-20deg);transition:opacity .2s ease .12s,transform .4s ease}
.has-bug:hover .izl-bug-walk,.has-bug:focus-visible .izl-bug-walk{opacity:1;transform:none;transition:opacity .2s ease .1s,transform .4s cubic-bezier(.3,1.3,.5,1) .05s}
.has-bug:hover .izl-bug-ball,.has-bug:focus-visible .izl-bug-ball{opacity:0;transform:rotate(200deg) scale(.7);transition:opacity .2s ease .1s,transform .35s ease}
.has-bug:hover .izl-bug-leg,.has-bug:focus-visible .izl-bug-leg{animation:izl-step .36s ease-in-out .4s infinite alternate}
.has-bug:hover .izl-bug-leg.is-b,.has-bug:focus-visible .izl-bug-leg.is-b{animation-delay:.04s}
.has-bug:hover .izl-bug-line,.has-bug:focus-visible .izl-bug-line{animation:izl-feel .72s ease-in-out .4s infinite alternate}
@keyframes izl-step{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes izl-feel{to{transform:translateY(-.4px)}}
@media (hover:none){.izl-bug-walk{opacity:1;transform:none}.izl-bug-ball{display:none}.has-bug .izl-bug-leg,.has-bug .izl-bug-line{animation:none!important}}
@media (prefers-reduced-motion:reduce){.has-bug:hover .izl-bug-leg,.has-bug:hover .izl-bug-line{animation:none}.izl-bug-walk,.izl-bug-ball{transition:none}}

/* ------------------------------------------------------------------ 1.7.2: the front card is a link to its page */
.izl-hero-card .izl-slot.is-front .izl-card-link,.izl-hero-single .izl-card-link,.izl-hero-card .is-front .izl-card-link .fsz-slides{cursor:pointer}
.izl-card-link:focus-visible{outline:0.1875rem solid var(--izl-yellow);outline-offset:0.25rem}

/* 1.7.15: adding products from the shop (admins only). "New product" over the tiles, the draft bar over a draft page. */
.izl-newbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 1rem;margin:0 0 1.25rem;padding:0.75rem 1rem;border:2px dashed var(--izl-line);border-radius:0.75rem;font-size:max(13px,0.875rem)}
.izl-admin-form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin:0}
.izl-newbar select{min-height:2.375rem;padding:0.375rem 0.75rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff;color:var(--izl-ink);font:600 max(13px,0.875rem) var(--izl-sans)}
.izl-new-btn{padding:0.5rem 1.125rem}
.izl-draftbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1rem;margin:0 0 1.25rem;padding:0.875rem 1.125rem;border-radius:0.75rem;background:var(--izl-yellow);color:var(--izl-ink);box-shadow:0 0.25rem 0 var(--izl-ink)}
.izl-draftbar-text{flex:1 1 20rem;margin:0;font-size:max(13px,0.9375rem)}
.izl-draftbar-text b{margin-right:0.375rem;text-transform:uppercase;letter-spacing:1px}
.izl-draftbar-name{display:inline-flex;align-items:center;gap:0.5rem;font-weight:700}
.izl-draftbar-name input{min-width:14rem;min-height:2.375rem;padding:0.375rem 0.75rem;border:2px solid var(--izl-ink);border-radius:0.625rem;background:#fff;font:600 max(13px,0.9375rem) var(--izl-sans)}

/* ------------------------------------------------------------------ 1.7.17 "added to cart" stamp
   product.js presses it onto the right edge of the ticket after Kosárba: it lands (0.3 s), the ticket gives a little
   thump, the stamp holds 5 s and fades out in 3 s. Multiply blend, so the ink sits in the paper. */
.izl-stamp{position:absolute;z-index:20;width:156px;height:156px;right:-30px;top:100px;pointer-events:none;opacity:0;mix-blend-mode:multiply} /* 1.7.18: lower, so it misses the arrival date */
.izl-stamp svg{display:block;width:100%;height:100%}
.izl-stamp.is-on{animation:izl-stamp-land .3s cubic-bezier(.2,.9,.3,1) forwards,izl-stamp-hold 8.3s linear forwards}
@keyframes izl-stamp-land{0%{transform:scale(1.5)}70%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes izl-stamp-hold{0%{opacity:0}2%{opacity:.95}63.9%{opacity:.95}100%{opacity:0}}
.single-product div.product form.cart.is-stamped,.single-product div.product .woocommerce-variation-add-to-cart.is-stamped{animation:izl-thump .28s ease-out .18s}
@keyframes izl-thump{0%,100%{transform:none}30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}
/* Phones: a little smaller and inside the screen edge (no sideways scrolling). */
@media (max-width:767px){.izl-stamp{width:136px;height:136px;right:-6px;top:auto;bottom:128px}} /* 1.7.18: over the free shipping line, clear of the dates */
@media (prefers-reduced-motion:reduce){.izl-stamp.is-on{animation:izl-stamp-hold 8.3s linear forwards}.single-product div.product .is-stamped{animation:none}}

/* ------------------------------------------------------------------ 1.7.18 buy ticket
   Price: one big number with "Ft" stacked over a small note (pack · 27% áfával), clear but quieter than the button.
   Ship lines: "Nálad lesznek … kedden, nov. 3." first, big and green; "Útra kelnek … ma" under it, the day word ending
   where the date ends; the order-by nudge on one centred row. Button "Kosárba vele!" bigger, the − 1 + as tall. */
.izl-price-row.is-px p.price,.izl-price-row.is-px .izl-price-note{display:none}
.izl-px{display:flex;align-items:center;gap:0.375rem}
.izl-px-num{font:700 max(13px,2.625rem)/1 var(--izl-mono);letter-spacing:-.04em;color:var(--izl-ink);white-space:nowrap}
.izl-px-side{display:flex;flex-direction:column;gap:0.25rem;padding-top:0.125rem}
.izl-px-cur{font:800 max(13px,1.25rem)/1 var(--izl-mono);color:var(--izl-ink)}
.izl-px-note{font:600 max(11px,0.6875rem)/1 var(--izl-sans);color:var(--izl-muted);white-space:nowrap}
.izl-ship-lines{font-weight:600;color:#2E4A47}
.izl-ship-lines p.izl-arrive{font-size:max(15px,1.0625rem)}
.izl-ship-lines p.izl-arrive span,.izl-ship-lines p.izl-arrive b{color:#1D7A46;font-weight:800}
.izl-ship-lines p.izl-arrive i{border-bottom-color:#7FBF98}
.izl-ship-lines p.izl-leaves b{font-weight:700}
.izl-ship-lines p.izl-nudge{display:flex;align-items:center;justify-content:center;gap:0.5rem;margin:0.375rem 0 0;padding:0.375rem 0.625rem;border-radius:0.5rem;background:#FFF4CC;box-shadow:inset 0 0 0 1.5px #E9C75A;color:#5C4300;font:600 max(13px,0.875rem)/1.3 var(--izl-sans);white-space:nowrap}
.izl-nudge svg{flex:none;width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.izl-ship-lines p.izl-nudge[hidden],.izl-ship-lines.is-sold-out p.izl-nudge{display:none}
@media (max-width:479px){.izl-ship-lines p.izl-nudge{white-space:normal;text-align:center}.izl-ship-lines p.izl-arrive{font-size:max(13px,0.9375rem)}.izl-ship-lines p.izl-when span,.izl-ship-lines p.izl-when b{white-space:nowrap}}
.single-product div.product form.cart .single_add_to_cart_button{flex:1 1 0;width:auto;max-width:none;height:3.25rem;font-size:max(15px,1.25rem);font-weight:800;letter-spacing:.01em}
.single-product div.product form.cart :is(.izl-qty,.quantity:has(>.izl-qty-btn)){height:3.25rem}
.single-product div.product form.cart :is(.izl-qty,.quantity:has(>.izl-qty-btn)) input.qty{font-size:max(15px,1.125rem)}
.izl-qty-btn{width:2.375rem;font-size:max(15px,1.25rem)}
.single-product div.product form.cart .single_add_to_cart_button.is-busy{opacity:.75;cursor:progress}
/* Species: the packs set the amount, so no − 1 + and the button takes the whole row (supplies keep it). */
.izl-species.single-product div.product .summary form.cart .quantity{display:none!important} /* !important: WooCommerce shows it again with an inline style when a pack is chosen */
/* Free shipping progress under the button, after an add to cart (product.js). */
.izl-prog{flex:1 1 100%;margin:0.25rem 0 0;font:700 max(13px,0.875rem)/1.3 var(--izl-sans);color:var(--izl-teal-dark);text-align:center}
.izl-prog[hidden]{display:none}
.izl-prog-bar{display:block;height:0.5rem;margin-top:0.375rem;border-radius:99px;background:var(--izl-panel);box-shadow:inset 0 0 0 1.5px var(--izl-line);overflow:hidden}
.izl-prog-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--izl-yellow);box-shadow:inset 0 0 0 1.5px var(--izl-ink);transition:width .8s cubic-bezier(.3,1,.5,1)}
.izl-prog.is-done{color:#1D7A46}
.izl-prog.is-done .izl-prog-bar i{background:#6CCB5F}
/* Tedd mellé +: the photo flying to the cart, and the cart answering any add. */
.izl-fly{position:fixed;z-index:99999;margin:0;border-radius:50%;object-fit:cover;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.3);border:2px solid #fff}
.izl-cart.is-bump{animation:izl-bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes izl-bump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.izl-cart-count.is-pop{animation:izl-pop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes izl-pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.izl-cart.is-bump,.izl-cart-count.is-pop{animation:none}.izl-prog-bar i{transition:none}}

/* ===================================================================== 1.7.19 */

/* Logo (every page): "ízeltláb" in Space Mono Bold, white, with one segment of the 8-part line under each letter
   (yellow and white in turn, the two end ones shorter). */
.site-header .izl-logo a{display:inline-block;color:#fff;text-decoration:none}
.site-header .izl-logo .izl-logo-t{display:block;font:700 max(13px,1.75rem)/1 'Izeltlab Logo','Space Mono',var(--izl-mono);letter-spacing:0;white-space:nowrap}
.izl-logo-seg{display:grid;grid-template-columns:repeat(8,1fr);height:max(4px,.3125rem);margin-top:max(4px,.3125rem)}
.izl-logo-seg b{display:block;justify-self:center;width:78%;border-radius:2px 2px 3px 3px;background:var(--izl-yellow)}
.izl-logo-seg b:nth-child(odd){background:#e9f6f2}
.izl-logo-seg b:first-child,.izl-logo-seg b:last-child{width:52%}
.woocommerce-breadcrumb .izl-crumb-home{display:contents}

/* Tedd mellé: each row has its group's colour strip and name (functions.php izl_setup_group); the empty places only
   whoever runs the shop sees. */
.izl-setup li{--izl-c:#8aa39b}
.izl-setup-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.izl-setup-group{font:700 max(11px,0.6875rem)/1 var(--izl-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--izl-c)}
.izl-setup li.izl-setup-empty{display:flex;align-items:center;gap:0.625rem;border:2px dashed var(--izl-line);border-radius:0.75rem;padding:0.375rem 0.75rem;min-height:2.875rem;background:none;color:var(--izl-muted);font:max(13px,0.8125rem)/1.3 var(--izl-sans)}
.izl-setup li.izl-setup-empty b{font:700 max(12px,0.75rem) var(--izl-mono);letter-spacing:.06em;color:var(--izl-teal);text-transform:uppercase;white-space:nowrap}

/* Free shipping reached: the tick pops, the bar glows, a few crumbs fly off it (product.js celebrate()). */
.izl-prog{position:relative}
.izl-prog-ck{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#1d7a45;color:#fff;font:700 10px/1 var(--izl-sans);margin-right:6px;vertical-align:-2px;position:relative}
.izl-prog-ck::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1d7a45;opacity:0}
.izl-prog-ck.is-go{animation:izl-ck-pop .42s cubic-bezier(.3,1.5,.5,1)}
.izl-prog-ck.is-go::after{animation:izl-ck-ring .7s ease-out .15s}
@keyframes izl-ck-pop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes izl-ck-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.izl-prog-bar.is-glow{animation:izl-glow-bar 1.1s ease-out}
.izl-prog.is-bump .izl-prog-t{display:inline-block;animation:izl-bump-t .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes izl-glow-bar{0%,100%{box-shadow:inset 0 0 0 1.5px var(--izl-line),0 0 0 0 rgba(63,179,122,0)}30%{box-shadow:inset 0 0 0 1.5px var(--izl-line),0 0 0 3px rgba(63,179,122,.35),0 0 12px 2px rgba(63,179,122,.45)}}
@keyframes izl-bump-t{40%{transform:scale(1.05)}}
.izl-prog-fx{position:absolute;inset:0;pointer-events:none}
.izl-prog-fx span{position:absolute;width:5px;height:5px;border-radius:1px}
@media (prefers-reduced-motion:reduce){.izl-prog-bar.is-glow,.izl-prog.is-bump .izl-prog-t,.izl-prog-ck.is-go,.izl-prog-ck.is-go::after{animation:none}}

/* ------------------------------------------------------------------ 1.7.19: the phone product page ("Alsó fiók")
   Phones, Codex product pages: one screen. The slim top bar, the card in between (Codex sizes it: codex.php screen
   fit), and the bottom drawer with the buy box (product.js phone()). The closed drawer is about 144px. */
@media (max-width:767px){
body.izl-codex-product{--izl-sage:#DCE8E0;--izl-mint:#E9F1EC;--izl-strip:#164f4e;--izl-ab:0px;background:var(--izl-sage);overflow:hidden;height:100%;overscroll-behavior:none}
html:has(body.izl-codex-product){overflow:hidden;height:100%}
body.izl-codex-product.admin-bar{--izl-ab:46px}
body.izl-codex-product .site-footer,body.izl-codex-product .storefront-handheld-footer-bar,body.izl-codex-product .izl-nav,body.izl-codex-product .woocommerce-tabs,body.izl-codex-product .woocommerce-notices-wrapper:empty{display:none!important}
body.izl-codex-product .site-content,body.izl-codex-product .site-main,body.izl-codex-product .content-area{margin:0;padding:0}
/* the slim top bar: logo and the three buttons, the breadcrumb strip under it */
body.izl-codex-product .site-header{position:fixed;top:var(--izl-ab);left:0;right:0;z-index:20;margin:0;border:0;padding:0 0 0 env(safe-area-inset-left,0px)}
body.izl-codex-product .site-header .col-full{min-height:0;height:44px;padding:10px 14px 5px;gap:0;flex-wrap:nowrap;box-sizing:border-box}
body.izl-codex-product .site-header .site-branding{padding:0}
body.izl-codex-product .site-header .izl-logo .izl-logo-t{font-size:22px}
body.izl-codex-product .izl-logo-seg{height:4px;margin-top:4px}
body.izl-codex-product .izl-icons{gap:6px}
body.izl-codex-product .izl-icon{width:34px;height:34px;border-radius:8px}
body.izl-codex-product .izl-icon svg{width:17px;height:17px;stroke-width:2.4}
body.izl-codex-product .storefront-breadcrumb{position:fixed;top:calc(var(--izl-ab) + 44px);left:0;right:0;z-index:20;margin:0;background:var(--izl-strip);box-shadow:none;border-bottom:2px solid #0e3534}
body.izl-codex-product .storefront-breadcrumb .col-full{padding:0 14px}
body.izl-codex-product .woocommerce-breadcrumb{min-height:0;padding:4px 0;font-size:10.5px;letter-spacing:1.4px;gap:2px;color:#cfe3de}
body.izl-codex-product .woocommerce-breadcrumb a,body.izl-codex-product .woocommerce-breadcrumb .is-last{min-height:0;padding:0 4px}
body.izl-codex-product .woocommerce-breadcrumb .izl-crumb-sep{font-size:1.3em}
body.izl-codex-product .woocommerce-breadcrumb .izl-crumb-home{display:none} /* the logo goes home */

/* the card, fixed between the bars (Codex sets --fsz-fit-y and --fsz-fit-w), its soft ground shadow behind it */
body.izl-codex-product .fsz-wrap.fsz-at-gallery{--fsz-fit-mode:screen;--fsz-fit-top:calc(var(--izl-ab) + 68px);--fsz-fit-bottom:144px;position:fixed;z-index:1;top:var(--fsz-fit-y,90px);left:calc(50% + 9px);width:var(--fsz-fit-w,calc(100vw - 46px));max-width:none;margin:0;float:none;transform:translateX(-50%)}
body.izl-codex-product .fsz-wrap.fsz-at-gallery::before{content:"";position:absolute;inset:4% 3% 3% 5%;border-radius:22px 22px 22px 56px;box-shadow:0 22px 34px rgba(23,50,46,.30),0 5px 10px rgba(23,50,46,.20);z-index:-1;pointer-events:none}
/* big phones with spare room: the leaf litter (Avar) behind the card, fading into sage under the top bar */
body.izl-codex-product::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url(assets/avar.svg) center/cover no-repeat;opacity:0;transition:opacity .6s;-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--izl-top,81px) - 10px),#000 calc(var(--izl-top,81px) + 110px));mask-image:linear-gradient(180deg,transparent calc(var(--izl-top,81px) - 10px),#000 calc(var(--izl-top,81px) + 110px))}
body.izl-codex-product.izl-roomy::before{opacity:1}
/* 2.0.5: not drawn at all where it does not show (desktop: a full-screen layer less); phones keep it (below) */
body.izl-codex-product::before{visibility:hidden;transition:opacity .6s,visibility 0s linear .6s}
body.izl-codex-product.izl-roomy::before{visibility:visible;transition:opacity .6s}

/* the drawer (the summary itself) */
body.izl-codex-product .summary.entry-summary{position:fixed;left:0;right:0;bottom:0;z-index:10;width:auto;float:none;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);height:144px;box-sizing:border-box;background:var(--izl-mint);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;transition:height .35s cubic-bezier(.2,.8,.2,1)}
body.izl-codex-product:not(.izl-phone) .summary.entry-summary>*{visibility:hidden}
body.izl-codex-product .summary.is-drag{transition:none}
.izl-grab{all:unset;flex:none;position:relative;display:grid;place-items:center;height:18px;width:100%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.izl-grab::before{content:"";width:56px;height:6px;border-radius:3px;background:#7fa497}
.izl-grab::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-4px}
.izl-grab:focus-visible::before{outline:3px solid var(--izl-teal);outline-offset:3px}
.izl-grab:active{cursor:grabbing}
.izl-dscroll{flex:1;min-height:0;overflow-y:auto;padding:0 12px 26px;overscroll-behavior:contain;scrollbar-width:none}
.izl-dscroll::-webkit-scrollbar{display:none}
body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dscroll{overflow:hidden}
body.izl-phone:not(.izl-open):not(.izl-sd) .summary:not(.is-drag) .izl-dscroll{display:flex;flex-direction:column;justify-content:flex-end}
body.izl-phone:not(.izl-open):not(.izl-sd) .summary:not(.is-drag) .izl-dmore{position:absolute;left:12px;right:12px;bottom:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.izl-dim{position:fixed;inset:0;z-index:9;background:rgba(5,30,29,.5);opacity:0;pointer-events:none;transition:opacity .3s}
body.izl-open .izl-dim{opacity:1;pointer-events:auto}
/* the name: open drawer only */
.izl-dname{overflow:hidden;max-height:0;opacity:0;margin:0 2px;transition:max-height .35s,opacity .3s,margin .35s}
body.izl-open .izl-dname{max-height:90px;opacity:1;margin:2px 2px 14px}
.summary.is-drag .izl-dname{transition:none}
.izl-dname-h{font:700 31px/1.05 var(--izl-mono);margin:0;color:var(--izl-ink)}
.izl-dname-l{display:flex;align-items:center;gap:7px;margin:5px 0 0;font:italic 400 14.5px var(--izl-mono);color:var(--izl-muted)}
.izl-dname-l svg{flex:none;width:15px;height:15px;fill:#7a9490}
/* the free shipping line, above the packs; it leaves the closed drawer 5 s after free shipping is reached */
.izl-dprog{display:flow-root}
.izl-dprog .izl-prog{margin:0 0 10px;font:700 12.5px var(--izl-mono);color:#1b5e57}
.izl-dprog .izl-prog.is-done{color:#1d7a45}
.izl-dprog .izl-prog-bar{height:8px;margin-top:6px;border-radius:4px;background:#d3e4dc;box-shadow:inset 0 0 0 1px var(--izl-line)}
.izl-dprog .izl-prog-bar i{border-radius:4px;background:linear-gradient(90deg,var(--izl-teal),#3fb37a);box-shadow:none}
body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dprog .izl-prog.is-gone{display:none}
/* the form: packs, then price and Kosárba vele! */
body.izl-phone div.product .summary form.cart{margin:0;padding:0;border:0;background:none;box-shadow:none}
body.izl-phone .summary .izl-pack-q,body.izl-phone .summary .izl-pack-tip,body.izl-phone .summary table.variations th,body.izl-phone .summary .reset_variations,body.izl-phone .summary .single_variation,body.izl-phone .summary .izl-buy-head,body.izl-phone .summary .izl-price-note,body.izl-phone div.product .summary form.cart .izl-px-note,body.izl-phone .summary .quantity{display:none!important}
body.izl-phone .summary table.variations{margin:0;border:0;background:none}
body.izl-phone .summary table.variations,body.izl-phone .summary table.variations tbody,body.izl-phone .summary table.variations tr,body.izl-phone .summary table.variations td{display:block;padding:0;border:0;background:none}
body.izl-phone .izl-chips{display:flex;gap:8px;margin:0}
body.izl-phone .izl-chip{flex:1;justify-content:center;height:36px;border:2px solid var(--izl-line);border-radius:9px;background:#fff;font:600 14px var(--izl-sans);transition:transform .1s,height .3s,font-size .3s}
body.izl-open .izl-chip{height:46px;font-size:16px}
body.izl-phone .izl-chip[aria-checked=true]{background:var(--izl-strip);color:#fff;border-color:var(--izl-ink);box-shadow:0 4px 0 var(--izl-ink)}
body.izl-phone .izl-chip:active{transform:translateY(2px)}
body.izl-phone .single_variation_wrap{margin:0;padding:0}
body.izl-phone div.product .summary form.cart .izl-drow{position:relative;display:flex!important;flex-wrap:nowrap;gap:12px;align-items:center;width:auto;margin:10px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
body.izl-open div.product .summary form.cart .izl-drow{margin-top:14px}
body.izl-phone div.product .summary form.cart .izl-drow::before,body.izl-phone div.product .summary form.cart .izl-drow::after{display:none}
body.izl-phone div.product .summary form.cart .izl-price-row{flex:none;min-width:128px;margin:0;padding:0;border:0;display:flex;flex-direction:column;align-items:flex-start}
body.izl-phone div.product .summary form.cart .izl-price-row.is-px>.price{display:none}
body.izl-phone div.product .summary form.cart .izl-price-row .price{margin:0;font:700 20px var(--izl-mono)}
body.izl-phone div.product .summary form.cart .izl-px{display:inline-flex;align-items:flex-start;gap:0;letter-spacing:-.5px}
body.izl-phone div.product .summary form.cart .izl-px-num{font:700 36px/1 var(--izl-mono);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
body.izl-phone div.product .summary form.cart .izl-px-side{padding:0;margin:.1em 0 0 .2em}
body.izl-phone div.product .summary form.cart .izl-px-cur{font:700 18px/1 var(--izl-mono);letter-spacing:0}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:hover,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:focus,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.added,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.is-busy,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.loading{flex:1;min-width:0;height:50px;margin:0;padding:0 10px;border-radius:10px;background:var(--izl-yellow);color:var(--izl-ink);border:2px solid var(--izl-ink);box-shadow:0 5px 0 var(--izl-ink);font:700 18px/1 var(--izl-sans);transition:transform .08s,box-shadow .08s,height .3s,font-size .3s;opacity:1}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button::after{display:none!important}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button:focus:not(:focus-visible){outline:0}
body.izl-open div.product .summary form.cart .single_add_to_cart_button{height:60px;font-size:21px}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--izl-ink)}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button.disabled{opacity:.55}
body.izl-phone div.product .summary form.cart .izl-drow .izl-stamp{width:104px;height:104px;right:-14px;top:-48px;bottom:auto;z-index:3}
body.izl-phone div.product .summary form.cart .izl-drow.is-stamped{animation:none}
body.izl-phone .summary.izl-drawer:has(.is-stamped){animation:izl-thump .28s ease-out .18s}
@keyframes izl-thump{40%{transform:translateY(3px)}}
/* the arrival day under the price, open drawer only */
.izl-arr{order:2;display:none;align-items:center;gap:6px;margin-top:4px;font:700 13.5px/1.2 var(--izl-mono);color:#1d7a45;white-space:nowrap}
body.izl-open .izl-arr:not([hidden]){display:flex}
.izl-arr i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:#22a05a;animation:izl-arr-blink 1.6s ease-in-out infinite}
.izl-arr i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22a05a;animation:izl-arr-ring 1.6s ease-out infinite}
@keyframes izl-arr-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes izl-arr-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
/* the open drawer: Tedd mellé, Szállítás, then the rest */
.izl-dhead,body.izl-phone .izl-setup-title{font:700 12px var(--izl-mono);letter-spacing:2px;text-transform:uppercase;color:var(--izl-teal);margin:24px 0 10px}
.izl-dhead::before,body.izl-phone .izl-setup-title::before{content:"\25B8\00a0"}
body.izl-phone .izl-setup{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
body.izl-phone .izl-setup li+li{border-top:2px solid var(--izl-line)}
body.izl-phone .izl-setup ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
body.izl-phone .izl-setup li{display:flex;align-items:center;gap:10px;height:66px;margin:0;padding:6px 10px 6px 7px;background:#fff;border:2px solid var(--izl-line);border-left:6px solid var(--izl-c);border-radius:12px;box-sizing:border-box}
body.izl-phone .izl-setup .izl-setup-photo{flex:none;width:auto;height:auto;background:none;border-radius:8px}
body.izl-phone .izl-setup .izl-setup-photo img{display:block;width:52px;height:52px;border-radius:8px;object-fit:cover;margin:0}
body.izl-phone .izl-setup-group{font:700 11px/1 var(--izl-mono);letter-spacing:1.2px}
body.izl-phone .izl-setup .izl-setup-name{font:600 17px/1.15 var(--izl-sans);color:var(--izl-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.izl-phone .izl-setup .izl-setup-price{font:700 16px var(--izl-mono);white-space:nowrap;color:var(--izl-ink)}
body.izl-phone .izl-setup .izl-setup-add{flex:none;width:36px;height:36px;display:grid;place-items:center;margin:0;padding:0;background:var(--izl-yellow);color:var(--izl-ink);border:2px solid var(--izl-ink);border-radius:8px;box-shadow:0 3px 0 var(--izl-ink);font:700 18px var(--izl-mono);text-decoration:none}
body.izl-phone .izl-setup .izl-setup-add:active{transform:translateY(2px);box-shadow:0 1px 0 var(--izl-ink)}
body.izl-phone .izl-setup .izl-setup-add.added{display:grid}
body.izl-phone .izl-setup .added_to_cart{display:none}
body.izl-phone .izl-setup li.izl-setup-empty{height:46px;border:2px dashed var(--izl-line);border-left-width:2px;background:none;padding:6px 12px}
/* Szállítás: one route box */
.izl-route{background:#fff;border:2px solid var(--izl-line);border-radius:12px;overflow:hidden}
.izl-route[hidden]{display:none}
.izl-route-h{display:flex;justify-content:space-between;align-items:center;height:24px;padding:0 12px;background:var(--izl-teal);color:#fff;font:700 12.5px/1 var(--izl-mono);letter-spacing:1.4px;text-transform:uppercase}
.izl-route-b{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:4px;padding:8px 12px 3px}
.izl-route-v{display:inline-flex;align-items:center;gap:6px;font:700 18px/1.1 var(--izl-sans);white-space:nowrap;color:var(--izl-ink)}
.izl-route-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.izl-route-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.izl-route-v.is-out .izl-route-ic{background:var(--izl-yellow);color:var(--izl-ink)}
.izl-route-v.is-in .izl-route-ic{background:#bfe3cf;color:#1d7a45}
.izl-route-road{width:100%;height:46px;overflow:visible;display:block}
.izl-route-road path#izl-road{fill:none;stroke:var(--izl-teal);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 5.5}
body.izl-phone .izl-dship .izl-ship-lines{margin:8px 0 0;padding:0;border:0;background:none;text-align:center}
body.izl-phone .izl-dship .izl-when{display:none!important}
body.izl-phone .izl-dship .izl-nudge,body.izl-phone .izl-dship .izl-free-ship{justify-content:center;margin:4px 0 0;font-size:13px}
body.izl-phone .izl-dship .izl-stock:not(.is-out){display:none}
body.izl-phone .izl-dmore .izl-trust{margin:24px 0 0}
body.izl-phone .izl-dmore .izl-faqs{margin:20px 0 0}
body.izl-phone .izl-dmore .related.products{margin:24px 0 0}
body.izl-phone .izl-dmore .izl-admin-strip{margin:24px 0 0}
/* the cue: after the card's wake-up the closed drawer hops softly and its handle glows, every 5 s until the first pull */
body.izl-phone .summary.is-cue{animation:izl-cue 1.6s cubic-bezier(.45,0,.3,1)}
body.izl-phone .summary.is-cue .izl-grab::before{animation:izl-cue-glow 1.6s ease-out}
@keyframes izl-cue{0%{transform:none}35%{transform:translateY(-7px)}65%{transform:translateY(-1px)}80%{transform:translateY(-3px)}100%{transform:none}}
@keyframes izl-cue-glow{0%{box-shadow:0 0 0 0 rgba(31,138,138,.55);background:#7fa497}35%{background:var(--izl-teal)}100%{box-shadow:0 0 0 12px rgba(31,138,138,0);background:#7fa497}}
/* smaller screens: Tedd mellé and Szállítás pull up and get more compact, so the open drawer fits without scrolling */
body[data-izl-d=s] .izl-dhead,body[data-izl-d=s] .izl-setup-title,body[data-izl-d=xs] .izl-dhead,body[data-izl-d=xs] .izl-setup-title{margin:14px 0 6px}
body[data-izl-d=s] .izl-setup ul{gap:6px}
body[data-izl-d=s] .izl-setup li{height:60px}
body[data-izl-d=s] .izl-setup .izl-setup-photo img{width:46px;height:46px}
body[data-izl-d=s] .izl-route-road{height:38px}
body[data-izl-d=s] .izl-route-b{padding:5px 12px 2px}
body[data-izl-d=s] .izl-route-h{height:22px}
body[data-izl-d=xs] .izl-dhead,body[data-izl-d=xs] .izl-setup-title,body[data-izl-d=xxs] .izl-dhead,body[data-izl-d=xxs] .izl-setup-title{margin:10px 0 4px}
body[data-izl-d=xs] .izl-setup ul{gap:5px}
body[data-izl-d=xs] .izl-setup li{height:54px}
body[data-izl-d=xs] .izl-setup .izl-setup-photo img{width:42px;height:42px}
body[data-izl-d=xs] .izl-setup .izl-setup-name{font-size:16px}
body[data-izl-d=xs] .izl-setup-group{font-size:10px}
body[data-izl-d=xs] .izl-route-road{height:32px}
body[data-izl-d=xs] .izl-route-b{padding:3px 12px 1px}
body[data-izl-d=xs] .izl-route-h{height:20px;font-size:11.5px}
body[data-izl-d=xs] .izl-route-v{font-size:16px}
body[data-izl-d=xs] .izl-route-ic{width:22px;height:22px}
body[data-izl-d=xxs] .izl-dhead,body[data-izl-d=xxs] .izl-setup-title{margin:7px 0 3px}
body[data-izl-d=xxs] .izl-setup ul{gap:4px}
body[data-izl-d=xxs] .izl-setup li{height:50px}
body[data-izl-d=xxs] .izl-setup .izl-setup-photo img{width:38px;height:38px}
body[data-izl-d=xxs] .izl-setup .izl-setup-name{font-size:15.5px}
body[data-izl-d=xxs] .izl-route-road{height:28px}
body[data-izl-d=xxs] .izl-route-b{padding:2px 12px 0}
body[data-izl-d=xxs] .izl-route-h{height:19px;font-size:11px}
body[data-izl-d=xxs] .izl-route-v{font-size:15.5px}
body[data-izl-d=xxs] .izl-route-ic{width:20px;height:20px}
/* the photo pop-out */
.izl-pop{position:fixed;inset:0;z-index:100;pointer-events:none}
.izl-pop[aria-hidden=false]{pointer-events:auto}
.izl-pop-bg{position:absolute;inset:0;background:rgba(8,28,27,.74);opacity:0;transition:opacity .38s ease}
.izl-pop.is-on .izl-pop-bg{opacity:1}
.izl-pop-fr{position:absolute;overflow:hidden;border-radius:6px;border:0 solid #14605F;touch-action:none;will-change:transform;outline:0}
.izl-pop-fr img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:0 0;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.izl-pop-dots{position:absolute;left:0;right:0;display:flex;gap:6px;justify-content:center;opacity:0;transition:opacity .3s .15s}
.izl-pop.is-on .izl-pop-dots{opacity:1}
.izl-pop-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .25s,background .25s}
.izl-pop-dots i.is-on{background:var(--izl-yellow);width:18px;border-radius:4px}
body.izl-phone .fsz-at-gallery .fsz-photo{cursor:zoom-in}
@media (prefers-reduced-motion:reduce){.izl-arr i,.izl-arr i::after,body.izl-phone .summary.is-cue,body.izl-phone .summary.is-cue .izl-grab::before,body.izl-phone .summary.izl-drawer:has(.is-stamped){animation:none}.izl-pop-bg,.izl-pop-dots{transition:none}}
}

/* ===== 1.7.20: phone product page polish ===== */
.izl-pop-zw{width:100%;height:100%;transform-origin:0 0}
@media (max-width:767px){
/* the top bar 42px, the cart count never clips; breadcrumb strip a bit tighter */
body.izl-codex-product .site-header .col-full{height:42px;padding:5px 14px 3px}
body.izl-codex-product .storefront-breadcrumb{top:calc(var(--izl-ab) + 42px)}
body.izl-codex-product .woocommerce-breadcrumb{padding:2px 0}
body.izl-codex-product .izl-cart-count{top:-3px;right:-4px}
/* bigger invisible tap areas: breadcrumb links ~44px tall, reaching down and sideways (never up into the logo's);
   the logo's own area on top of it */
body.izl-codex-product .woocommerce-breadcrumb a{position:relative}
body.izl-codex-product .woocommerce-breadcrumb a::after{content:"";position:absolute;left:-10px;right:-10px;top:-2px;bottom:-20px}
body.izl-codex-product .site-header .izl-logo a{position:relative;z-index:3}
body.izl-codex-product .site-header .izl-logo a::after{content:"";position:absolute;inset:-7px -10px}
/* the card: a little smaller so the whole model shows, centred between the bars (Codex 1.56.0 fit options) */
body.izl-codex-product .fsz-wrap.fsz-at-gallery{--fsz-fit-scale:.86;--fsz-fit-center:card;--fsz-fit-top:calc(var(--izl-ab) + 66px)}
/* the leaf litter (Avar) on every phone, peeking around the card */
body.izl-codex-product::before{opacity:1;visibility:visible}
/* the drawer ends at Szállítás */
body.izl-codex-product .izl-trust,body.izl-codex-product .izl-faqs,body.izl-codex-product .related.products,body.izl-codex-product .upsells.products{display:none!important}
/* closed drawer: thinner handle strip, taller pack buttons, the buy row on the same 3-column grid as the packs */
body.izl-phone .izl-grab{height:10px}
body.izl-phone .izl-grab::before{margin-top:5px}
body.izl-phone .izl-chips{gap:8px;margin-top:6px}
body.izl-phone .izl-chip{height:41px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;border-radius:10px}
body.izl-open .izl-chip{height:46px}
body.izl-phone div.product .summary form.cart .izl-drow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:5px}
body.izl-open div.product .summary form.cart .izl-drow{margin-top:12px}
body.izl-phone div.product .summary form.cart .izl-price-row{grid-column:1;grid-row:1;min-width:0}
body.izl-phone div.product .summary form.cart .izl-px-num{font-size:28px}
body.izl-phone div.product .summary form.cart .izl-px-cur{font-size:14px}
body.izl-open .izl-arr{font-size:12px;gap:5px}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:hover,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:focus,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.added,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.is-busy,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.loading{grid-column:2/4;grid-row:1;width:100%;height:44px;border-radius:10px;box-shadow:0 4px 0 var(--izl-ink)}
body.izl-open div.product .summary form.cart .single_add_to_cart_button{height:56px}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--izl-ink)}
/* Tedd mellé peeks blurred under the closed buy row, where it sits once the drawer is open (--izl-pt from product.js);
   it can't be tapped, its "+" is muted so Kosárba vele! stays the loudest; while pulling, the blur fades out */
body.izl-phone:not(.izl-open):not(.izl-sd) .summary.izl-drawer .izl-dmore{position:absolute;left:12px;right:12px;top:var(--izl-pt,116px);bottom:0;height:auto;overflow:hidden;visibility:visible;pointer-events:none;opacity:calc(.9 + .1*var(--k,0));-webkit-mask-image:linear-gradient(transparent 0,rgba(0,0,0,calc(.45 + .55*var(--k,0))) 35%,rgba(0,0,0,calc(.8 + .2*var(--k,0))) 100%);mask-image:linear-gradient(transparent 0,rgba(0,0,0,calc(.45 + .55*var(--k,0))) 35%,rgba(0,0,0,calc(.8 + .2*var(--k,0))) 100%)}
body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dmore .izl-setup-title,body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dmore>.izl-dship:first-child>.izl-dhead{margin-top:0}
body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dmore .izl-setup-add{filter:saturate(.55);opacity:.8}
.izl-bz{display:none;position:absolute;left:0;right:0;top:var(--izl-pt,116px);bottom:0;z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(calc(4px*(1 - var(--k,0))));backdrop-filter:blur(calc(4px*(1 - var(--k,0))));-webkit-mask-image:linear-gradient(transparent 0,#000 45%);mask-image:linear-gradient(transparent 0,#000 45%);transition:-webkit-backdrop-filter .3s,backdrop-filter .3s}
body.izl-phone:not(.izl-open) .izl-bz{display:block}
body.izl-phone .summary.is-drag .izl-bz{transition:none}
body[data-izl-d=xs]:not(.izl-open):not(.izl-sd) .summary.izl-drawer .izl-dmore,body[data-izl-d=xxs]:not(.izl-open):not(.izl-sd) .summary.izl-drawer .izl-dmore,body[data-izl-d=xs]:not(.izl-open) .izl-bz,body[data-izl-d=xxs]:not(.izl-open) .izl-bz{display:none!important}
/* the drawer's buy area and name take the finger (no page pan while pulling) */
body.izl-phone .izl-dcore,body.izl-phone .izl-dname{touch-action:none}
body.izl-open .izl-dcore,body.izl-open .izl-dname{touch-action:pan-y}
}
@media (max-width:767px){
/* 1.7.20 drawer anchored to the screen bottom: under a bottom browser bar (--izl-bb from product.js) */
body.izl-codex-product .summary.entry-summary{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--izl-bb,0px))}
}

/* ===== 1.7.21: phone product page fixes (iPhone 17 Pro check) ===== */
@media (max-width:767px){
/* The closed drawer is just the buy row: under Kosárba vele! only --izl-cpad of room (a few px above a bottom browser
   bar), and its bottom padding is the bar OR the home-indicator strip, never both added (1.7.20 counted the strip twice). */
body.izl-codex-product .summary.entry-summary{--izl-cpad:10px;--g:0;padding-bottom:max(env(safe-area-inset-bottom,0px),var(--izl-bb,0px))}
body.izl-bar .summary.entry-summary{--izl-cpad:8px}
body.izl-open .summary.entry-summary{--g:1}
body.izl-phone:not(.izl-open):not(.izl-sd) .izl-dscroll{padding-bottom:var(--izl-cpad,10px)}
/* No blurred peek any more: Tedd mellé stays hidden while closed and fades in under the buy row while pulling. */
.izl-bz{display:none!important}
body.izl-phone:not(.izl-open):not(.izl-sd) .summary.izl-drawer:not(.is-drag) .izl-dmore{visibility:hidden}
body.izl-phone:not(.izl-open):not(.izl-sd) .summary.izl-drawer .izl-dmore{opacity:var(--k,0);-webkit-mask-image:none;mask-image:none}
/* The packs and Kosárba vele! grow with the opening drawer (--g: 0 closed, 1 open, the pull's progress in between,
   product.js), in step with the name above them; open, they keep one size (a press only pushes the button down). */
body.izl-phone .izl-chip,body.izl-open .izl-chip{height:calc(41px + 5px * var(--g,0));font-size:calc(14px + 2px * var(--g,0))}
body.izl-phone div.product .summary form.cart .izl-drow,body.izl-open div.product .summary form.cart .izl-drow{margin-top:calc(5px + 7px * var(--g,0))}
body.izl-phone div.product .summary form.cart .single_add_to_cart_button,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:hover,body.izl-phone div.product .summary form.cart .single_add_to_cart_button:focus,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.added,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.is-busy,body.izl-phone div.product .summary form.cart .single_add_to_cart_button.loading,body.izl-open div.product .summary form.cart .single_add_to_cart_button{height:calc(44px + 12px * var(--g,0));font-size:calc(18px + 3px * var(--g,0));transition:transform .08s,box-shadow .08s,height .35s cubic-bezier(.2,.8,.2,1),font-size .35s cubic-bezier(.2,.8,.2,1)}
body.izl-phone .izl-chip{transition:transform .1s,height .35s cubic-bezier(.2,.8,.2,1),font-size .35s cubic-bezier(.2,.8,.2,1)}
body.izl-phone div.product .summary form.cart .izl-drow{transition:margin-top .35s cubic-bezier(.2,.8,.2,1)}
body.izl-phone div.product .summary.is-drag form.cart .single_add_to_cart_button{transition:transform .08s,box-shadow .08s}
body.izl-phone .summary.is-drag .izl-chip,body.izl-phone div.product .summary.is-drag form.cart .izl-drow{transition:none}
/* The open drawer ends with Szállítás: no free-shipping pill or ship-day lines under the route box, nothing after it
   (the sales line and the like); the out-of-stock line and the admin strip stay. */
body.izl-phone .izl-dship .izl-ship-lines{display:none!important}
body.izl-phone .izl-dmore>:not(.izl-setup):not(.izl-dship):not(.izl-admin-strip){display:none!important}
}

/* ===== 1.7.21: Edit photos (products without the Codex card; assets/photos.js, inc/photos.php) ===== */
.izl-admin-strip .izl-photos-open{margin:0}
.izl-admin-strip:has(.izl-photos-open){flex-direction:row;flex-wrap:wrap;justify-content:center}
.izl-photos{width:min(36rem,calc(100vw - 2rem))}
.izl-ph-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:0.625rem;margin:0;padding:0;list-style:none}
.izl-ph-item{position:relative;display:grid;gap:0.25rem;padding:0.25rem;border:2px solid var(--izl-line);border-radius:0.625rem;background:#fff;cursor:grab}
.izl-ph-item.is-sel{border-color:var(--izl-teal);box-shadow:0 0 0 2px var(--izl-teal)}
.izl-ph-item.is-over{border-style:dashed;border-color:var(--izl-ink)}
.izl-ph-pick{all:unset;position:relative;display:block;cursor:pointer;border-radius:0.375rem;overflow:hidden}
.izl-ph-pick:focus-visible{outline:2px solid var(--izl-teal);outline-offset:2px}
.izl-ph-th{display:block;aspect-ratio:4/3;overflow:hidden;background:#dfe8e4}
.izl-ph-th img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.izl-ph-main{position:absolute;left:0.25rem;top:0.25rem;padding:0.0625rem 0.375rem;border-radius:0.25rem;background:var(--izl-yellow);color:var(--izl-ink);font:700 max(11px,0.6875rem)/1.4 var(--izl-mono)}
.izl-ph-tools{display:flex;justify-content:space-between}
.izl-ph-tools button{all:unset;cursor:pointer;width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:0.375rem;font-size:max(12px,0.75rem);color:var(--izl-ink)}
.izl-ph-tools button:hover,.izl-ph-tools button:focus-visible{background:var(--izl-mint,#E9F1EC)}
.izl-ph-tools button[disabled]{opacity:.3;cursor:default;background:none}
.izl-ph-tools .izl-ph-x{color:#b3261e}
.izl-ph-add{all:unset;cursor:pointer;justify-self:start;padding:0.5rem 0.875rem;border:2px dashed var(--izl-line);border-radius:0.5rem;font:600 max(13px,0.875rem) var(--izl-sans);color:var(--izl-ink)}
.izl-ph-add:hover,.izl-ph-add:focus-visible{border-color:var(--izl-teal);background:var(--izl-mint,#E9F1EC)}
.izl-ph-framing[hidden]{display:none}
.izl-ph-win{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:0.5rem;background:#dfe8e4;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.izl-ph-win.is-drag{cursor:grabbing}
.izl-ph-win img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.izl-ph-zoom{display:flex;align-items:center;gap:0.625rem;font-weight:600;font-size:max(13px,0.875rem)}
.izl-ph-zoom input{flex:1;accent-color:var(--izl-teal)}
.izl-ph-zoom output{min-width:3.25rem;text-align:right;font:700 max(13px,0.875rem) var(--izl-mono)}
.izl-ph-reset{all:unset;cursor:pointer;justify-self:start;font-size:max(13px,0.8125rem);text-decoration:underline;color:var(--izl-muted)}
/* where the frames show: the product page photo (a 4:3 window, as on the tiles) and small squares (Tedd mellé, cart) */
.single-product div.product .woocommerce-product-gallery__image.izl-framed{aspect-ratio:4/3;overflow:hidden;border-radius:0.75rem}
.single-product div.product .woocommerce-product-gallery__image.izl-framed>a{display:block;width:100%;height:100%}
.single-product div.product .woocommerce-product-gallery__image.izl-framed img{width:100%!important;height:100%!important;object-fit:cover}
.izl-framed-box{display:block;overflow:hidden;border-radius:inherit;line-height:0}
.izl-framed-box img.izl-framed-img{display:block;object-fit:cover;aspect-ratio:1/1}
.izl-setup .izl-setup-photo .izl-framed-box{width:100%;height:100%}
.izl-setup .izl-setup-photo .izl-framed-box img{width:100%!important;height:100%!important;border-radius:0}
@media (max-width:767px){body.izl-phone .izl-setup .izl-setup-photo:has(.izl-framed-box){width:52px;height:52px;overflow:hidden}}

/* ===== 1.7.26 ===== */
@media (max-width:767px){
/* The nudge hop lifts the drawer: a mint skirt behind it, so no page background shows in the gap (no longer a strip over the button). */
body.izl-phone .summary.is-cue{box-shadow:0 -10px 30px rgba(0,0,0,.25),0 14px 0 0 var(--izl-mint,#E9F1EC)}
/* The pack buttons live in the open drawer only, under the Latin name; closed = price / pack + Kosárba vele!. */
body.izl-phone .izl-chips{overflow:hidden;margin:0;height:calc(50px * var(--g,0));opacity:var(--g,0);pointer-events:none;transition:height .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
body.izl-open .izl-chips{pointer-events:auto}
body.izl-phone .summary.is-drag .izl-chips{transition:none}
body.izl-phone .izl-chip,body.izl-open .izl-chip{height:46px;font-size:16px}
body.izl-phone div.product .summary form.cart .izl-drow,body.izl-open div.product .summary form.cart .izl-drow{margin-top:calc(-2px + 8px * var(--g,0))}
body.izl-phone div.product .summary form.cart .izl-price-row .izl-px-per{align-self:flex-end;margin:-3px 2px 0 0;font:600 12px/1 var(--izl-mono);letter-spacing:0;color:#7C968D;white-space:nowrap;opacity:calc(1 - var(--g,0) * 1.6)}
}

/* 1.7.27: no pull-to-refresh when the open drawer is pulled down: the dimmed page behind it does not scroll, and the page never overscrolls */
html:has(body.izl-codex-product){overscroll-behavior:none}
@media (max-width:767px){.izl-dim{touch-action:none}}

/* ===== 2.0.0 scroll drawer (phone first release): the drawer is the lower part of the page (product.js phone()):
   an empty space a screen tall (.izl-space) above it, so pulling it up is the page itself scrolling and Safari's
   bar tucks away; the header, the crumb strip, the card and the backdrop stay pinned.
   2.0.1 (2.0.3: no snapping, see product.js): the drawer keeps its open layout, and closed its parts are slid up under its top edge (the scroll
   column clips them): --izl-dt the name and the free-shipping line, --izl-dr the packs, the buy row and the rest.
   Where the browser has scroll-driven animations (body.izl-sdt) the slides and fades are tied to the page scroll
   (--izl-b closed, --izl-s open, product.js); elsewhere they follow --izl-g (0 closed, 1 open) from product.js. */
html:has(body.izl-sd){overflow:visible!important;height:auto!important;scrollbar-width:none}
@media (max-width:767px){
body.izl-codex-product.izl-sd{overflow:visible;height:auto}
body.izl-sd.admin-bar #wpadminbar{position:fixed}
.izl-space{display:block;pointer-events:none}
.izl-space.is-glide{transition:height .3s cubic-bezier(.2,.8,.2,1)}
/* 2.0.2: a strip of the drawer's mint on the screen bottom: Safari colours its bottom bar from it (the top keeps the header's teal).
   2.0.3: as tall as the home-indicator strip (4px was too thin), and the dim has no background colour of its own any
   more (its darkness is an inset shadow): Safari took its dark teal for the bottom bar, even while it was invisible. */
body.izl-sd{--izl-foot:calc(env(safe-area-inset-bottom,0px) + 6px)}
.izl-foot2{position:fixed;left:0;right:0;bottom:0;height:var(--izl-foot,6px);z-index:11;background:var(--izl-mint,#E9F1EC);pointer-events:none}
body.izl-sd .izl-dim{background:none!important;box-shadow:inset 0 0 0 200vmax rgba(5,30,29,.5)}
/* 2.0.3: the screen with Safari's full bar (100svh) and folded (100lvh), measured by product.js */
.izl-vhp{position:fixed;left:0;top:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.izl-vhp.is-l{height:100vh;height:100lvh}
.izl-sab{position:fixed;left:0;bottom:0;width:0;height:env(safe-area-inset-bottom,0px);visibility:hidden;pointer-events:none}
body.izl-sd .summary.entry-summary{position:relative!important;left:auto;right:auto;bottom:auto;width:auto!important;margin:0 calc(50% - 50vw)!important;height:auto!important;display:block;padding-bottom:var(--izl-foot,0px)!important;transition:none!important;--g:var(--izl-g,0);box-sizing:border-box;min-height:calc(100vh - var(--izl-top,60px) - 8px);min-height:calc(100dvh - var(--izl-top,60px) - 8px)}
/* 2.0.4: open, the drawer reaches the screen bottom whatever Safari's bar does (100dvh), so the page ends at the open spot
   and the drawer can't be pushed up under the top bar (only a drawer taller than the screen scrolls on) */
body.izl-sd.izl-open .summary.entry-summary{--g:var(--izl-g,0)}
body.izl-sd .izl-dscroll{display:block!important;overflow:hidden!important;overflow:clip!important;padding:0 12px calc(26px + env(safe-area-inset-bottom,0px))!important}
body.izl-sd .izl-dmore{position:static!important;height:auto!important;overflow:visible!important;visibility:visible!important;pointer-events:auto!important;-webkit-mask-image:none!important;mask-image:none!important}
/* the whole page takes the finger: native scroll everywhere (a tap still presses a button) */
body.izl-sd .izl-grab,body.izl-sd .izl-dcore,body.izl-sd .izl-dname,body.izl-sd .izl-dim{touch-action:auto!important}
body.izl-sd.izl-popon .izl-pop{touch-action:none}
body.izl-sd.izl-mdrag,body.izl-sd.izl-mdrag *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
/* the open layout, always: the name, the free-shipping line (also once reached), the packs, the buy row's gap */
body.izl-sd .izl-dname,body.izl-sd.izl-open .izl-dname{max-height:none;height:auto;opacity:1;margin:2px 2px 14px;transition:none}
body.izl-sd .izl-chips{height:50px!important;transition:none!important}
body.izl-sd.izl-open .izl-chips{pointer-events:auto}
body.izl-sd .izl-chip{transition:transform .1s!important}
body.izl-sd.izl-phone div.product .summary form.cart .izl-drow{margin-top:10px!important;transition:none!important}
body.izl-sd.izl-phone div.product .summary form.cart .single_add_to_cart_button{transition:transform .08s,box-shadow .08s!important}
/* the slides and fades (fallback: --izl-g) */
/* 2.0.4: the name, the free-shipping line and the packs stay in place and fade in; the buy row and everything under it
   (mint behind them) slide down over them, so nothing comes out from under the drawer's edge. The free-shipping line
   that shows in the closed drawer still slides down from the top (mint behind it too). */
body.izl-sd .izl-dname,body.izl-sd .izl-dprog{transform:none;opacity:clamp(0,calc((var(--izl-g,0) - .35) / .5),1)}
body.izl-sd .izl-dprog:has(.izl-prog:not(.is-gone)){transform:translate3d(0,calc(var(--izl-dt,0px) * (var(--izl-g,0) - 1)),0);opacity:1;position:relative;z-index:2;background:var(--izl-mint)}
body.izl-sd .izl-chips{transform:none;opacity:clamp(0,calc((var(--izl-g,0) - .45) / .45),1)}
body.izl-sd.izl-phone div.product .summary form.cart .izl-drow,body.izl-sd .izl-dmore{position:relative;z-index:1;background:var(--izl-mint)}
body.izl-sd.izl-phone div.product .summary form.cart .izl-drow{box-shadow:0 16px 0 var(--izl-mint)} /* covers the gap down to the rest */
body.izl-sd .izl-drow,body.izl-sd .izl-dmore{transform:translate3d(0,calc(var(--izl-dr,0px) * (var(--izl-g,0) - 1)),0)}
/* (2.0.5 tried these only without scroll-driven animations: the open buy row then sat 1px off. Kept as they are.) */
body.izl-sd .izl-dname,body.izl-sd .izl-dprog,body.izl-sd .izl-chips{will-change:opacity}
body.izl-sd .izl-drow,body.izl-sd .izl-dmore{will-change:transform}
/* 2.0.5: no pinch zoom on the phone product page (product.js adds izl-zl; off with the roll-back switch). Zero
   specificity, so a part that sets its own touch-action (the photo pop-up, the card photo) keeps it. */
html:has(body.izl-zl),:where(body.izl-zl,body.izl-zl *){touch-action:pan-x pan-y}
body.izl-zl .izl-grab,body.izl-zl .izl-dcore,body.izl-zl .izl-dname,body.izl-zl .izl-dim{touch-action:pan-x pan-y!important}
body.izl-sd .izl-dmore{opacity:clamp(0,calc((var(--izl-g,0) - .04) * 4),1)}
body.izl-sd .izl-dim{opacity:var(--izl-g,0);pointer-events:none!important;transition:none!important}
body.izl-sd.izl-open .izl-dim{pointer-events:auto!important}
body.izl-measure .izl-dname,body.izl-measure .izl-dprog,body.izl-measure .izl-chips,body.izl-measure .izl-drow,body.izl-measure .izl-dmore,body.izl-measure .single_add_to_cart_button{transform:none!important;animation:none!important}
/* measuring only (product.js measure()): 2.0.0's closed layout */
body.izl-mclosed .izl-dname,body.izl-mclosed.izl-sd .izl-dname{height:0;margin:0 2px;overflow:hidden}
body.izl-mclosed.izl-sd .izl-chips{height:0!important}
body.izl-mclosed.izl-sd.izl-phone div.product .summary form.cart .izl-drow{margin-top:4px!important}
body.izl-mclosed .izl-dprog .izl-prog.is-gone{display:none}
/* the cue hop stops for good once the page has moved */
body.izl-sd.izl-open .summary.is-cue{animation:none}
}
@supports (animation-timeline:scroll()){
@media (max-width:767px){
body.izl-sdt .izl-dname,body.izl-sdt .izl-dprog{animation:izl-sd-n linear both}
/* 2.8.0: the free-shipping line keeps ONE animation whether it shows in the closed drawer or not (a new animation name
   restarted it, and Safari drew its closed spot for a frame: the line jumped up over the name when Kosárba was tapped).
   Shown in the closed drawer: it slides down and never fades (--izl-qt, --izl-qo 1); gone: it only fades in, as before. */
body.izl-sdt .izl-dprog{animation-name:izl-sd-q;--izl-qt:0px;--izl-qo:0}
body.izl-sdt .izl-dprog:has(.izl-prog:not(.is-gone)){--izl-qt:var(--izl-dt,0px);--izl-qo:1} /* the line that shows in the closed drawer never fades */
body.izl-sdt .izl-chips{animation:izl-sd-k linear both}
body.izl-sdt .izl-drow{animation:izl-sd-r linear both}
body.izl-sdt .izl-dmore{animation:izl-sd-m linear both}
body.izl-sdt .izl-dim{animation:izl-sd-f linear both}
body.izl-sdt.izl-phone div.product .summary form.cart .izl-price-row .izl-px-per{animation:izl-sd-pp linear both}
body.izl-sdt .izl-dname,body.izl-sdt .izl-dprog,body.izl-sdt .izl-chips,body.izl-sdt .izl-drow,body.izl-sdt .izl-dmore,body.izl-sdt .izl-dim,body.izl-sdt.izl-phone div.product .summary form.cart .izl-price-row .izl-px-per{animation-timeline:scroll(root block);animation-range:var(--izl-b,0px) var(--izl-s,100px)}
}
}
@keyframes izl-sd-n{from{opacity:0}35%{opacity:0}85%{opacity:1}to{opacity:1}}
@keyframes izl-sd-k{from{opacity:0}45%{opacity:0}90%{opacity:1}to{opacity:1}}
@keyframes izl-sd-q{from{transform:translate3d(0,calc(-1 * var(--izl-qt,0px)),0);opacity:var(--izl-qo,0)}35%{opacity:var(--izl-qo,0)}85%{opacity:1}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes izl-sd-p{from{transform:translate3d(0,calc(-1 * var(--izl-dt,0px)),0)}to{transform:translate3d(0,0,0)}}
@keyframes izl-sd-r{from{transform:translate3d(0,calc(-1 * var(--izl-dr,0px)),0)}to{transform:translate3d(0,0,0)}}
@keyframes izl-sd-m{from{transform:translate3d(0,calc(-1 * var(--izl-dr,0px)),0);opacity:0}4%{opacity:0}29%{opacity:1}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes izl-sd-f{from{opacity:0}to{opacity:1}}
@keyframes izl-sd-pp{from{opacity:1}62.5%{opacity:0}to{opacity:0}}

/* ===== 2.0.6 ===== */
/* Admin strip: the hidden name has Edit next to it (product.js editable()); WordPress's own Edit (the product in the
   dashboard) is a pill like Edit buy box. */
.izl-admin-name .izl-edit-form{display:inline-flex;vertical-align:middle;margin-left:0.5rem}
.izl-admin-name .izl-edit-form .izl-edit-input{flex:0 1 20rem;width:20rem}
.izl-admin-strip .edit-link a.post-edit-link{display:inline-block;padding:0.375rem 0.75rem;border-radius:62.4375rem;font:600 max(13px,0.8125rem)/1.4 var(--izl-sans);color:var(--izl-ink);background:#fff;box-shadow:inset 0 0 0 2px var(--izl-ink);text-decoration:none;outline:0}
.izl-admin-strip .edit-link a.post-edit-link:hover,.izl-admin-strip .edit-link a.post-edit-link:focus-visible{background:var(--izl-yellow)}

/* ===== 2.0.7 ===== */
/* Instant add: Kosárba vele! and the Tedd mellé + never grey out while the shop answers; the + shows its tick at once. */
.single-product div.product form.cart .single_add_to_cart_button.is-busy{opacity:1;cursor:pointer}
a.izl-setup-add.loading{opacity:1;pointer-events:auto}
a.izl-setup-add.izl-ok{background:#DFF3E6;border-color:#1D7A46;box-shadow:0 0.1875rem 0 #1D7A46}
a.izl-setup-add.izl-ok span{display:none}
a.izl-setup-add.izl-ok::after{content:"✓";display:block;position:static;margin:0;border:0;animation:none;width:auto;height:auto;font:700 1.25rem/1 var(--izl-sans);color:#1D7A46}

/* Leaf litter in two depths (2.0.7). assets/avar.svg is split in two: avar-far.svg (the ground and the small leaves)
   and avar-near.svg (the big leaves, no ground). Swap both files to change the drawing (group art comes later). */
@media (max-width:767px){
/* Phones: the far layer is the old backdrop; the near one floats over it, under the card (the card moves up a layer).
   Pulling the drawer up moves them up a little, the near leaves twice as far: the browser ties it to the page scroll
   (scroll-driven animations, nothing runs per frame); without that support they simply stay put. */
body.izl-codex-product::before{background-image:url(assets/avar-far.svg)}
body.izl-codex-product::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:url(assets/avar-near.svg) center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--izl-top,81px) - 10px),#000 calc(var(--izl-top,81px) + 110px));mask-image:linear-gradient(180deg,transparent calc(var(--izl-top,81px) - 10px),#000 calc(var(--izl-top,81px) + 110px))}
body.izl-codex-product .fsz-wrap.fsz-at-gallery{z-index:2}
}
@supports (animation-timeline:scroll()){
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
body.izl-sdt.izl-codex-product::before{animation:izl-lit-far linear both}
body.izl-sdt.izl-codex-product::after{animation:izl-lit-near linear both}
body.izl-sdt.izl-codex-product::before,body.izl-sdt.izl-codex-product::after{animation-timeline:scroll(root block);animation-range:var(--izl-b,0px) var(--izl-s,100px)}
}
}
@keyframes izl-lit-far{from{translate:0 0}to{translate:0 -8vh}}
@keyframes izl-lit-near{from{translate:0 0}to{translate:0 -17vh}}

/* Computers: the same leaf litter on a soft rounded patch behind the card only (the buy box side stays clean mint),
   fading out at its edges. It drifts a little as the page scrolls (where the browser ties animations to the scroll)
   and shifts a few px with the mouse, the near leaves more (product.js litter()). */
.izl-litter{display:none}
@media (min-width:768px){
.izl-litter{display:block;position:absolute;z-index:-1;inset:-2.5rem -3rem -5rem -7rem;pointer-events:none;opacity:0;transition:opacity .8s ease-out;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5rem,#000 calc(100% - 5.5rem),transparent),linear-gradient(transparent,#000 3rem,#000 calc(100% - 5rem),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5rem,#000 calc(100% - 5.5rem),transparent),linear-gradient(transparent,#000 3rem,#000 calc(100% - 5rem),transparent);mask-composite:intersect}
.izl-litter.is-on{opacity:1}
body.izl-codex-product{overflow-x:clip} /* the patch reaches past the page edge on narrow windows: no sideways scroll */
.izl-litter i{position:absolute;inset:-2.5rem;background:url(assets/avar-far.svg) center/cover no-repeat;will-change:transform;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.izl-litter i.is-near{background-image:url(assets/avar-near.svg)}
}
@supports (animation-timeline:view()){
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
.izl-litter i{animation:izl-lit-v-far linear both;animation-timeline:view()}
.izl-litter i.is-near{animation-name:izl-lit-v-near}
}
}
@keyframes izl-lit-v-far{from{translate:0 14px}to{translate:0 -14px}}
@keyframes izl-lit-v-near{from{translate:0 32px}to{translate:0 -32px}}

/* ------------------------------------------------------------------ 2.2.0: sold out (Dan, 2026-11-05: stays in the shop) */
/* the tile: a red rubber stamp over the photo, the button says "Szólj, ha lesz!" (Ízeltláb Bolt) */
.izl-tile-out{position:absolute;top:0.625rem;right:0.5rem;z-index:1;padding:0.125rem 0.5rem;border:0.1875rem solid #B42323;border-radius:0.375rem;background:rgba(255,255,255,.88);color:#8A1F1F;font:700 max(12px,0.8125rem)/1.3 var(--izl-mono);letter-spacing:.06em;text-transform:uppercase;transform:rotate(4deg)}
.izl-tile.outofstock .izl-tile-photo img{filter:grayscale(.55) brightness(.95)}
/* the product page: the cart button turns into "Szólj, ha újra lesz!" (product.js notifyBtn()) */
div.product .summary form.cart .single_add_to_cart_button.izl-notify-btn,
body.izl-phone div.product .summary form.cart .single_add_to_cart_button.izl-notify-btn.disabled,
div.product .summary form.cart .single_add_to_cart_button.izl-notify-btn.disabled{opacity:1;cursor:pointer;white-space:nowrap}
.izb-signup.is-hi{animation:izl-hi 1.2s ease-out}
@keyframes izl-hi{0%{box-shadow:0 0 0 0 rgba(244,211,94,.95)}100%{box-shadow:0 0 0 0.875rem rgba(244,211,94,0)}}
body.izl-phone .izl-dship .izb-signup{margin:0.625rem 0 0;max-width:none}
@media (prefers-reduced-motion:reduce){.izb-signup.is-hi{animation:none;outline:0.1875rem solid var(--izl-yellow)}}

/* ------------------------------------------------------------------ 2.4.0: edge to edge, every page (Dan, 2026-11-06)
   header.php asks for viewport-fit=cover, so an iPhone turned sideways no longer leaves an empty strip at both sides:
   the colours reach the screen edges, and the text keeps clear of the notch (the larger of the usual margin and the
   notch's room). Upright phones and computers have no such room (0), so nothing moves there. */
@media (max-width:767px){.col-full{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}}
@media (min-width:768px){.col-full{padding-left:max(2.5rem,env(safe-area-inset-left,0px));padding-right:max(2.5rem,env(safe-area-inset-right,0px))}}

/* 2.4.0: the phone drawer on a wider window (a narrow computer window, a big phone): the drawer runs edge to edge and
   its contents stay in the middle at the usual width, instead of hugging the left side with an empty right half. */
body.izl-phone .summary.izl-drawer>.izl-grab,body.izl-phone .summary.izl-drawer>.izl-dscroll{max-width:none}
body.izl-phone .summary.izl-drawer .izl-dcore,body.izl-phone.izl-open .summary.izl-drawer .izl-dmore,body.izl-phone.izl-sd .summary.izl-drawer .izl-dmore,body.izl-phone .summary.izl-drawer.is-drag .izl-dmore{max-width:476px;margin-left:auto;margin-right:auto}
body.izl-phone .summary.izl-drawer .izl-dcore{width:auto}

/* ------------------------------------------------------------------ 2.4.0: the front page on a phone (Dan's pick "A")
   One screen on the first load: the same slim top bar as the product page (no menu row, no breadcrumb: the hero
   buttons go to Ászkák and Kezdőknek, Kiegészítők has its own row further down), the title on one line, the Codex
   cards at the product page's size (home-phone.js fits them to the screen's height), the two buttons right under them.
   The kicker and the grey paragraph are left out on phones. Wider screens are unchanged. */
@media (max-width:767px){
body.home .site-header,body.home.page:not(.page-template-template-homepage) .site-header,body.home.blog .site-header{margin:0;border:0;box-shadow:0 2px 0 #0e3534;border-bottom:6px solid var(--izl-strip,#164f4e);padding:0}
body.home .site-header .col-full{min-height:0;height:42px;padding-top:5px;padding-bottom:3px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));gap:0;flex-wrap:nowrap;box-sizing:border-box}
body.home .site-header .site-branding{padding:0}
body.home .site-header .izl-logo .izl-logo-t{font-size:22px}
body.home .izl-logo-seg{height:4px;margin-top:4px}
body.home .izl-nav{display:none}
body.home .izl-icons{gap:6px}
body.home .izl-icon{width:34px;height:34px;border-radius:8px}
body.home .izl-icon svg{width:17px;height:17px;stroke-width:2.4}
body.home .site-content{overflow-x:clip;padding-top:0} /* the cards' stage runs to the screen edges */
.izl-hero,.izl-hero:has(.izl-carousel){display:flex;flex-direction:column;align-items:stretch;gap:0;padding:14px 0 0}
.izl-hero-copy{display:contents}
.izl-hero-kicker,.izl-hero-text{display:none}
.izl-hero h1{order:1;margin:0 0 4px;font-size:max(13px,2.25rem);white-space:nowrap;overflow:hidden}
.izl-hero h1.is-wrap{white-space:normal;text-wrap:balance}
.izl-hero-card{order:2}
.izl-hero-card .fsz-wrap{margin:0}
.izl-hero-btns{order:3;flex-wrap:nowrap;gap:12px;margin:2px 0 0}
.izl-hero-btns .izl-btn{flex:1 1 0;min-width:0;justify-content:center;padding:0.75rem 0.5rem;white-space:nowrap}
.izl-carousel{overflow:hidden;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto;padding:12px 0 16px;touch-action:pan-y}
.izl-hero-single{padding:12px 0 16px;display:grid;place-items:center}
}

/* ------------------------------------------------------------------ 2.5.0 */
/* Phones, product page, the moment before product.js has built the drawer: the drawer already has its closed size
   (it started 144px tall and empty, then shrank), with the handle, the white ticket, the price and the yellow button at
   the very spots the finished drawer puts them (the real price and button from the page, nothing extra loaded). */
@media (max-width:767px){
body.izl-codex-product:not(.izl-phone) .summary.entry-summary{height:calc(98px + env(safe-area-inset-bottom,0px));transition:none}
/* 2.5.1: the card's first fit (Codex, before product.js) already uses the finished page's numbers: the top bar and the
   crumb strip end 60px down (106px under the admin bar), the closed drawer is 98px tall. Plain px: Codex reads these as
   numbers (a calc() here read as 0, so the card first sat at the very top and then jumped down). */
body.izl-codex-product .fsz-wrap.fsz-at-gallery{--fsz-fit-top:60px;--fsz-fit-bottom:98px;--fsz-fit-low:98px}
body.izl-codex-product.admin-bar .fsz-wrap.fsz-at-gallery{--fsz-fit-top:106px}
body.izl-codex-product.izl-pack .fsz-wrap.fsz-at-gallery,body.izl-codex-product:has(form.variations_form) .fsz-wrap.fsz-at-gallery{--fsz-fit-bottom:80px;--fsz-fit-low:80px} /* packs: the lower drawer (its measured height with the pack line) */
body.izl-codex-product:not(.izl-phone) .summary.entry-summary{--izl-pw:min(100% - 24px,476px);--izl-pl:max(12px,(100% - 476px) / 2)} /* 2.5.3: the finished drawer's contents are at most 476px wide, centred */
body.izl-codex-product:not(.izl-phone) .summary.entry-summary::before{content:"";position:absolute;top:5px;left:50%;width:56px;height:6px;margin-left:-28px;border-radius:3px;background:#7FA497}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart{visibility:visible;position:absolute;left:var(--izl-pl);right:var(--izl-pl);top:10px;width:auto;height:78px;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--izl-ink),0 4px 0 var(--izl-ink)}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart *{visibility:hidden}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-price-row{visibility:visible;position:absolute;left:16px;top:25px;margin:0;padding:0;border:0;display:flex;align-items:flex-start}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-price-row *{visibility:visible}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-price-row.is-px>.price,body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px-note,body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px-per{display:none}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-price-row .price{margin:0;font:700 20px var(--izl-mono)}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px{display:inline-flex;align-items:flex-start;gap:0;letter-spacing:-.5px}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px-num{font:700 28px/1 var(--izl-mono);letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--izl-ink)}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px-side{padding:0;margin:.1em 0 0 .2em}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .izl-px-cur{font:700 14px/1 var(--izl-mono);letter-spacing:0}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .single_add_to_cart_button{visibility:visible;position:absolute;left:130px;right:16px;top:18px;width:auto;height:44px;margin:0;padding:0 10px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:2px solid var(--izl-ink);border-radius:10px;background:var(--izl-yellow);color:var(--izl-ink);box-shadow:0 4px 0 var(--izl-ink);font:700 18px/1 var(--izl-sans);letter-spacing:.18px;text-transform:none;white-space:nowrap;overflow:hidden}
body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .single_add_to_cart_button::before,body.izl-codex-product:not(.izl-phone) div.product .summary form.cart .single_add_to_cart_button::after{display:none}
/* 2.5.1: a product with packs closes lower (71px) and has no white ticket: the price on the left, the button on the right,
   straight on the drawer (2.5.0 drew an empty white ticket there, the price and button sat below it, out of sight) */
body.izl-codex-product:not(.izl-phone) .summary.entry-summary:has(form.variations_form){height:calc(71px + env(safe-area-inset-bottom,0px))}
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form,body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .single_variation_wrap,body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .woocommerce-variation-add-to-cart,body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .izl-buy-head{position:static;background:none;box-shadow:none}
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .izl-price-row{top:18px}
/* 2.5.3: the pack line ("/ 10 db") shows from the first paint too, under the price on the right, as on the finished drawer
   (the finished drawer has three equal columns with 8px gaps between 12px edges: the price takes the first, the
   button the other two; on narrow phones the button was 24px off before the page script ran) */
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .izl-price-row{left:var(--izl-pl);width:calc((var(--izl-pw) - 16px) / 3);flex-direction:column}
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .single_add_to_cart_button{left:calc(var(--izl-pl) + 8px + (var(--izl-pw) - 16px) / 3);right:var(--izl-pl)}
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .izl-price-row .izl-px-per{display:block;align-self:flex-end;margin:-1px 2px 0 0;font:600 12px/1 var(--izl-mono);letter-spacing:0;color:#7C968D;white-space:nowrap}
body.izl-codex-product:not(.izl-phone) div.product .summary form.variations_form .single_add_to_cart_button{top:17px}
}
/* Phones: bigger breadcrumb tap areas, nothing changes on screen. Each link's invisible area takes the whole strip
   height, half of the gap to its neighbours and the strip's edge on the left of the first one; on the other pages it
   also reaches 8px below the strip (the strip's scroll box is stretched down for it, but lets taps through outside the
   links). Not on the phone product page: the open drawer's handle sits right under the strip there. */
@media (max-width:767px){
.storefront-breadcrumb .col-full{display:flow-root}
.storefront-breadcrumb .woocommerce-breadcrumb,body.izl-codex-product .storefront-breadcrumb .woocommerce-breadcrumb{margin:0 -16px -8px;padding-left:16px;padding-right:16px;padding-bottom:8px;pointer-events:none}
body.izl-codex-product .storefront-breadcrumb .woocommerce-breadcrumb{margin-bottom:0;padding-bottom:0}
body.izl-codex-product .storefront-breadcrumb .col-full{min-height:16px} /* 2.5.3: the strip is the same height with one crumb or two (the card is placed for it before the page script runs) */
.woocommerce-breadcrumb a{position:relative;pointer-events:auto}
.woocommerce-breadcrumb a::after,body.izl-codex-product .woocommerce-breadcrumb a::after{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-12px}
body.izl-codex-product .woocommerce-breadcrumb>a:first-of-type::after,body:not(.izl-codex-product) .woocommerce-breadcrumb .izl-crumb-home>a::after{left:-40px}
.woocommerce-breadcrumb a:last-child::after,body.izl-codex-product .woocommerce-breadcrumb a:last-child::after{right:-24px}
}

/* 2.5.3: the drawer handle is a button, and Storefront paints every clicked button grey with a purple outline
   (button:focus / :hover); with a mouse (a computer in the phone layout) that showed as a grey band and a purple line
   along the drawer's top. The handle keeps its own keyboard ring (.izl-grab:focus-visible::before). */
body .izl-grab,body .izl-grab:hover,body .izl-grab:focus,body .izl-grab:active{outline:0;background:none;box-shadow:none}

/* ------------------------------------------------------------------ 2.6.0: one top bar on every phone page
   Dan (2026-11-06): the top bar and the breadcrumb strip are the same size everywhere, the product page's: the slim
   42px bar (logo and the three buttons, no menu row) and the thin strip under it. The menu links (Ászkák, Kiegészítők,
   Kezdőknek) move under the page title on the list pages (izl_list_menu()). The bar scrolls away with the page as
   before; only the product page keeps it fixed. Computers are unchanged. */
@media (max-width:767px){
body:not(.izl-codex-product):not(.home){--izl-strip:#164f4e}
body:not(.izl-codex-product):not(.home) .site-header{margin:0;border:0;padding:0}
body:not(.izl-codex-product):not(.home) .site-header .col-full{min-height:0;height:42px;padding:5px max(14px,env(safe-area-inset-right,0px)) 3px max(14px,env(safe-area-inset-left,0px));gap:0;flex-wrap:nowrap;box-sizing:border-box}
body:not(.izl-codex-product):not(.home) .site-header .site-branding{padding:0}
body:not(.izl-codex-product):not(.home) .site-header .izl-logo .izl-logo-t{font-size:22px}
body:not(.izl-codex-product):not(.home) .izl-logo-seg{height:4px;margin-top:4px}
body:not(.izl-codex-product):not(.home) .izl-nav{display:none}
body:not(.izl-codex-product):not(.home) .izl-icons{gap:6px;margin-left:auto}
body:not(.izl-codex-product):not(.home) .izl-icon{width:34px;height:34px;border-radius:8px}
body:not(.izl-codex-product):not(.home) .izl-icon svg{width:17px;height:17px;stroke-width:2.4}
body:not(.izl-codex-product):not(.home) .izl-cart-count{top:-3px;right:-4px}
body:not(.izl-codex-product):not(.home) .storefront-breadcrumb{background:var(--izl-strip);box-shadow:none;border-bottom:2px solid #0e3534}
body:not(.izl-codex-product):not(.home) .storefront-breadcrumb .col-full{min-height:16px;padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}
body:not(.izl-codex-product):not(.home) .woocommerce-breadcrumb{min-height:0;padding-top:2px;font-size:10.5px;letter-spacing:1.4px;gap:2px;color:#cfe3de}
body:not(.izl-codex-product):not(.home) .woocommerce-breadcrumb a,body:not(.izl-codex-product):not(.home) .woocommerce-breadcrumb .is-last{min-height:0;padding:0 4px}
body:not(.izl-codex-product):not(.home) .woocommerce-breadcrumb .izl-crumb-sep{font-size:1.3em}
body:not(.izl-codex-product):not(.home) .woocommerce-breadcrumb .izl-crumb-home{display:none} /* the logo goes home */
/* the menu under the list pages' title: three links, the current one underlined */
.izl-list-menu{display:flex;gap:6px 22px;flex-wrap:wrap;margin:2px 0 14px;padding:0;list-style:none}
.izl-list-menu li{margin:0}
.izl-list-menu a{display:block;padding:6px 0 4px;color:var(--izl-ink);font:600 15px/1.2 var(--izl-sans);text-decoration:none;border-bottom:3px solid transparent}
.izl-list-menu .is-current a{border-bottom-color:var(--izl-teal)}
}
@media (min-width:768px){.izl-list-menu{display:none}}
/* The phone's status bar takes its colour from a bar pinned to the top of the screen (Safari 26): the product page's
   fixed top bar makes it teal there. On the other pages a thin teal line pinned to the top does the same, so the
   status bar is teal everywhere (touch screens only; it sits under the status bar or on the teal top bar). */
@media (hover:none) and (pointer:coarse){
body:not(.izl-codex-product)::after{content:"";position:fixed;top:0;left:0;right:0;height:max(2px,env(safe-area-inset-top,0px));background:var(--izl-teal);z-index:2147483000;pointer-events:none}
}
/* 2.6.0: the sort box starts at the left edge like the title (an empty notices box before it took a gap's room) */
.storefront-sorting>.woocommerce-notices-wrapper:empty{display:none}
/* 2.6.0: computers: until the buy box has arrived (it comes after the card in the page), the card keeps the buy box's
   room beside it, so it shows in its final place instead of alone in the middle and then jumping left. */
@media (min-width:1024px){
.single-product div.product:has(>.fsz-wrap):not(:has(>.summary))>.fsz-wrap{margin-right:calc(var(--izl-buy-w) + 4.5rem)}
}
/* 2.6.0: the logo's box no longer depends on whether the mono font has loaded yet (its text line under the logo grew
   2-3px with the stand-in font, so the whole top bar shrank a little when the font arrived). Same height as before. */
.site-header .izl-logo{display:flex;padding-bottom:.12em}

/* ------------------------------------------------------------------ 2.6.0: the header search (inc/finder.php)
   Dan (2026-11-06): no popup box: the top bar grows downwards with a search field, and the results show right under it
   while typing. Same on every screen; the panel hangs under whichever top bar the page has (also the product page's
   fixed one) and the page behind is dimmed a little. */
.site-header{position:relative}
.site-header.is-finding{z-index:300}
.izl-sp{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--izl-teal);border-bottom:0.25rem solid var(--izl-teal-dark);box-shadow:0 0.75rem 1.5rem -0.5rem rgba(14,53,52,.45);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .2s cubic-bezier(.3,.7,.3,1),visibility 0s linear .2s}
.izl-sp.is-open,.izl-sp:target{visibility:visible;clip-path:inset(0 0 -2.5rem 0);transition:clip-path .26s cubic-bezier(.2,.8,.25,1)}
.izl-sp-in{max-width:46rem;margin:0 auto;padding:0.625rem 1.25rem 0.875rem;box-sizing:border-box;transform:translateY(-0.5rem);opacity:0;transition:transform .2s ease,opacity .15s ease}
.izl-sp.is-open>.izl-sp-in,.izl-sp:target>.izl-sp-in{transform:none;opacity:1;transition:transform .26s cubic-bezier(.2,.8,.25,1),opacity .2s ease}
.izl-sp-form{display:flex;align-items:center;gap:0.5rem}
.izl-sp-field{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.izl-sp-field>svg{position:absolute;left:0.75rem;width:1.125rem;height:1.125rem;stroke:var(--izl-teal-dark);fill:none;stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.izl-sp .izl-sp-field input{width:100%;height:2.75rem;margin:0;padding:0 0.75rem 0 2.5rem;box-sizing:border-box;background:#fff;color:var(--izl-ink);border:2px solid var(--izl-ink);border-radius:0.625rem;box-shadow:inset 0 2px 0 rgba(0,0,0,.06);font:500 16px/1 var(--izl-sans);-webkit-appearance:none;appearance:none}
.izl-sp .izl-sp-field input:focus{outline:0;border-color:var(--izl-ink);box-shadow:0 0 0 3px var(--izl-yellow)}
.izl-sp .izl-sp-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.izl-sp.is-busy .izl-sp-field>svg{animation:izl-sp-look .8s ease-in-out infinite alternate}
@keyframes izl-sp-look{to{transform:translate(2px,-1px) rotate(-12deg)}}
.izl-sp .izl-sp-form button.izl-sp-go{height:2.75rem;padding:0 1rem;flex:none}
.izl-sp-x{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:0.625rem;background:var(--izl-teal-dark);color:#fff;text-decoration:none}
.izl-sp-x:hover,.izl-sp-x:focus-visible{background:var(--izl-ink);color:var(--izl-yellow)}
.izl-sp-x svg{width:1.125rem;height:1.125rem;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.izl-sp-out{display:flex;flex-direction:column}
.izl-sp-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.625rem}
.izl-sp-list:has(>.izl-sp-none){order:-1}
.izl-sp-chips[hidden]{display:none}
.izl-sp-chip{display:block;padding:0.375rem 0.875rem;border-radius:999px;background:var(--izl-teal-dark);color:#fff;font:600 14px/1.25 var(--izl-sans);text-decoration:none}
.izl-sp-chip:hover,.izl-sp-chip:focus-visible{background:var(--izl-ink);color:var(--izl-yellow)}
.izl-sp-list:not(:empty){margin-top:0.625rem;max-height:60vh;overflow:auto;overscroll-behavior:contain;background:#fff;color:var(--izl-ink);border:2px solid var(--izl-ink);border-radius:0.75rem;box-shadow:0.375rem 0.375rem 0 var(--izl-teal-dark)}
.izl-sp-list:has(>.izl-sp-none:only-child){background:none;border:0;box-shadow:none;max-height:none;overflow:visible}
.izl-sp-none{margin:0;color:#fff;font:500 15px/1.4 var(--izl-sans)}
.izl-sp-fix{margin:0;padding:0.5rem 0.875rem 0;color:#5b6b68;font:500 13px/1.3 var(--izl-sans)}
.izl-sp-h{margin:0;padding:0.625rem 0.875rem 0.125rem;color:var(--izl-teal-dark);font:700 11px/1.2 var(--izl-mono);letter-spacing:.12em;text-transform:uppercase}
.izl-sr{display:flex;align-items:center;gap:0.25rem;padding-right:0.625rem}
.izl-sr-a{flex:1;min-width:0;display:flex;align-items:center;gap:0.75rem;padding:0.4375rem 0.375rem 0.4375rem 0.875rem;color:inherit;text-decoration:none;border-radius:0.5rem}
.izl-sr:hover,.izl-sr:focus-within,.izl-sp-all:hover,.izl-sp-all:focus{background:#e9f3f1}
.izl-sr-a:focus{outline:0}
.izl-sr-ph{flex:none;width:2.75rem;height:2.75rem;border-radius:0.5rem;overflow:hidden;background:#dfe9e7;border:1.5px solid rgba(23,32,31,.18)}
.izl-sr-ph img{display:block;width:100%;height:100%;object-fit:cover}
.izl-sr-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.izl-sr-n{font:600 15px/1.25 var(--izl-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.izl-sr-num{margin-right:0.375rem;color:var(--izl-teal-dark);font:700 11px/1 var(--izl-mono)}
.izl-sr-l{color:#5b6b68;font:italic 400 12.5px/1.25 var(--izl-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.izl-sr mark{background:var(--izl-yellow);color:inherit;border-radius:2px;padding:0 1px}
.izl-sr-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.izl-sr-p b{font:700 14px/1.2 var(--izl-mono);white-space:nowrap}
.izl-sr-p small{color:#5b6b68;font:500 11.5px/1.2 var(--izl-sans);white-space:nowrap}
.izl-sr-out{padding:2px 7px;border:1.5px solid #9a3b2c;border-radius:4px;color:#9a3b2c;font:700 10.5px/1.3 var(--izl-mono);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-3deg)}
.izl-sr.is-out .izl-sr-ph img{filter:grayscale(.8);opacity:.7}
.izl-sr.is-out .izl-sr-n{color:#5b6b68}
.izl-sp .izl-sr-add{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;margin:0;padding:0;border-radius:50%;background:var(--izl-yellow);color:var(--izl-ink);border:2px solid var(--izl-ink);box-shadow:0 2px 0 var(--izl-ink);font:700 20px/1 var(--izl-sans);cursor:pointer;transition:transform .08s ease}
.izl-sp .izl-sr-add:active{transform:translateY(2px);box-shadow:none}
.izl-sp .izl-sr-add:focus{outline:0}
.izl-sp .izl-sr-add:focus-visible{box-shadow:0 0 0 3px var(--izl-teal)}
.izl-sp .izl-sr-add.is-busy{opacity:.55}
.izl-sp .izl-sr-add.is-added{background:var(--izl-teal);color:#fff;font-size:16px}
.izl-sp-all{display:block;margin:0.25rem 0 0;padding:0.625rem 0.875rem;border-top:1.5px solid #dde7e5;border-radius:0;color:var(--izl-teal-dark);font:700 14px/1.2 var(--izl-sans)}
.izl-sp-all::after{content:" \2192"}
.izl-sp-dim{position:fixed;inset:0;z-index:299;background:rgba(14,53,52,.28);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.izl-sp-dim.is-on{opacity:1;visibility:visible;transition:opacity .22s ease}
@media (max-width:767px){
.izl-sp-in{padding:0.5rem max(12px,env(safe-area-inset-right,0px)) 0.75rem max(12px,env(safe-area-inset-left,0px))}
.izl-sp .izl-sp-form button.izl-sp-go{display:none} /* the keyboard's own search key sends it */
.izl-sp-list:not(:empty){box-shadow:0.25rem 0.25rem 0 var(--izl-teal-dark)}
.izl-sr-a{gap:0.625rem;padding-left:0.625rem}
}
@media (prefers-reduced-motion:reduce){.izl-sp,.izl-sp.is-open,.izl-sp-in,.izl-sp.is-open>.izl-sp-in,.izl-sp-dim{transition:none}.izl-sp.is-busy .izl-sp-field>svg{animation:none}}

/* 2.8.0: touch screens: the shop tiles and the front page's back cards no longer lift when a finger touches them (a
   touch left them lifted, and a lift under a scrolling finger fought the scroll). Computers keep the hover lift. The
   Codex card's tilt follows a mouse only (Codex), and on a phone's product page the phone's turn (kept). */
@media (hover:none){
.izl-tile:hover{transform:none;box-shadow:0.375rem 0.375rem 0 var(--izl-tile-dark)}
.izl-slot:not(.is-front):hover .fsz-wrap{transform:none}
}