/* Sapporo USA demo — brand overrides (public brand reference: sapporobeer.com; gold star + black) */
:root {
  --sapporo-gold: #C9A227;
  --sapporo-black: #111111;
  --sapporo-offwhite: #F7F5F0;
  --sapporo-red: #B3282D;
}

/* Header brand bar — black with gold accent, scoped to the page header only */
header[data-swift-page-header] {
  background: var(--sapporo-black) !important;
  border-bottom: 3px solid var(--sapporo-gold);
}
header[data-swift-page-header] :is(a, button, .nav-link, span):not(.badge):not(.btn-primary *) {
  color: #ffffff;
}
header[data-swift-page-header] .icon-2 svg,
header[data-swift-page-header] .icon-3 svg {
  fill: #ffffff;
}
/* Scheme CSS (Styles/ColorSchemes/default.css) paints the header's inner sections light —
   keep them transparent so the black brand bar shows through, and keep the scheme
   foreground white (swift.css colors schemed links via --dw-color-foreground) */
header[data-swift-page-header] section,
header[data-swift-page-header] [data-dw-colorscheme] {
  background: transparent !important;
  --dw-color-foreground: #ffffff;
  --dw-color-foreground-rgb: 255, 255, 255;
}
/* ...but the search widget (white pill) must keep a dark foreground throughout */
header[data-swift-page-header] form {
  --dw-color-foreground: var(--sapporo-black);
  --dw-color-foreground-rgb: 17, 17, 17;
}
header[data-swift-page-header] form input,
header[data-swift-page-header] form ::placeholder,
header[data-swift-page-header] form button,
header[data-swift-page-header] form span,
header[data-swift-page-header] form svg {
  color: var(--sapporo-black) !important;
  fill: var(--sapporo-black) !important;
}
header[data-swift-page-header] .badge,
header[data-swift-page-header] .mini-cart-quantity {
  background-color: var(--sapporo-gold) !important;
  color: var(--sapporo-black) !important;
}

/* The offcanvas panels (My account, Favorites, mini cart) are rendered INSIDE
   <header>, so the black-brand-bar rules above were bleeding into them: a
   transparent panel with white-on-white text. Give them back their own light
   scheme. Must come after the header rules to win the cascade. */
header[data-swift-page-header] .offcanvas,
header[data-swift-page-header] .offcanvas section,
header[data-swift-page-header] .offcanvas [data-dw-colorscheme] {
  background-color: #ffffff !important;
  --dw-color-foreground: var(--sapporo-black);
  --dw-color-foreground-rgb: 17, 17, 17;
}
header[data-swift-page-header] .offcanvas :is(a, button, .nav-link, span, p, li, h1, h2, h3, h4, h5, h6):not(.badge):not(.btn-primary):not(.btn-primary *) {
  color: var(--sapporo-black);
}
header[data-swift-page-header] .offcanvas :is(.icon-1, .icon-2, .icon-3, .icon-4) svg {
  fill: var(--sapporo-black);
}
/* the offcanvas header sits on the brand bar's black — keep its title readable */
header[data-swift-page-header] .offcanvas .offcanvas-header,
header[data-swift-page-header] .offcanvas .offcanvas-header * {
  color: var(--sapporo-black);
}
header[data-swift-page-header] .offcanvas .btn-primary[data-dw-button="primary"] {
  color: var(--sapporo-black);
}

/* Primary buttons — Sapporo gold on black text */
.btn-primary[data-dw-button="primary"] {
  background-color: var(--sapporo-gold);
  border-color: var(--sapporo-gold);
  color: var(--sapporo-black);
}
.btn-primary[data-dw-button="primary"]:hover,
.btn-primary[data-dw-button="primary"]:focus {
  background-color: #a9861d;
  border-color: #a9861d;
  color: var(--sapporo-black);
}

/* Swift PLP pill nav uses vw-100, which includes the scrollbar width and forces a
   15px horizontal page scroll — cap it to its container */
.nav-pills.vw-100 { width: 100% !important; }

