#vmk-variant-dialog.vmk-variant-dialog{position:fixed;inset:0;margin:auto;width:min(740px,calc(100vw - 24px));max-width:740px;max-height:min(86vh,900px);padding:26px;border:0;border-radius:18px;background:#fff;color:#242a22;box-shadow:0 20px 70px #0003;overflow:auto;z-index:2147483000}#vmk-variant-dialog::backdrop{background:#1b271b99}.vmk-variant-dialog *{box-sizing:border-box}.vmk-variant-close{position:absolute;right:16px;top:8px;border:0;background:transparent;color:#202820;font-size:36px;cursor:pointer;line-height:1.2;min-width:44px;min-height:44px}.vmk-variant-head{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;padding:10px 24px 24px 0}.vmk-variant-photo{width:180px;height:180px;object-fit:contain}.vmk-variant-intro h2{font:700 clamp(28px,4vw,43px)/1.15 Georgia,serif;margin:0 0 12px;color:#222}.vmk-variant-intro p{font-size:16px;line-height:1.6;margin:0 0 12px}.vmk-variant-info{font-weight:700;color:#116c31;text-decoration:underline}.vmk-variant-subhead{background:#f7f5f0;padding:16px;border-radius:10px;font:700 23px Georgia,serif;margin:4px 0 8px}.vmk-variant-list{display:grid;gap:9px}.vmk-variant-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto auto;gap:15px;align-items:center;padding:12px;border:1px solid #e9e9e6;border-radius:12px;box-shadow:0 2px 6px #0000000a}.vmk-variant-product-photo{width:70px;height:74px;object-fit:contain}.vmk-variant-details{display:grid;gap:7px;min-width:0}.vmk-variant-details strong{font-size:16px}.vmk-variant-details small{font-size:13px;color:#6c706c}.vmk-variant-price{white-space:nowrap;font-size:19px}.vmk-variant-button{display:inline-block;background:#11732e;color:#fff!important;border-radius:7px;padding:11px 16px;text-decoration:none!important;font-weight:600;white-space:nowrap}.vmk-variant-button:hover{background:#09561f}.vak-ingredient-product.vmk-variant-trigger{color:#11732e!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer}@media(max-width:600px){#vmk-variant-dialog.vmk-variant-dialog{padding:16px}.vmk-variant-head{grid-template-columns:95px 1fr;gap:12px;padding:20px 18px 16px 0}.vmk-variant-photo{width:95px;height:110px}.vmk-variant-intro p{font-size:14px}.vmk-variant-subhead{font-size:20px}.vmk-variant-row{grid-template-columns:54px 1fr auto;gap:8px;padding:9px}.vmk-variant-product-photo{width:54px;height:62px}.vmk-variant-price{font-size:16px}.vmk-variant-button{grid-column:2 / 4;text-align:center}.vmk-variant-details strong{font-size:14px}}
/* 1.5.1: tighter header and consistent modal appearance in WoodMart */
#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-head{min-height:0;grid-template-columns:145px minmax(0,1fr);gap:20px;padding:0 42px 16px 0}#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-photo{width:145px;height:145px}#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-subhead{margin:0 0 12px}#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-row{background:#fff}#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-price{font-weight:700}@media(max-width:600px){#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-head{grid-template-columns:85px minmax(0,1fr);gap:12px;padding:12px 36px 14px 0}#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-photo{width:85px;height:95px}}

