/* Pocket Monster native patterns. Brand colours; product cards shared with Botiga archives. */
.pm-commerce-section {
  box-sizing: border-box; width: 100%; max-width: 1120px; margin: 64px auto; color: var(--pm-white);
}
.pm-commerce-heading { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; margin-bottom: 24px; }
.pm-commerce-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(24px, 3vw, 34px); }
.pm-commerce-heading > .wp-block-buttons { flex-shrink: 0; margin: 0; }
.pm-commerce-heading .pm-rail-all .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 20px; border: 2px solid var(--pm-yellow); border-radius: var(--pm-radius-button);
  background: var(--pm-yellow); color: var(--pm-black); font-size: 15px; font-weight: 900; line-height: 1.3;
  white-space: nowrap; text-decoration: none;
}
.pm-commerce-heading .pm-rail-all .wp-block-button__link:hover { background: var(--pm-yellow-hover); border-color: var(--pm-yellow-hover); color: var(--pm-black); }
.pm-commerce-heading .pm-rail-all .wp-block-button__link:focus-visible { outline: 2px solid var(--pm-white); outline-offset: 3px; }
/* Keep older inserted versions usable; new patterns use a native Button block. */
.pm-commerce-heading p { margin: 0; }
.pm-commerce-heading p a { color: var(--pm-yellow); text-underline-offset: 4px; }
.pm-product-rail .woocommerce { position: relative; }
.pm-product-rail .woocommerce ul.products {
  width: 100%; max-width: 100%; float: none; clear: both; box-sizing: border-box;
  display: grid; grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 96px) / 4.2); gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scroll-padding: 2px; padding: 2px 2px 20px; margin: 0;
  scrollbar-color: var(--pm-yellow) var(--pm-grey-dark); scrollbar-width: thin;
}
.pm-product-rail .woocommerce ul.products::-webkit-scrollbar { height: 6px; }
.pm-product-rail .woocommerce ul.products::-webkit-scrollbar-track { background: var(--pm-grey-dark); border-radius: 3px; }
.pm-product-rail .woocommerce ul.products::-webkit-scrollbar-thumb { background: var(--pm-yellow); border-radius: 3px; }
.pm-product-rail .woocommerce ul.products::before,
.pm-product-rail .woocommerce ul.products::after { display: none; }
.pm-product-rail .woocommerce ul.products li.product { width: auto; min-width: 0; float: none; margin: 0; scroll-snap-align: start; }
/* Reserve the thumbnail slot before lazy images load, including Botiga's hover image. */
.pm-product-rail .woocommerce ul.products li.product .loop-image-wrap { aspect-ratio: 2 / 3; }
.pm-product-rail .woocommerce ul.products li.product .loop-image-wrap > a.woocommerce-loop-product__link { display: block; height: 100%; }
.pm-product-rail .woocommerce ul.products li.product .loop-image-wrap img { width: 100%; height: 100%; object-fit: contain; }

