.flavor-garan{margin:14px 0;max-width:100%} .flavor-garan img{display:block;max-width:100%;height:auto} .flavor-garan--full{max-width:380px} .flavor-garan__trigger{ display:flex; align-items:center; width:min(340px,100%); padding:0 !important; gap:0 !important; border:1px solid #f2f2f2 !important; background:transparent; cursor:pointer; line-height:0; } .flavor-garan__trigger img{width:100%} .flavor-garan__backdrop{ position:fixed; inset:0; z-index:2147483000; background:rgba(0,0,0,.58); opacity:0; transition:opacity .16s ease; } .flavor-garan__backdrop[hidden]{display:none} .flavor-garan__backdrop.is-open{opacity:1} .flavor-garan__panel{ position:fixed; z-index:2147483001; left:50%; top:50%; width:min(520px,calc(100vw - 40px)); max-height:calc(100vh - 48px); padding:14px; overflow:auto; background:#fff; border:1px solid rgba(0,0,0,.12); box-shadow:0 0 5px rgba(0,0,0,0.1); border-radius:var(--wd-brd-radius,8px); opacity:0; transform:translate(-50%,-48%) scale(.985); transform-origin:center center; transition:opacity .16s ease,transform .16s ease; pointer-events:none; } .flavor-garan__panel[hidden]{display:none} .flavor-garan__panel.is-open{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; } .flavor-garan__panel img{display:block;width:100%;height:auto} .flavor-garan__close{ position:absolute; z-index:2; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid rgba(0,0,0,.18); border-radius:50%; background:#fff; color:#000; box-shadow:0 1px 5px rgba(0,0,0,.18); font:400 28px/1 Arial,sans-serif; cursor:pointer; } .flavor-garan__close:hover, .flavor-garan__close:focus{ background:#fff; color:#000; border-color:#000; outline:none; } html.flavor-garan-modal-open, html.flavor-garan-modal-open body{ overflow:hidden !important; } @media(max-width:600px){ .flavor-garan__panel{ width:calc(100vw - 28px); max-height:calc(100vh - 28px); padding:10px; } .flavor-garan__close{ top:6px; right:6px; } } @media(prefers-reduced-motion:reduce){ .flavor-garan__panel, .flavor-garan__backdrop{ transition:none; } } /* GARAN modal hard overrides: modal nodes are moved to by garan.js. */ body > .flavor-garan__backdrop{ position:fixed !important; inset:0 !important; z-index:2147483645 !important; width:100vw !important; height:100vh !important; margin:0 !important; padding:0 !important; background:rgba(0,0,0,.64) !important; } body > .flavor-garan__panel{ position:fixed !important; z-index:2147483646 !important; left:50% !important; top:50% !important; width:min(520px,calc(100vw - 40px)) !important; max-width:calc(100vw - 40px) !important; max-height:calc(100vh - 40px) !important; margin:0 !important; box-sizing:border-box !important; overflow:auto !important; background:#fff !important; color:#000 !important; box-shadow:0 0 5px rgba(0,0,0,0.1) !important; border-radius:var(--wd-brd-radius,8px) !important; } body > .flavor-garan__panel.is-open{ transform:translate(-50%,-50%) scale(1) !important; } body > .flavor-garan__panel .flavor-garan__close{ position:absolute !important; top:8px !important; right:8px !important; z-index:2147483647 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:38px !important; min-width:38px !important; max-width:38px !important; height:38px !important; min-height:38px !important; max-height:38px !important; margin:0 !important; padding:0 !important; border:1px solid #000 !important; border-radius:999px !important; background:#fff !important; background-image:none !important; color:#000 !important; box-shadow:0 1px 5px rgba(0,0,0,.2) !important; font-family:Arial,sans-serif !important; font-size:30px !important; font-weight:400 !important; line-height:34px !important; text-indent:0 !important; text-shadow:none !important; opacity:1 !important; visibility:visible !important; cursor:pointer !important; } body > .flavor-garan__panel .flavor-garan__close:hover, body > .flavor-garan__panel .flavor-garan__close:focus{ background:#fff !important; color:#000 !important; border-color:#000 !important; opacity:1 !important; } body > .flavor-garan__panel .flavor-garan__close{ top:0 !important; right:0 !important; } .flavor-garan{ --flavor-garan-radius:5px; } .flavor-garan__trigger{ border-radius:var(--flavor-garan-radius) !important; min-height:48px; } .flavor-garan__trigger img{ border-radius:inherit; } body > .flavor-garan__panel{ border-radius:var(--flavor-garan-radius) !important; } @media(min-width:1025px){ .flavor-claims-label-control{ display:inline-flex; vertical-align:top; margin-top:8px; margin-right:8px; margin-bottom:8px; } .flavor-garan{ max-width:250px; } .flavor-garan__trigger{ width:250px; min-height:46px; } } /* 1.6.10 product control refinements */ .flavor-garan__trigger{ min-height:44px !important; overflow:hidden; } .flavor-garan__trigger:hover, .flavor-garan__trigger:focus{ border-color:#222 !important; } /* About 30% smaller than the previous 520px desktop modal. */ body > .flavor-garan__panel{ width:min(365px,calc(100vw - 40px)) !important; } @media(min-width:1025px){ .flavor-garan__trigger{ min-height:44px !important; } } .flavor-garan__trigger{ background:transparent !important; }