/* Shipping weight callouts */
.item_shippingweight { color: #6b6b6b; }
.item_shippingweight .fw-bold { color: var(--sapporo-black); }
#orderTotalShippingWeight { color: var(--sapporo-black); }
#orderTotalShippingWeight span:last-child { color: var(--sapporo-red); }

/* ---------------------------------------------------------------------------
   Customer-center dashboard tiles (Swift Feature paragraphs that carry a button)
   The whole tile becomes the link — the separate "View" button is redundant, so
   its anchor is stretched over the tile and its chrome removed. Feature blocks
   without a button (the home page's) are untouched.
   --------------------------------------------------------------------------- */
[data-dw-itemtype="swift-v2_feature"]:has(a.btn) {
  position: relative;
  cursor: pointer;
  border: 1px solid #dededa;
  border-radius: .375rem;
  padding: 1.25rem;
  transition: border-color .15s ease-in-out;
}
[data-dw-itemtype="swift-v2_feature"]:has(a.btn):hover { border-color: var(--sapporo-gold); }
[data-dw-itemtype="swift-v2_feature"]:has(a.btn):hover h3 { text-decoration: underline; }

/* the "View" button IS the link — stretch it over the tile, hide its chrome */
[data-dw-itemtype="swift-v2_feature"] a.btn[data-dw-button="primary"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent !important;
  font-size: 0;
  line-height: 0;
  color: transparent !important;
}

/* tile icons ship as a near-black block — put them on brand */
[data-dw-itemtype="swift-v2_feature"]:has(a.btn) figure[class*="icon-"] {
  background-color: var(--sapporo-gold) !important;
  color: var(--sapporo-black) !important;
  border-radius: .375rem;
}

/* ---------------------------------------------------------------------------
   PLP full-width B2B row card
   The card page (Product List Card) is one 12-column flex row: DW renders exactly
   one paragraph per grid column, so the seven components arrive as a flat list of
   sibling columns. Re-lay them out as a 3-zone grid: image | product info | buy rail.
   Zones are addressed by data-dw-itemtype, so paragraph ids stay free to change.
   --------------------------------------------------------------------------- */
.product-list .grid { row-gap: .75rem; }

.product-list article.product {
  border: 1px solid #dededa;
  border-radius: .375rem;
  padding: 1rem 1.25rem;
  transition: border-color .15s ease-in-out;
}
.product-list article.product:hover { border-color: var(--sapporo-gold); }

.product-list article.product section[data-swift-gridrow] > [data-swift-container] {
  /* the container ships Bootstrap's .d-flex (display:flex !important) — override it */
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 1.5rem;
  row-gap: .1rem;
  align-items: center;
  width: 100%;
}

/* the 12-column row leaves five unfilled slots — they carry no paragraph id */
.product-list article.product [data-swift-gridcolumn][id=""] { display: none; }

.product-list article.product [data-dw-itemtype="swift-v2_productdefaultimage"]      { grid-column: 1; grid-row: 1 / -1; }
.product-list article.product [data-dw-itemtype="swift-v2_productheader"]            { grid-column: 2; grid-row: 1; }
.product-list article.product [data-dw-itemtype="swift-v2_productnumber"]            { grid-column: 2; grid-row: 2; }
.product-list article.product [data-dw-itemtype="swift-v2_productshortdescription"]  { grid-column: 2; grid-row: 3; }
.product-list article.product [data-dw-itemtype="swift-v2_productstock"]             { grid-column: 2; grid-row: 4; }
.product-list article.product [data-dw-itemtype="swift-v2_productprice"]             { grid-column: 3; grid-row: 1 / 3; justify-self: end; text-align: right; }
.product-list article.product [data-dw-itemtype="swift-v2_productaddtocart"]         { grid-column: 3; grid-row: 3 / -1; justify-self: end; min-width: 16rem; }

/* the card-wide stretched link sits above the row; lift the buy controls back over it */
.product-list article.product [data-dw-itemtype="swift-v2_productaddtocart"] {
  position: relative;
  z-index: 2;
}

.product-list article.product .item_swift-v2_productheader { font-size: 1.0625rem; }
.product-list article.product .item_swift-v2_productnumber { color: #6b6b6b; font-size: .8125rem; }
.product-list article.product .item_swift-v2_productshortdescription { color: #6b6b6b; font-size: .8125rem; }

/* stack the three zones on phones/tablets */
@media (max-width: 991.98px) {
  .product-list article.product section[data-swift-gridrow] > [data-swift-container] {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: .35rem;
  }
  .product-list article.product [data-dw-itemtype="swift-v2_productdefaultimage"]     { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .product-list article.product [data-dw-itemtype="swift-v2_productheader"]           { grid-column: 2; grid-row: 1; }
  .product-list article.product [data-dw-itemtype="swift-v2_productnumber"]           { grid-column: 2; grid-row: 2; }
  .product-list article.product [data-dw-itemtype="swift-v2_productshortdescription"] { grid-column: 2; grid-row: 3; }
  .product-list article.product [data-dw-itemtype="swift-v2_productstock"]            { grid-column: 2; grid-row: 4; }
  .product-list article.product [data-dw-itemtype="swift-v2_productprice"]            { grid-column: 1 / -1; grid-row: 5; justify-self: start; text-align: left; }
  .product-list article.product [data-dw-itemtype="swift-v2_productaddtocart"]        { grid-column: 1 / -1; grid-row: 6; justify-self: stretch; min-width: 0; }
}