.pm-product-rail ul.products:focus-visible,
.pm-rail-controls button:focus-visible { outline: 2px solid var(--pm-yellow); outline-offset: 3px; }
.pm-product-rail ul.products li.product:focus-within .loop-button-wrap,
.pm-product-rail ul.products li.product:focus-within .botiga-wishlist-button { opacity: 1; visibility: visible; }
.pm-product-rail .woocommerce .pm-rail-controls {
  position: absolute; z-index: 5; top: var(--pm-rail-arrow-y, 100px); left: 10px; right: 10px;
  transform: translateY(-50%); display: flex; width: auto; justify-content: space-between;
  margin: 0; pointer-events: none;
}
.pm-rail-controls button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--pm-yellow); color: var(--pm-black);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pm-black) 20%, transparent); pointer-events: auto;
}
.pm-rail-controls button::before, .pm-rail-controls button::after { display: none; }
.pm-rail-controls button:hover { background: var(--pm-yellow-hover); color: var(--pm-black); }
.pm-rail-controls button:disabled { opacity: 0; pointer-events: none; }
.pm-rail-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.pm-product-rail .woocommerce .pm-rail-controls[hidden] { display: none; }
/* Existing .columns-4 typography rules must not create newspaper columns. */
.pm-product-rail .woocommerce, .pm-product-rail .woocommerce ul.products { columns: auto; }
.pm-commerce-eyebrow { color: var(--pm-yellow); font-size: 14px; font-weight: 900; letter-spacing: .04em; }
/* One lightweight mask per benefit; SVG black supplies alpha, visible colour uses the global token. */
.pm-commerce-section.pm-benefits { padding: 24px; background: var(--pm-blue); border-radius: 12px; }
.pm-benefits > h2 { margin: 0; padding: 0 0 24px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; color: var(--pm-white); }
.pm-benefits > .wp-block-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; border: 0; background: transparent; }
.pm-benefits .pm-benefit { position: relative; box-sizing: border-box; min-width: 0; margin: 0; padding: 24px 20px 24px 64px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--pm-black) 20%, transparent); }
.pm-benefits .pm-benefit::before {
  content: ""; position: absolute; top: 25px; left: 22px; display: block; width: 28px; height: 28px; margin: 0; border-radius: 0;
  background: var(--pm-yellow); -webkit-mask: var(--pm-benefit-icon) center / contain no-repeat; mask: var(--pm-benefit-icon) center / contain no-repeat;
}
.pm-benefits .pm-benefit::after { content: none; }
.pm-benefits h3 { color: var(--pm-white); margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 900; }
.pm-benefits p { color: var(--pm-white); font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; }
.pm-benefits p a { display: inline-flex; align-items: flex-start; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.pm-benefits p a:hover { color: var(--pm-yellow); }
.pm-benefits p a:focus-visible { outline: 2px solid var(--pm-yellow); outline-offset: 3px; }
.pm-commerce-section.pm-benefits--dark { background: var(--pm-black); }
.pm-benefits--dark .pm-benefit { background: var(--pm-dark); border-top: 3px solid var(--pm-blue); }
.pm-benefit--price { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013l-7%207L3%2010V3h7z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--return { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204v6h6M3%2010a9%209%200%201%201%202%209%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--store { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h18l-2-6H5zM4%209v12h16V9M9%2021v-7h6v7%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--star { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--chat { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h14a2%202%200%200%201%202%202v11a2%202%200%200%201-2%202H8l-5%203V5a2%202%200%200%201%202-2Z%22%2F%3E%3Cpath%20d%3D%22M7%208h10M7%2012h7%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--trustpilot { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.8%205.7%206.2.9-4.5%204.4%201.1%206.2-5.6-3-5.6%203%201.1-6.2L3%209.6l6.2-.9z%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--gift { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M5%2012v9h14v-9M12%208v13M12%208H8a3%203%200%201%201%203-3l1%203Zm0%200h4a3%203%200%201%200-3-3l-1%203Z%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--cards { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%2212%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%207v14h12%22%2F%3E%3C%2Fsvg%3E"); }
.pm-benefit--heart { --pm-benefit-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E"); }

.pm-store-panel { padding: 32px; background: var(--pm-black); border-radius: 8px; }
.pm-store-panel > .wp-block-columns { align-items: center; gap: 40px; margin: 0; }
.pm-store-panel .wp-block-image { margin: 0; }
.pm-store-panel img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pm-store-panel h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 20px; }
.pm-store-panel .wp-block-button__link { white-space: normal; }
/* Specificity deliberately exceeds Gutenberg's .has-global-padding reset. */
.pm-commerce-section.pm-guide-note { padding: 32px 40px; background: var(--pm-grey-dark); border-left: 5px solid var(--pm-yellow); border-radius: 0 8px 8px 0; }
.pm-guide-note h2 { font-size: clamp(24px, 3vw, 30px); }
.pm-guide-note p:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
  .pm-product-rail .woocommerce ul.products { grid-auto-columns: calc((100% - 72px) / 3.2); }
  .pm-benefits > .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .pm-commerce-section { margin-top: 40px; margin-bottom: 40px; }
  .pm-product-rail .woocommerce ul.products { grid-auto-columns: 44%; gap: 16px; }
  .pm-commerce-heading { gap: 12px; }
  .pm-commerce-heading h2 { font-size: 24px; }
  .pm-commerce-heading .pm-rail-all .wp-block-button__link { padding: 10px 14px; font-size: 14px; }
  .pm-store-panel { padding: 24px; }
  .pm-benefits > h2 { padding: 0 0 24px; }
  .pm-commerce-section.pm-guide-note { padding: 28px 24px 28px 30px; }
  .pm-store-panel > .wp-block-columns { gap: 24px; }
}
@media (max-width: 575px) {
  .pm-product-rail .woocommerce ul.products { grid-auto-columns: calc((100% - 24px) / 2.1); gap: 12px; }
  .pm-benefits > .wp-block-columns { grid-template-columns: 1fr; }
  .pm-benefits .pm-benefit { padding: 20px 20px 20px 64px; }
  .pm-benefits .pm-benefit::before { top: 21px; }
  .pm-benefits h3 { font-size: 17px; }
}
@media (max-width: 359px) {
  /* Two readable cards take priority over a third-card hint on very narrow screens. */
  .pm-product-rail .woocommerce ul.products { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 340px) {
  .pm-commerce-heading { flex-wrap: wrap; }
  .pm-commerce-heading h2 { flex-basis: 100%; }
}
/* Isolated draft preview has no normal WordPress body classes. */
body.pm-block-library-mobile-preview { background: var(--pm-dark); color: var(--pm-white); }
body.pm-block-library-preview-page .pm-commerce-section,
body.pm-block-library-mobile-preview .pm-commerce-section { width: calc(100% - 48px); }