/* 1.5.2: expand encyclopedia inside the existing dialog */
#vmk-variant-dialog.vmk-variant-dialog.vmk-expanded{width:min(950px,calc(100vw - 24px));max-width:950px;max-height:90vh;transition:width .18s ease}
#vmk-variant-dialog .vmk-variant-info{appearance:none;border:0;background:transparent;padding:6px 0;cursor:pointer;font:700 15px/1.4 inherit;color:#116c31;text-decoration:underline;text-underline-offset:3px;text-align:left}
#vmk-variant-dialog .vmk-variant-sections[hidden]{display:none!important}
#vmk-variant-dialog .vmk-variant-sections{background:#faf9f6;border:1px solid #ece8de;border-radius:14px;padding:8px 24px;margin:0 0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
#vmk-variant-dialog .vmk-variant-section{padding:16px 0;border-bottom:1px solid #e9e5dc;min-width:0}
#vmk-variant-dialog .vmk-variant-section h3{font:700 21px/1.3 Georgia,serif;color:#253326;margin:0 0 9px}
#vmk-variant-dialog .vmk-variant-section p{font:400 15px/1.7 inherit;line-height:1.7;color:#394039;white-space:pre-line;overflow-wrap:anywhere;margin:0}
#vmk-variant-dialog .vmk-variant-close{right:14px!important;left:auto!important;top:12px!important;z-index:5}
@media(max-width:680px){#vmk-variant-dialog .vmk-variant-sections{grid-template-columns:1fr;padding:4px 17px}#vmk-variant-dialog.vmk-variant-dialog.vmk-expanded{width:calc(100vw - 12px);max-height:94vh}}

/* 1.5.3: Encyclopedia image first, package image fallback, expandable photo gallery. */
#vmk-variant-dialog .vmk-variant-gallery{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px;align-items:center}
#vmk-variant-dialog .vmk-variant-gallery-item{width:72px;height:64px;border:2px solid #e4e7df;border-radius:9px;padding:2px;background:#fff;cursor:pointer;overflow:hidden}
#vmk-variant-dialog .vmk-variant-gallery-item.is-active,#vmk-variant-dialog .vmk-variant-gallery-item:focus-visible{border-color:#11732e;outline-offset:2px}
#vmk-variant-dialog .vmk-variant-gallery-item img{width:100%;height:100%;object-fit:cover;border-radius:5px}
#vmk-variant-dialog .vmk-variant-photo{object-fit:contain;border-radius:10px}
@media(max-width:600px){#vmk-variant-dialog .vmk-variant-gallery-item{width:57px;height:53px}}

/* 1.6: configurable appearance and mobile refinements */
#vmk-variant-dialog .vmk-variant-button{background:var(--vmk-accent,#11732e)}
#vmk-variant-dialog .vmk-variant-info{color:var(--vmk-accent,#11732e)}
#vmk-variant-dialog .vmk-variant-photo{width:var(--vmk-photo-size,145px);height:var(--vmk-photo-size,145px);max-width:100%}
#vmk-variant-dialog .vmk-variant-gallery-item.is-active{border-color:var(--vmk-accent,#11732e)}
@media(max-width:600px){#vmk-variant-dialog.vmk-variant-dialog{width:calc(100vw - 12px);max-height:94dvh;padding:15px;border-radius:14px}#vmk-variant-dialog .vmk-variant-head{grid-template-columns:minmax(75px,30%) minmax(0,1fr);gap:12px}#vmk-variant-dialog .vmk-variant-photo{width:min(var(--vmk-photo-size,145px),100%);height:auto;max-height:160px}#vmk-variant-dialog .vmk-variant-row{grid-template-columns:54px minmax(0,1fr) auto}#vmk-variant-dialog .vmk-variant-price{font-size:15px}#vmk-variant-dialog .vmk-variant-button{min-height:44px;display:grid;place-items:center}#vmk-variant-dialog .vmk-variant-intro h2{font-size:clamp(24px,6vw,34px)}}

/* 1.6.1: make custom photo sizing win over earlier fixed 145px declaration. */
#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-head .vmk-variant-photo{width:var(--vmk-photo-size,145px);height:var(--vmk-photo-size,145px)}
@media(max-width:600px){#vmk-variant-dialog.vmk-variant-dialog .vmk-variant-head .vmk-variant-photo{width:min(var(--vmk-photo-size,145px),100%);height:auto;max-height:160px}}

/* 2.0.6: main encyclopedia body has no redundant heading, fills the available width. */
#vmk-variant-dialog .vmk-variant-main-content{grid-column:1/-1;border-bottom:0}
#vmk-variant-dialog .vmk-variant-main-content p{max-width:none}
