{"product_id":"dr-coffee-m12-plus-automatic-coffee-machine","title":"Dr Coffee M12 Plus Automatic Coffee Machine","description":"\u003c!--\n  ============================================================================\n  DR. COFFEE M12 PLUS — product copy\n\n  Self-contained: markup, styles and behaviour in one file, no dependencies.\n\n  Accordion notes:\n    - Progressive enhancement. Without JavaScript every panel renders open —\n      the collapse rules are gated behind [data-acc-ready], which only the\n      script sets. Nothing is hidden from a crawler or a reader with JS off.\n    - Groups nest. Each group only ever controls its own direct items, so the\n      FAQ group inside the \"Frequently Asked Questions\" panel behaves\n      independently of the outer one.\n    - Add data-acc-single to a group to make it exclusive (opening one closes\n      its siblings). Left off here so readers can compare panels side by side.\n    - Add data-acc-open to an item to have it start expanded.\n  ============================================================================\n--\u003e\n\n\u003cdiv class=\"prod\"\u003e\n  \u003cp class=\"prod__lede\" style=\"margin:0;\"\u003eCoffee. Expertly Prescribed.\u003c\/p\u003e\n  \u003cp style=\"margin:0;\"\u003e\n    The Dr Coffee M12 Plus delivers café-quality results with precision and\n    consistency, cup after cup. Compact, reliable and effortless to use, it’s\n    coffee, expertly prescribed.\n  \u003c\/p\u003e\n\n  \u003cp style=\"margin:0;\"\u003e\n    With UCC’s support behind it, the M12 Plus turns any out-of-home outlet\n    into a profitable coffee destination.\n  \u003c\/p\u003e\n\n  \u003cdiv class=\"acc\" data-acc\u003e\n\n    \u003c!-- ---------------------------------------------------------------- --\u003e\n    \u003cdiv class=\"acc__item\" data-acc-item\u003e\n      \u003ch2 class=\"acc__heading\"\u003e\n        \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger id=\"acc-t-features\" aria-controls=\"acc-p-features\" aria-expanded=\"false\"\u003e\n          \u003cspan class=\"acc__label\"\u003eKey Features\u003c\/span\u003e\n          \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n            \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n          \u003c\/svg\u003e\n        \u003c\/button\u003e\n      \u003c\/h2\u003e\n      \u003cdiv class=\"acc__panel\" data-acc-panel id=\"acc-p-features\" aria-labelledby=\"acc-t-features\"\u003e\n        \u003cdiv class=\"acc__inner\"\u003e\n          \u003cul class=\"prod__list\"\u003e\n            \u003cli\u003eDual-boiler system\u003c\/li\u003e\n            \u003cli\u003eAutomatic cleaning system\u003c\/li\u003e\n            \u003cli\u003eRemote control management\u003c\/li\u003e\n            \u003cli\u003eCustomisable drink options\u003c\/li\u003e\n            \u003cli\u003eBuilt-in telemetry\u003c\/li\u003e\n            \u003cli\u003eTouch-screen interface\u003c\/li\u003e\n            \u003cli\u003eTemperature controlled milk foam system\u003c\/li\u003e\n            \u003cli\u003eGreat capacity\u003c\/li\u003e\n            \u003cli\u003eCompatible with SC08 fridge\u003c\/li\u003e\n            \u003cli\u003e60–70 ˚C milk frothing temperature\u003c\/li\u003e\n          \u003c\/ul\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- ---------------------------------------------------------------- --\u003e\n    \u003cdiv class=\"acc__item\" data-acc-item\u003e\n      \u003ch2 class=\"acc__heading\"\u003e\n        \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger id=\"acc-t-specs\" aria-controls=\"acc-p-specs\" aria-expanded=\"false\"\u003e\n          \u003cspan class=\"acc__label\"\u003eSpecifications\u003c\/span\u003e\n          \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n            \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n          \u003c\/svg\u003e\n        \u003c\/button\u003e\n      \u003c\/h2\u003e\n      \u003cdiv class=\"acc__panel\" data-acc-panel id=\"acc-p-specs\" aria-labelledby=\"acc-t-specs\"\u003e\n        \u003cdiv class=\"acc__inner\"\u003e\n          \u003cdl class=\"prod__specs\"\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eDisplay screen size\u003c\/dt\u003e\n              \u003cdd\u003e10 inch\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eCapacity\u003c\/dt\u003e\n              \u003cdd\u003e100 cups per day\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eDimensions\u003c\/dt\u003e\n              \u003cdd\u003eW 63cm × D 50cm × H 58cm\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eWater tank\u003c\/dt\u003e\n              \u003cdd\u003e8L\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eWeight\u003c\/dt\u003e\n              \u003cdd\u003e20.5kg\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003ePower\u003c\/dt\u003e\n              \u003cdd\u003e2900W\u003c\/dd\u003e\n            \u003c\/div\u003e\n            \u003cdiv class=\"prod__spec\"\u003e\n              \u003cdt\u003eHopper capacity\u003c\/dt\u003e\n              \u003cdd\u003e1200g\u003c\/dd\u003e\n            \u003c\/div\u003e\n          \u003c\/dl\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- ---------------------------------------------------------------- --\u003e\n    \u003cdiv class=\"acc__item\" data-acc-item\u003e\n      \u003ch2 class=\"acc__heading\"\u003e\n        \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger id=\"acc-t-faqs\" aria-controls=\"acc-p-faqs\" aria-expanded=\"false\"\u003e\n          \u003cspan class=\"acc__label\"\u003eFrequently Asked Questions\u003c\/span\u003e\n          \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n            \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n          \u003c\/svg\u003e\n        \u003c\/button\u003e\n      \u003c\/h2\u003e\n      \u003cdiv class=\"acc__panel\" data-acc-panel id=\"acc-p-faqs\" aria-labelledby=\"acc-t-faqs\"\u003e\n        \u003cdiv class=\"acc__inner\"\u003e\n\n          \u003c!-- Nested group. Its items are wired independently of the outer one. --\u003e\n          \u003cdiv class=\"acc acc--nested\" data-acc\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eWhat drinks can the Dr. Coffee M12 Plus make?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    The Dr. Coffee M12 Plus can prepare a wide range of coffee\n                    beverages, including espresso, americano, cappuccino, latte,\n                    flat white and hot milk-based drinks. Drink availability may\n                    vary depending on the machine settings and configuration.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eDoes the Dr. Coffee M12 Plus use fresh milk?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    Yes. The M12 Plus features an automatic milk system that uses\n                    fresh milk to create barista-style milk drinks with smooth,\n                    consistent foam.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eHow many drinks can the machine produce per day?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    The Dr. Coffee M12 Plus is designed for medium-volume\n                    commercial environments and is typically suitable for offices,\n                    hospitality venues and workplaces requiring around 100 cups\n                    per day.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eCan I customise drink recipes?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    Yes. Users can adjust drink settings such as coffee strength,\n                    milk volume and beverage size to create personalised recipes\n                    that suit individual preferences.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eDoes the machine have a touchscreen?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    Yes. The M12 Plus features an intuitive touchscreen display\n                    that allows users to select drinks, adjust settings and access\n                    cleaning and maintenance functions.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eWhat type of coffee beans does the machine use?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    The machine uses whole coffee beans, which are freshly ground\n                    for each drink to ensure maximum flavour and aroma. To get the\n                    most from your machine, we recommend pairing it with our\n                    Ueshima coffee beans, expertly roasted to deliver a\n                    consistently rich and balanced coffee experience.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eHow often does the machine need cleaning?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    The machine includes automatic cleaning and rinsing\n                    programmes. Daily cleaning of the milk system is recommended,\n                    while other maintenance tasks will depend on usage levels and\n                    water quality.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eDoes the Dr. Coffee M12 Plus require a mains water connection?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    The machine can be configured with either an internal water\n                    tank or a mains water supply, depending on the installation\n                    requirements.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eCan the machine be used in an office environment?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    Yes. The M12 Plus is a popular choice for offices due to its\n                    ease of use, quick drink preparation and ability to provide a\n                    variety of coffee options for employees and visitors.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n            \u003cdiv class=\"acc__item\" data-acc-item\u003e\n              \u003ch3 class=\"acc__heading\"\u003e\n                \u003cbutton type=\"button\" class=\"acc__trigger\" data-acc-trigger aria-expanded=\"false\"\u003e\n                  \u003cspan class=\"acc__label\"\u003eWhat support is available after purchase?\u003c\/span\u003e\n                  \u003csvg class=\"acc__icon\" viewbox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"\u003e\n                    \u003cpath d=\"M4 8 L12 16 L20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\u003c\/path\u003e\n                  \u003c\/svg\u003e\n                \u003c\/button\u003e\n              \u003c\/h3\u003e\n              \u003cdiv class=\"acc__panel\" data-acc-panel\u003e\n                \u003cdiv class=\"acc__inner\"\u003e\n                  \u003cp\u003e\n                    When purchasing through UCC Direct, customers have access to\n                    technical support, maintenance advice and servicing options to\n                    help keep their machine performing at its best. Get in touch\n                    to find out more.\n                  \u003c\/p\u003e\n                \u003c\/div\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n\n          \u003c\/div\u003e\n\u003c!-- \/.acc--nested --\u003e\n\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\u003c!-- \/.acc --\u003e\n\u003c\/div\u003e\u003c!-- \/.prod --\u003e\n\n\u003cstyle\u003e\n  .prod {\n    --prod-accent: #BA2F1E;\n    --prod-accent-dark: #952616;\n    --prod-ink: #1F2A30;\n    --prod-muted: #6B6F81;\n    --prod-line: #E3E5EA;\n    --prod-panel: #F7F8FA;\n    --prod-radius: 3px;\n    --acc-speed: 0.28s;\n\n    max-width: 820px;\n    margin: 0 auto;\n    color: var(--prod-ink);\n    line-height: 1.6;\n  }\n\n  .prod p { margin: 0 0 1em; }\n\n  .prod__lede {\n    font-size: 1.25em;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n    color: var(--prod-accent);\n  }\n\n  \/* ==========================================================================\n     ACCORDION\n     ========================================================================== *\/\n  \/* Base is deliberately unstyled. Borders and fills belong to the level\n     rules further down, because the two levels look nothing like each other. *\/\n  .acc { margin: 0.75em 0 0; }\n\n  \/* The heading carries no visual weight of its own — it exists so the\n     structure survives being read as a document outline. *\/\n  .acc__heading {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n  }\n\n  .acc__trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1em;\n    width: 100%;\n    margin: 0;\n    padding: 0.95em 0.25em;\n    font: inherit;\n    font-weight: 700;\n    text-align: left;\n    color: inherit;\n    background: none;\n    border: 0;\n    border-radius: var(--prod-radius);\n    cursor: pointer;\n    transition: color 0.15s ease;\n  }\n  .acc__trigger:hover { color: var(--prod-accent); }\n  .acc__trigger:focus-visible {\n    outline: 2px solid var(--prod-accent);\n    outline-offset: 2px;\n  }\n\n  .acc__icon {\n    flex: 0 0 auto;\n    width: 1.1em;\n    height: 1.1em;\n    color: var(--prod-accent);\n    transition: transform var(--acc-speed) ease;\n  }\n  .acc__item.is-open \u003e .acc__heading \u003e .acc__trigger \u003e .acc__icon {\n    transform: rotate(180deg);\n  }\n\n  \/* ==========================================================================\n     PANEL\n     0fr -\u003e 1fr animates to the content's natural height without measuring it\n     in JS, and keeps working when one accordion is nested inside another.\n     ========================================================================== *\/\n  .acc__inner { min-height: 0; margin:0 10px 0 20px; }\n  \/* Bottom breathing room has to come from a margin INSIDE the animated box.\n     Padding on .acc__inner would survive the row collapsing to 0fr and leave\n     a stripe of dead space under every closed panel. *\/\n  .acc__inner \u003e :last-child { margin-bottom: 1.1em; }\n\n  \/* Everything below is gated on the script having run — it sets\n     data-acc-ready on each group it wires up. With JS off the panels are\n     plain open blocks, fully readable and fully indexable. *\/\n  [data-acc-ready] .acc__panel {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--acc-speed) ease;\n  }\n  [data-acc-ready] .acc__inner {\n    overflow: hidden;\n    \/* Keeps collapsed content out of the tab order and the a11y tree without\n       display:none, which would kill the height transition. *\/\n    visibility: hidden;\n    transition: visibility 0s linear var(--acc-speed);\n  }\n  [data-acc-ready] .acc__item.is-open \u003e .acc__panel {\n    grid-template-rows: 1fr;\n  }\n  [data-acc-ready] .acc__item.is-open \u003e .acc__panel \u003e .acc__inner {\n    visibility: visible;\n    transition-delay: 0s;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .prod { --acc-speed: 0s; }\n    .acc__icon { transition: none; }\n  }\n\n  \/* ==========================================================================\n     LEVEL 1 — PRIMARY BARS\n     Solid accent fill, white text. One accordion nested inside another needs\n     the two levels to be obviously different, not a subtle shade apart, or a\n     reader loses track of which panel a click will collapse.\n\n     Everything is matched on the DIRECT child chain from a group that isn't\n     .acc--nested, so these rules can never leak down into the FAQ list —\n     .acc__trigger on its own would hit both levels.\n     ========================================================================== *\/\n  .acc:not(.acc--nested) \u003e .acc__item { margin-bottom: 0.4em; }\n  .acc:not(.acc--nested) \u003e .acc__item:last-child { margin-bottom: 0; }\n\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__heading \u003e .acc__trigger {\n    padding: 0.9em 1.1em;\n    color: #fff;\n    background: var(--prod-accent);\n    border-radius: var(--prod-radius);\n    transition: background 0.15s ease;\n  }\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__heading \u003e .acc__trigger:hover {\n    color: #fff;\n    background: var(--prod-accent-dark);\n  }\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__heading \u003e .acc__trigger .acc__icon {\n    color: #fff;\n  }\n  \/* Square off the bottom corners so an open bar reads as joined to its panel. *\/\n  .acc:not(.acc--nested) \u003e .acc__item.is-open \u003e .acc__heading \u003e .acc__trigger {\n    background: var(--prod-accent-dark);\n    border-radius: var(--prod-radius) var(--prod-radius) 0 0;\n  }\n  \/* A red outline is invisible on a red fill. *\/\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__heading \u003e .acc__trigger:focus-visible {\n    outline: 2px solid #fff;\n    outline-offset: -5px;\n  }\n\n  \/* Background is safe to set on a collapsed panel — it has no height, so\n     nothing shows. Vertical spacing is NOT: see the margin note above. *\/\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__panel {\n    background: var(--prod-panel);\n    border-radius: 0 0 var(--prod-radius) var(--prod-radius);\n  }\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__panel \u003e .acc__inner {\n    padding-inline: 1.1em;\n  }\n  .acc:not(.acc--nested) \u003e .acc__item \u003e .acc__panel \u003e .acc__inner \u003e :first-child {\n    margin-top: 1.1em;\n  }\n\n  \/* ==========================================================================\n     LEVEL 2 — NESTED FAQ LIST\n     Sits inside a panel that already provides the gutter, so these run flush\n     to its edges and stay on the page background.\n     ========================================================================== *\/\n  .acc--nested { margin: 0; }\n  .acc--nested \u003e .acc__item { border-bottom: 1px solid var(--prod-line); }\n  .acc--nested \u003e .acc__item:last-child { border-bottom: 0; }\n  .acc--nested \u003e .acc__item \u003e .acc__heading \u003e .acc__trigger {\n    padding: 0.75em 0;\n    font-size: 0.95em;\n    font-weight: 600;\n  }\n\n  \/* ==========================================================================\n     CONTENT\n     ========================================================================== *\/\n  .prod__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .prod__list li {\n    position: relative;\n    padding-left: 0.35em;\n    margin-bottom: 0.35em;\n  }\n  .prod__list li::before {\n    content: \"\";\n    position: absolute;\n    top: 0.62em;\n    left: 0.15em;\n    width: 0.45em;\n    height: 0.45em;\n    background: var(--prod-accent);\n    transform: rotate(45deg);\n  }\n\n  .prod__specs { margin: 0; }\n  .prod__spec {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0 1em;\n    padding: 0.55em 0;\n    border-bottom: 1px dotted var(--prod-line);\n  }\n  .prod__spec:last-child { border-bottom: 0; }\n  .prod__spec dt {\n    flex: 0 0 14em;\n    max-width: 100%;\n    font-weight: 600;\n    color: var(--prod-muted);\n  }\n  .prod__spec dd { margin: 0; }\n\n  @media (max-width: 480px) {\n    .prod__spec dt { flex-basis: 100%; }\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function () {\n    'use strict';\n\n    var GROUP = '[data-acc]';\n    var ITEM = '[data-acc-item]';\n    var uid = 0;\n\n    \/* A nested group's items also match a querySelectorAll from the outer\n       group. Ownership is decided by walking back up: an element belongs to\n       the nearest group above it, and nothing else. *\/\n    function ownedBy(scope, selector, marker) {\n      return Array.prototype.filter.call(\n        scope.querySelectorAll(selector),\n        function (el) { return el.closest(marker) === scope; }\n      );\n    }\n\n    function firstOwned(item, selector) {\n      var matches = item.querySelectorAll(selector);\n      for (var i = 0; i \u003c matches.length; i++) {\n        if (matches[i].closest(ITEM) === item) return matches[i];\n      }\n      return null;\n    }\n\n    function setOpen(item, open) {\n      var trigger = firstOwned(item, '[data-acc-trigger]');\n      if (!trigger) return;\n      item.classList.toggle('is-open', open);\n      trigger.setAttribute('aria-expanded', open ? 'true' : 'false');\n\n      \/* Closing a panel closes whatever is open inside it. An open nested item\n         sets visibility:visible on itself, which overrides the hidden it\n         inherits from the collapsed ancestor — so it would stay in the tab\n         order and the a11y tree while clipped to zero height and invisible. *\/\n      if (!open) {\n        Array.prototype.forEach.call(\n          item.querySelectorAll(ITEM + '.is-open'),\n          function (nested) { setOpen(nested, false); }\n        );\n      }\n    }\n\n    function initGroup(group) {\n      if (group.dataset.accReady === 'true') return;\n      group.dataset.accReady = 'true';\n\n      var single = group.hasAttribute('data-acc-single');\n      var items = ownedBy(group, ITEM, GROUP);\n      var triggers = [];\n\n      items.forEach(function (item) {\n        var trigger = firstOwned(item, '[data-acc-trigger]');\n        var panel = firstOwned(item, '[data-acc-panel]');\n        if (!trigger || !panel) return;\n\n        \/\/ Wire up aria-controls \/ aria-labelledby for any pair authored\n        \/\/ without ids, so the component drops into new markup as-is.\n        uid++;\n        if (!panel.id) panel.id = 'acc-panel-' + uid;\n        if (!trigger.id) trigger.id = 'acc-trigger-' + uid;\n        trigger.setAttribute('aria-controls', panel.id);\n        if (!panel.hasAttribute('aria-labelledby')) {\n          panel.setAttribute('aria-labelledby', trigger.id);\n        }\n\n        setOpen(item, item.hasAttribute('data-acc-open'));\n        triggers.push(trigger);\n\n        trigger.addEventListener('click', function () {\n          var willOpen = !item.classList.contains('is-open');\n          if (willOpen \u0026\u0026 single) {\n            items.forEach(function (other) {\n              if (other !== item) setOpen(other, false);\n            });\n          }\n          setOpen(item, willOpen);\n        });\n      });\n\n      \/* Arrow keys move between headers in this group only — Enter and Space\n         are already handled for us by using real \u003cbutton\u003e elements. *\/\n      group.addEventListener('keydown', function (e) {\n        var index = triggers.indexOf(e.target);\n        if (index === -1) return;\n\n        var next;\n        if (e.key === 'ArrowDown') next = (index + 1) % triggers.length;\n        else if (e.key === 'ArrowUp') next = (index - 1 + triggers.length) % triggers.length;\n        else if (e.key === 'Home') next = 0;\n        else if (e.key === 'End') next = triggers.length - 1;\n        else return;\n\n        e.preventDefault();\n        triggers[next].focus();\n      });\n    }\n\n    function init(scope) {\n      Array.prototype.forEach.call((scope || document).querySelectorAll(GROUP), initGroup);\n    }\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', function () { init(); });\n    } else {\n      init();\n    }\n\n    \/\/ Shopify theme editor: re-run after a section is re-rendered.\n    document.addEventListener('shopify:section:load', function (e) {\n      init(e.target);\n    });\n  })();\n\u003c\/script\u003e\n\u003cbr\u003e\u003cbr\u003e","brand":"UCC Coffee Direct","offers":[{"title":"Default Title","offer_id":56710665732482,"sku":null,"price":2999.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0610\/5304\/2933\/files\/dr-coffee.webp?v=1786094884","url":"https:\/\/www.ucc-coffee-direct.co.uk\/products\/dr-coffee-m12-plus-automatic-coffee-machine","provider":"UCC Coffee Direct","version":"1.0","type":"link"}