/*
Theme Name: Плексик для бизнеса
Description: Корпоративные подарки Плексик
Version: 1.0
*/
:root{--ink:#202b36;--muted:#465765;--paper:#faf8f3;--clay:#f0e9df;--purple:#563a9c;--aqua:#dbefe8;--line:#d8d5ce;--width:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.5 'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}p,figure,h1,h2,h3{margin:0}a{color:inherit}button{font:inherit}img{max-width:100%;height:auto;display:block}
a:focus-visible,button:focus-visible{outline:3px solid #bd5415;outline-offset:4px}.skip{position:absolute;left:12px;top:-100px;z-index:5;background:white;padding:8px 14px}.skip:focus{top:10px}
.mast{border-bottom:1px solid var(--line)}.mast-inner,.foot,.hero,.portfolio,.brief,.absent{max-width:var(--width);margin-inline:auto;padding-inline:clamp(20px,5vw,70px)}.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px}.brand img{width:112px;max-height:58px;object-fit:contain}.mast nav,.foot{display:flex;align-items:center;gap:30px}.mast nav a,.foot a{text-decoration:none}.mast nav a:hover,.foot a:hover{text-decoration:underline}.nav-contact{border:1px solid var(--ink);padding:9px 14px;border-radius:99px;font-weight:600;font-size:15px}.nav-contact span{margin-left:6px}.nav-work{font-size:15px}
.hero{display:grid;grid-template-columns:1.05fr 0.95fr;align-items:center;gap:clamp(28px,5vw,76px);padding-block:clamp(38px,5.8vw,82px)}.intro{max-width:620px}
h1,h2,h3{font-weight:690;line-height:1.04;letter-spacing:-.05em;text-wrap:balance}h1{font-size:clamp(42px,4.55vw,70px);overflow-wrap:break-word}h2{font-size:clamp(34px,4vw,55px)}h3{font-size:clamp(23px,2.3vw,31px);letter-spacing:-.04em}.intro p{font-size:clamp(18px,1.5vw,22px);line-height:1.52;max-width:36em;color:var(--muted);margin-block:22px 28px}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}.wp-block-button__link,.wp-element-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 24px;font-size:16px;line-height:1.35;font-weight:650;text-decoration:none;border-radius:99px;background:var(--purple);color:white}.wp-block-button__link:hover{background:#44297f;color:white}.wp-block-image{margin:0}.portrait{position:relative;isolation:isolate;padding:11px;background:#ffe187;border-radius:46% 46% 22px 22px}.portrait img{width:100%;height:clamp(330px,39vw,510px);object-fit:cover;object-position:50% 51%;border-radius:46% 46% 15px 15px}
.portfolio{padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--line)}.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:30px}.case img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:18px}.case:nth-child(2) img{object-position:50% 55%}.case h3{margin:20px 0 9px}.case p,.brief p{color:var(--muted)}
.brief{padding-block:0 clamp(40px,6vw,82px)}.brief-box{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:clamp(22px,5vw,70px);padding:clamp(24px,5vw,62px);border-radius:25px;background:var(--aqua)}.brief-box h2{max-width:11em}.brief-copy p+p{margin-top:12px}.brief-copy .wp-block-buttons{margin-top:22px}
.foot{border-top:1px solid var(--line);font-size:14px;color:var(--muted);padding-block:23px;flex-wrap:wrap}.foot span{margin-right:auto}.cookie-settings,.consent [data-choice=deny]{background:transparent;color:var(--muted);border:0;text-decoration:underline;cursor:pointer}.cookie-settings{font-size:14px}.consent{position:fixed;z-index:5;right:16px;bottom:16px;width:min(390px,calc(100% - 32px));padding:15px 18px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px #23312321;font-size:14px}.consent div{display:flex;align-items:center;gap:16px;margin-top:8px}.consent button{cursor:pointer;padding:5px 10px;border-radius:8px;border:none}.consent [data-choice=allow]{color:white;background:#374754}.absent{padding-block:70px}
@media(max-width:760px){.mast-inner{min-height:66px}.brand img{width:92px}.hero,.brief-box{grid-template-columns:1fr}.intro{max-width:none}.portrait{max-width:540px;width:100%;margin-inline:auto}.portrait img{height:auto;aspect-ratio:1.22;object-position:50% 53%}.cases{grid-template-columns:1fr;gap:28px}.case img{aspect-ratio:1.7}.case h3{margin-top:12px}.foot{gap:10px 20px}.nav-work{display:none}.brief-box h2{max-width:none}}@media(max-width:380px){h1{font-size:35px}.mast-inner{gap:6px}.nav-contact{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Classic WordPress inserts an extra layout wrapper around Group blocks. */
.hero > .wp-block-group__inner-container,.cases > .wp-block-group__inner-container,.brief-box > .wp-block-group__inner-container{display:contents}
.corp-benefits,.corp-case{max-width:var(--width);margin-inline:auto;padding-inline:clamp(20px,5vw,70px)}
.corp-benefits{border-top:1px solid var(--line);padding-block:clamp(35px,5vw,65px)}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,46px);margin-top:30px}
.benefit-grid>.wp-block-group__inner-container{display:contents}
.benefit h3{font-size:clamp(22px,2vw,29px);letter-spacing:-.035em}
.benefit p,.sales-story p{margin-top:12px;color:var(--muted)}
.corp-case{padding-bottom:clamp(35px,5vw,65px)}
.sales-story{padding:clamp(24px,4vw,48px);background:#ffe187;border-radius:24px}
.sales-story h2{max-width:23ch;font-size:clamp(30px,3.5vw,48px)}
.sales-story p{max-width:66ch}
.sales-result{margin-top:22px;display:inline-block;max-width:100%;padding:14px clamp(18px,3vw,34px);background:#fffaf0;border-radius:28px}
.sales-result p{margin:0;color:#362455;font-weight:650;line-height:1.45}
@media(max-width:760px){.benefit-grid{grid-template-columns:1fr}.sales-result{border-radius:20px}}
.mast{position:relative;z-index:2}
.mast .store-desktop{max-width:var(--width);margin:auto;padding:0 clamp(20px,5vw,70px) 11px;gap:12px 24px;flex-wrap:wrap;font-size:15px}
.mast .store-desktop a{padding:4px 0}.store-mobile{display:none}
.sales-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(14px,1.6vw,22px);align-items:center}
.sales-story>.wp-block-group__inner-container,.sales-photos>.wp-block-group__inner-container{display:contents}
.sales-photos{display:grid;grid-template-columns:minmax(0,calc(66.666667% - 1.666667px)) minmax(0,1fr);gap:4px;min-width:0}
.sales-photos .wp-block-image:first-of-type{grid-row:span 2}
.sales-photos figure{min-width:0;min-height:0;margin:0}
.sales-photos a,.sales-photos img{display:block;width:100%;height:auto}
.sales-photos a img{object-fit:contain;border-radius:0;background:transparent}.sales-photos a{cursor:zoom-in}
@media(max-width:760px){
 .mast .store-desktop{display:none}.store-mobile{display:block;margin-left:auto}
 .store-mobile summary{display:list-item;cursor:pointer;font-weight:600;padding:8px 3px;font-size:15px}
 .mast .store-mobile nav{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding:12px 20px 18px;background:var(--paper);border-block:1px solid var(--line);box-shadow:0 12px 18px #202b3610}
 .store-mobile nav a{padding:10px 0;font-size:15px}.store-mobile summary:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
 .sales-story{grid-template-columns:1fr}
}

/* Compact first screen and photo framing */
:root{--line:#dddcd0}
.mast{border-bottom-color:#d9d8cd}.mast-inner{min-height:54px}.mast .store-desktop{padding-bottom:6px}
.mast nav a.pl-header-channel{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:24px;text-decoration:none}
.mast nav a.pl-header-channel svg{display:block;height:.847em;height:1.21cap;width:auto;flex:none}
.mast .pl-header-channel:focus-visible{outline:2px solid #006b68;outline-offset:2px}
.hero{padding-block:12px 22px;gap:clamp(18px,3vw,42px)}
.hero h1{font-size:clamp(34px,3.9vw,59px)}
.intro p{margin-block:12px 16px;font-size:clamp(16px,1.4vw,20px)}
.portrait{justify-self:center;width:min(100%,48svh);padding:6px;border-radius:20px}
.portrait img{width:100%;height:auto;aspect-ratio:auto;max-height:56svh;object-fit:contain;border-radius:15px}
.corp-benefits,.portfolio{padding-block:clamp(24px,3vw,40px)}
.corp-case,.brief{padding-bottom:clamp(22px,3vw,38px)}
.cases,.benefit-grid{margin-top:18px}
.brief-box{padding:clamp(18px,3vw,34px)}
.sales-story{padding:clamp(12px,1.4vw,20px)}
.sales-result h3{font-size:18px;letter-spacing:normal;margin-bottom:5px}
.wp-block-button__link[href^="https://t.me/"]{gap:9px}
.wp-block-button__link[href^="https://t.me/"]::before{content:"";width:19px;height:19px;flex:none;background:currentColor;clip-path:polygon(0 45%,100% 5%,81% 94%,52% 73%,40% 86%,43% 65%,83% 23%,32% 58%)}
.case figure{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;aspect-ratio:4/3;background:#ebe7dc}
.case figure::before{position:absolute;content:"";inset:-16px;z-index:-1;background:var(--case-image) center/cover;filter:blur(16px);opacity:.68}
.case img,.case:nth-child(2) img{height:100%;width:100%;object-fit:contain;aspect-ratio:auto;object-position:center;border-radius:0}
.case:has(img[src*="/box."]){--case-image:url("/wp-content/uploads/2026/11/box.jpg")}
.case:has(img[src*="/coffee."]){--case-image:url("/wp-content/uploads/2026/11/coffee.jpg")}
.case:has(img[src*="/architecture."]){--case-image:url("/wp-content/uploads/2026/11/architecture.jpg")}
@media(max-width:760px){.hero{gap:12px;padding-block:10px 18px}.hero h1{font-size:clamp(30px,7.5vw,42px)}.portrait{width:auto;max-width:100%}.portrait img{max-height:clamp(130px,32svh,280px);width:auto}.intro p{margin:8px 0 12px}.mast-inner{min-height:50px}.case figure{aspect-ratio:4/3}}
.sales-result > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
}
.sales-result h3 { grid-column: 1; grid-row: 1; margin: 0; }
.sales-result p { grid-column: 1 / -1; grid-row: 2; }
.sales-result .win-win { grid-column: 2; grid-row: 1; margin: 0; }
.sales-result .win-win a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 .85em;
  border-radius: 10px;
  background: #3045ef;
  color: #fff;
  font-size: clamp(17px, 1.45vw, 20px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-decoration: none;
}
.sales-result .win-win a:hover { background: #2537cb; }
.sales-result .win-win a:focus-visible { outline: 2px solid #202b36; outline-offset: 3px; }
.design-offer{max-width:var(--width);margin:0 auto;padding:0 clamp(20px,5vw,70px) 14px}
.design-offer>.wp-block-group__inner-container,.panorama-gallery>.wp-block-group__inner-container{display:grid;gap:clamp(12px,2vw,24px)}
.design-offer>.wp-block-group__inner-container{grid-template-columns:repeat(3,minmax(0,1fr))}
.design-offer p{margin:0;line-height:1.4}
.panorama-project{margin-top:clamp(22px,3vw,40px)}
.panorama-gallery{margin-top:14px}
.panorama-gallery>.wp-block-group__inner-container{grid-template-columns:repeat(2,minmax(0,1fr))}
.panorama-gallery figure{margin:0}
.panorama-gallery img{width:100%;height:auto;display:block}
.panorama-gallery a{display:block;cursor:zoom-in}
@media(max-width:700px){.design-offer>.wp-block-group__inner-container{grid-template-columns:1fr}.panorama-gallery>.wp-block-group__inner-container{gap:8px}}
@media(max-width:460px){.panorama-gallery>.wp-block-group__inner-container{grid-template-columns:1fr}}

:is(.intro, .benefit, .case) .gift-highlight {
  background: transparent;
  color: #151827;
  padding: 0 .12em .025em;
  border-inline: .16em solid transparent;
  border-image: var(--marker-stroke) 0 12 fill / 0 .48em / 0 stretch;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:is(.intro, .benefit, .case) .marker-yellow { --marker-stroke: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%2232%22%20viewBox%3D%220%200%20220%2032%22%3E%3Cg%20fill%3D%22%23ffda00%22%20transform%3D%22translate(0%200)%22%3E%3Cpath%20opacity%3D%22.58%22%20d%3D%22M6%206Q44%203.8%2083%204.6T169%203.8L217%203%20213%2026.1Q159%2027%20106%2026.9T13%2029.3L1%2029.6Z%22%2F%3E%3Cpath%20opacity%3D%22.89%22%20d%3D%22M8%206.6Q35%206.1%2061%205.6T118%205.8Q160%206.2%20195%204.5L219%204.1%20217%208.6%20218%209.2%20214%2023.6%20213%2025.4Q169%2024.7%20132%2025.8T55%2026.4L3%2027.6%205.6%2017.8%204.5%2018.2Z%22%2F%3E%3Cpath%20opacity%3D%22.51%22%20d%3D%22M5%209.7L52%208.3Q97%207.6%20140%208.4T217%206.9L213%2021.5Q161%2021.2%20103%2022.3L2%2025.1Z%22%2F%3E%3Cpath%20opacity%3D%22.65%22%20d%3D%22M3%2027.6Q59%2026.1%2089%2026.8L70%2027.4%201%2029.1ZM11%204.4L83%203.1%2077%203.8%2010%205.3ZM151%2026.5L213%2025.4%20211%2026.6%20154%2027.3Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.21%22%20transform%3D%22translate(0%200)%22%3E%3Cpath%20d%3D%22M5%2011.6Q28%2010.4%2067%2010.7L48%2011.1%205%2012.2ZM123%2020.4Q161%2018.9%20215%2018.7L214.7%2019.4Q168%2019.2%20123%2020.4ZM3%2023.3L49%2022.1%2033%2022.8%203%2024Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:is(.intro, .benefit, .case) .marker-red { --marker-stroke: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%2232%22%20viewBox%3D%220%200%20220%2032%22%3E%3Cg%20fill%3D%22%23ff4743%22%20transform%3D%22translate(0%201.3)%22%3E%3Cpath%20opacity%3D%22.58%22%20d%3D%22M6%206Q44%203.8%2083%204.6T169%203.8L217%203%20213%2026.1Q159%2027%20106%2026.9T13%2029.3L1%2029.6Z%22%2F%3E%3Cpath%20opacity%3D%22.89%22%20d%3D%22M8%206.6Q35%206.1%2061%205.6T118%205.8Q160%206.2%20195%204.5L219%204.1%20217%208.6%20218%209.2%20214%2023.6%20213%2025.4Q169%2024.7%20132%2025.8T55%2026.4L3%2027.6%205.6%2017.8%204.5%2018.2Z%22%2F%3E%3Cpath%20opacity%3D%22.51%22%20d%3D%22M5%209.7L52%208.3Q97%207.6%20140%208.4T217%206.9L213%2021.5Q161%2021.2%20103%2022.3L2%2025.1Z%22%2F%3E%3Cpath%20opacity%3D%22.65%22%20d%3D%22M3%2027.6Q59%2026.1%2089%2026.8L70%2027.4%201%2029.1ZM11%204.4L83%203.1%2077%203.8%2010%205.3ZM151%2026.5L213%2025.4%20211%2026.6%20154%2027.3Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.21%22%20transform%3D%22translate(0%201.3)%22%3E%3Cpath%20d%3D%22M5%2011.6Q28%2010.4%2067%2010.7L48%2011.1%205%2012.2ZM123%2020.4Q161%2018.9%20215%2018.7L214.7%2019.4Q168%2019.2%20123%2020.4ZM3%2023.3L49%2022.1%2033%2022.8%203%2024Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:is(.intro, .benefit, .case) .marker-blue { --marker-stroke: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%2232%22%20viewBox%3D%220%200%20220%2032%22%3E%3Cg%20fill%3D%22%2322c5ff%22%20transform%3D%22translate(0%20-0.6)%22%3E%3Cpath%20opacity%3D%22.58%22%20d%3D%22M6%206Q44%203.8%2083%204.6T169%203.8L217%203%20213%2026.1Q159%2027%20106%2026.9T13%2029.3L1%2029.6Z%22%2F%3E%3Cpath%20opacity%3D%22.89%22%20d%3D%22M8%206.6Q35%206.1%2061%205.6T118%205.8Q160%206.2%20195%204.5L219%204.1%20217%208.6%20218%209.2%20214%2023.6%20213%2025.4Q169%2024.7%20132%2025.8T55%2026.4L3%2027.6%205.6%2017.8%204.5%2018.2Z%22%2F%3E%3Cpath%20opacity%3D%22.51%22%20d%3D%22M5%209.7L52%208.3Q97%207.6%20140%208.4T217%206.9L213%2021.5Q161%2021.2%20103%2022.3L2%2025.1Z%22%2F%3E%3Cpath%20opacity%3D%22.65%22%20d%3D%22M3%2027.6Q59%2026.1%2089%2026.8L70%2027.4%201%2029.1ZM11%204.4L83%203.1%2077%203.8%2010%205.3ZM151%2026.5L213%2025.4%20211%2026.6%20154%2027.3Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.21%22%20transform%3D%22translate(0%20-0.6)%22%3E%3Cpath%20d%3D%22M5%2011.6Q28%2010.4%2067%2010.7L48%2011.1%205%2012.2ZM123%2020.4Q161%2018.9%20215%2018.7L214.7%2019.4Q168%2019.2%20123%2020.4ZM3%2023.3L49%2022.1%2033%2022.8%203%2024Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
:is(.intro, .benefit, .case) .marker-green { --marker-stroke: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%2232%22%20viewBox%3D%220%200%20220%2032%22%3E%3Cg%20fill%3D%22%2323e797%22%20transform%3D%22translate(0%200.7)%22%3E%3Cpath%20opacity%3D%22.58%22%20d%3D%22M6%206Q44%203.8%2083%204.6T169%203.8L217%203%20213%2026.1Q159%2027%20106%2026.9T13%2029.3L1%2029.6Z%22%2F%3E%3Cpath%20opacity%3D%22.89%22%20d%3D%22M8%206.6Q35%206.1%2061%205.6T118%205.8Q160%206.2%20195%204.5L219%204.1%20217%208.6%20218%209.2%20214%2023.6%20213%2025.4Q169%2024.7%20132%2025.8T55%2026.4L3%2027.6%205.6%2017.8%204.5%2018.2Z%22%2F%3E%3Cpath%20opacity%3D%22.51%22%20d%3D%22M5%209.7L52%208.3Q97%207.6%20140%208.4T217%206.9L213%2021.5Q161%2021.2%20103%2022.3L2%2025.1Z%22%2F%3E%3Cpath%20opacity%3D%22.65%22%20d%3D%22M3%2027.6Q59%2026.1%2089%2026.8L70%2027.4%201%2029.1ZM11%204.4L83%203.1%2077%203.8%2010%205.3ZM151%2026.5L213%2025.4%20211%2026.6%20154%2027.3Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22white%22%20opacity%3D%22.21%22%20transform%3D%22translate(0%200.7)%22%3E%3Cpath%20d%3D%22M5%2011.6Q28%2010.4%2067%2010.7L48%2011.1%205%2012.2ZM123%2020.4Q161%2018.9%20215%2018.7L214.7%2019.4Q168%2019.2%20123%2020.4ZM3%2023.3L49%2022.1%2033%2022.8%203%2024Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }



.portfolio .case h3 { font-size: clamp(18px, 1.55vw, 21px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.intro { min-width: 0; }
.product-strip {
  width: 100%;
  margin: 12px 0;
  scroll-margin-top: 1rem;
}
.product-strip.has-controls {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 6px;
}
.product-strip > .wp-block-group__inner-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 7);
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  position: relative;
  margin: 0;
}
.product-strip.has-controls > .wp-block-group__inner-container { scrollbar-width: none; }
.product-strip figure { margin: 0; min-width: 0; scroll-snap-align: start; }
.product-strip figure a { display: block; overflow: hidden; border-radius: 10px; background: #f3e9d8; }
.product-strip img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; }
.product-strip a:focus-visible { outline: 3px solid #563a9c; outline-offset: -3px; }
.product-strip button {
  display: grid; place-items: center; padding: 0; width: 32px; height: 42px;
  background: transparent; color: #382549; border: 0; border-radius: 8px; cursor: pointer;
}
.product-strip button::before { content: ""; width: 9px; height: 9px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
.product-strip .strip-prev::before { transform: rotate(-135deg); }
.product-strip button:disabled { opacity: .3; cursor: default; }
.product-strip button:enabled:hover { background: #ffe187; }
@media (max-width: 760px) {
  .product-strip { margin-block: 10px; }
  .product-strip.has-controls { gap: 2px; }
  .product-strip button { width: 26px; }
  .product-strip > .wp-block-group__inner-container { grid-auto-columns: calc((100% - 12px) / 3); gap: 6px; }
}

.intro p.collection-bubble {
  background: #e2f2ec;
  color: #133925;
  border-radius: 20px;
  padding: 5px 12px;
  margin-block: .5em .85em;
}
.case:has(.flat-white-film) { --case-image: url("/wp-content/uploads/2026/11/coffee.jpg"); }
.case .flat-white-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
.flat-white-film .coffee-play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  display: grid; place-items: center; border: 0; cursor: pointer; background: transparent;
}
.flat-white-film .coffee-play::before, .flat-white-film .coffee-play::after { content: ""; grid-area: 1/1; }
.flat-white-film .coffee-play::before {
  width: clamp(48px, 5vw, 68px); aspect-ratio: 1; border-radius: 50%; transform: scale(calc(2 / 3));
  background: rgba(255,253,243,.95); border: 2px solid #007d78;
}
.flat-white-film .coffee-play::after { width: 0; height: 0; border: 9px solid transparent; border-left: 15px solid #007d78; border-right: 0; transform: translateX(2px); }
.flat-white-film .coffee-play:focus-visible { outline: 3px solid #007d78; outline-offset: -4px; }
.flat-white-film .coffee-play[hidden] { display: none; }