/* PHP-ready presentation: links and prices come from the existing HTML catalog. */
.hhm-product-grid {
    scroll-margin-top: 110px;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    padding: 4px 0 18px !important;
    border: 0 !important;
    background: transparent !important;
}
.hhm-product-grid::before, .hhm-product-grid::after { display: none !important; }
.hhm-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid #ece8e4;
    border-radius: 18px;
    background: #fff;
    color: #242424;
    font-family: "Segoe UI", Arial, sans-serif;
    box-shadow: 0 3px 12px #33251a05;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hhm-product-card:hover { border-color: #f4a373; box-shadow: 0 8px 24px #aa4b1212; }
.hhm-card-visual { position: relative; margin: 0 0 16px; border-radius: 12px; background: #faf9f7; overflow: hidden; }
.hhm-card-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 22px 12px 12px; }
.hhm-card-image img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 250ms ease; }
.hhm-product-card:hover .hhm-card-image img { transform: scale(1.04); }
.hhm-card-badge { position: absolute; top: 9px; left: 9px; z-index: 1; border: 1px solid #f9d0b3; border-radius: 6px; padding: 4px 8px; background: #fff3e8; color: #bd4a0b; font-size: 11px; font-weight: 600; line-height: 1.4; }
.hhm-card-badge.hhm-discount-badge {background:#d70018;border-color:#d70018;color:#fff;}
.hhm-card-content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0 3px; }
.hhm-card-content h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.hhm-card-content h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 67.5px; color: #292929; text-decoration: none; }
.hhm-card-content h3 a:hover { color: #c74e0d; }
.hhm-card-version { align-self: flex-start; padding: 4px 8px; border: 1px solid #e9e6e3; border-radius: 6px; background: #faf9f7; color: #77716b; font-size: 11px; line-height: 1.5; }
.hhm-card-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; margin: auto 0 0; padding: 16px 0 18px; }
.hhm-card-prices strong { color: #df570e; font-size: 20px; line-height: 1.4; font-weight: 750; white-space: nowrap; }
.hhm-card-prices del { color: #96918b; font-size: 12px; white-space: nowrap; }
.hhm-card-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid #f9c6a4; border-radius: 10px; background: #fff1e7; color: #c44809; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.hhm-card-action:hover { background: #f66b15; border-color: #f66b15; color: #fff; text-decoration: none; }
.hhm-card-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hhm-product-card a:focus-visible { outline: 2px solid #c44809; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 1150px) { .hhm-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 850px) { .hhm-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 600px) {
    .hhm-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hhm-product-card { padding: 9px; border-radius: 14px; }
    .hhm-card-visual { margin-bottom: 12px; }
    .hhm-card-image { padding: 24px 8px 10px; }
    .hhm-card-content { padding: 0; }
    .hhm-card-content h3 { font-size: 13px; }
    .hhm-card-content h3 a { min-height: 58.5px; }
    .hhm-card-prices { padding: 13px 0 14px; }
    .hhm-card-prices strong { font-size: 17px; }
    .hhm-card-badge { top: 6px; left: 6px; font-size: 10px; padding: 3px 6px; }
    .hhm-card-action { gap: 6px; font-size: 13px; padding: 9px 5px; }
}

.hhm-card-image { position: relative; isolation: isolate; }
.hhm-card-image img.hhm-image-ghost { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: inherit; pointer-events: none; transform: none !important; transition: none; }
.hhm-product-card:has(.hhm-card-gallery:not([hidden])):hover .hhm-card-image > img { transform: none; }
.hhm-color-options { position: relative; isolation: isolate; }
.hhm-color-options .hhm-color-button { position: relative; z-index: 1; background: transparent; transition: border-color 240ms ease, color 240ms ease; }
.hhm-color-options .hhm-color-button[aria-pressed="true"] { background: transparent; }
.hhm-color-highlight { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 7px; background: #fff1e7; pointer-events: none; }
.hhm-color-highlight.is-positioned { transition: transform 240ms cubic-bezier(.22,.68,.25,1), width 240ms ease, height 240ms ease; }
.hhm-option-button, .hhm-image-dot { transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, width 240ms ease; }
@media (prefers-reduced-motion: reduce) {
    .hhm-color-highlight.is-positioned, .hhm-color-options .hhm-color-button, .hhm-option-button, .hhm-image-dot { transition: none; }
}
@media (max-width: 360px) { .hhm-card-prices strong { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .hhm-product-card, .hhm-card-image img, .hhm-card-action { transition: none; } }

.hhm-product-card [hidden] { display: none !important; }
.hhm-card-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; margin: -2px 0 12px; color: #858079; font-size: 11px; line-height: 1.5; text-decoration: none; }
.hhm-card-choices { margin-top: 10px; }
.hhm-card-choices fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 12px; }
.hhm-card-choices legend { display: block !important; float: none; width: auto; padding: 0; margin: 0 0 7px; border: 0; font-size: 12px; font-weight: 600; line-height: 1.5; color: #66605a; }
.hhm-option-button, .hhm-color-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; margin: 0 5px 5px 0; border: 1px solid #e5e0dc; border-radius: 7px; background: #fff; color: #615a54; font: 12px/1.4 "Segoe UI",Arial,sans-serif; cursor: pointer; }
.hhm-option-button[aria-pressed="true"], .hhm-color-button[aria-pressed="true"] { border-color: #f66b15; background: #fff1e7; color: #b94608; }
.hhm-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #0002; flex-shrink: 0; }
.hhm-card-gallery { position: absolute; top: 50%; left: 6px; right: 6px; display: flex; justify-content: space-between; pointer-events: none; }
.hhm-card-gallery button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #ead8cd; border-radius: 50%; background: #fffffff0; color: #b94608; font: 24px/1 Arial,sans-serif; cursor: pointer; pointer-events: auto; }
.hhm-card-dots { position: absolute; bottom: 7px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.hhm-image-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: #ccb9ac; cursor: pointer; }
.hhm-image-dot[aria-pressed="true"] { width: 20px; background: #f66b15; }
.hhm-card-data-note { margin: 0; color: #8b715e; font-size: 10px; line-height: 1.5; }
.hhm-card-selection-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hhm-purchase-preview { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 28px; border: 1px solid #f0d9c9; border-radius: 18px; color: #292929; font-family: "Segoe UI",Arial,sans-serif; box-shadow: 0 24px 80px #0003; }
.hhm-purchase-preview::backdrop { background: #17171780; }
.hhm-preview-close { float: right; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff1e7; color: #b94608; font-size: 24px; cursor: pointer; }
.hhm-preview-eyebrow { color: #b94608; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.hhm-purchase-preview h2 { margin: 16px 0; font-size: 21px; line-height: 1.5; }
.hhm-preview-option { font-size: 15px; }
.hhm-preview-price { display: block; color: #df570e; font-size: 22px; margin: 12px 0; }
.hhm-preview-note { color: #857970; font-size: 12px; line-height: 1.6; margin-bottom: 20px; }
.hhm-product-card button:focus-visible, .hhm-purchase-preview :focus-visible { outline: 2px solid #c44809; outline-offset: 2px; }
.hhm-product-card .hhm-card-action, .hhm-preview-continue { text-decoration: none !important; opacity: 1 !important; }
.hhm-product-card .hhm-card-action:focus, .hhm-preview-continue:focus { color: #c44809; }
.hhm-product-card .hhm-card-action:hover,.hhm-product-card .hhm-card-action:focus,.hhm-product-card .hhm-card-action:active,.hhm-product-card .hhm-card-action:visited {color:#a83c08!important;background:#ffe1cb;border-color:#ed995f;}
.hhm-product-card .hhm-card-action[aria-busy=true] {cursor:progress;background:#ffeadb;color:#a83c08!important;}
#hhm-demo-header #items_in_cart {display:grid!important;}
.hhm-cart-flight {position:fixed;width:64px;height:64px;background:#fff;border:2px solid #f66b15;box-shadow:0 6px 22px #7b370a33;overflow:hidden;z-index:2147483000;pointer-events:none;will-change:transform;}
.hhm-cart-flight img {display:block;width:100%;height:100%;object-fit:contain;}
.hhm-cart-toast {position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);max-width:min(560px,calc(100vw - 32px));padding:14px 20px;border:1px solid #f6c39f;border-radius:14px;background:#fff8f1;color:#77370e;font:600 14px/1.5 'Segoe UI',Arial,sans-serif;box-shadow:0 6px 26px #0002;opacity:0;visibility:hidden;z-index:1200;pointer-events:none;transition:opacity .2s,transform .2s;}
.hhm-cart-toast.is-visible {opacity:1;visibility:visible;transform:translate(-50%,0);}
@media(max-width:600px) {.hhm-cart-toast {bottom:100px;}}
@media(prefers-reduced-motion:reduce) {.hhm-cart-toast {transition:none;}}
@media (max-width: 600px) {
    .hhm-color-button, .hhm-option-button { padding: 7px; font-size: 11px; margin-right: 3px; }
    .hhm-card-gallery button { width: 28px; height: 28px; }
    .hhm-card-rating { font-size: 10px; }
}