From 36c99b1fcc8663dcd0515509416393a601b04170 Mon Sep 17 00:00:00 2001
From: processprocess <philip.hunter.bell@gmail.com>
Date: Wed, 2 Feb 2022 15:00:44 -0600
Subject: [PATCH] spacing

---
 .../0.1/amp-story-shopping-attachment.css          | 14 ++++++++------
 .../0.1/amp-story-shopping-attachment.js           |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.css b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.css
index f63a5c1abff0a..6868c06f8d143 100644
--- a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.css
+++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.css
@@ -4,6 +4,7 @@ amp-story-shopping-attachment {
   font-family: 'Poppins', sans-serif !important;
   font-size: calc(var(--story-page-vmin) * 3) !important; /* override with ems for pixel perfect layout */
   --shopping-attachment-horizontal-padding: 1.5em;
+  --shopping-attachment-vertical-padding: 1.2em;
   --three-percent-overlay: rgba(0,0,0,.03);
 }
 
@@ -24,7 +25,7 @@ amp-story-shopping-attachment a {
 .i-amphtml-amp-story-shopping-plp-header {
   font-weight: 600 !important;
   font-size: 1.5em !important;
-  margin-bottom: 1.2em !important;
+  margin: var(--shopping-attachment-vertical-padding) 0 var(--shopping-attachment-vertical-padding) !important;
 }
 
 .i-amphtml-amp-story-shopping-plp-cards {
@@ -140,14 +141,15 @@ amp-story-shopping-attachment a {
 }
 
 .i-amphtml-amp-story-shopping-pdp-carousel {
-  display: flex;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
+  display: flex !important;
+  overflow-x: auto !important;
+  scroll-snap-type: x mandatory !important;
+  scroll-behavior: smooth !important;
+  margin-bottom: var(--shopping-attachment-vertical-padding) !important;
 }
 
 .i-amphtml-amp-story-shopping-pdp-carousel::-webkit-scrollbar {
-  display: none;
+  display: none !important;
 }
 
 .i-amphtml-amp-story-shopping-pdp-carousel-card {
diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
index 1350921d079eb..06e57f5faad3d 100644
--- a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
+++ b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
@@ -169,7 +169,7 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
    */
   renderPdpTemplate_(activeProductData) {
     return (
-      <div>
+      <div class="i-amphtml-amp-story-shopping-pdp">
         <div class="i-amphtml-amp-story-shopping-pdp-header">
           <div>
             <span class="i-amphtml-amp-story-shopping-pdp-header-brand">