MediaWiki:Pivot.css

/* FINAL: Dune-Themed Pivot Skin using Approach #1 (No Parallax, 100% Stretch)
   1) The gradient covers the entire vertical page, regardless of scroll.
   2) The footer is transparent, so no white band at the bottom.
   3) All major containers are transparent so the background shows through.
*/

/**********************************************************/
/* 1) RESET MARGINS & ENSURE BODY CAN GROW AS TALL AS NEEDED */
/**********************************************************/
html, body {
  margin: 0;
  padding: 0;
  height: auto;         /* Let the page grow vertically as needed */
  min-height: 100%;     /* Start at least full viewport height */
}

/********************************************/
/* 2) BODY GRADIENT (APPROACH #1: STRETCH)  */
/********************************************/
body.skin-pivot {
  background-color: #171F23; /* fallback */
  /* Linear gradient from dark (75%) to brown */
  background: linear-gradient(
    to bottom,
    #171F23 0%,
    #171F23 75%,
    #784220 100%
  ) no-repeat center top;
  background-size: 100% 100%;
  background-attachment: scroll;
  color: #F0DFAF;
  font-family: "Orbitron", sans-serif;
}

/************************************************/
/* 3) FORCE MAJOR WRAPPERS TO BE TRANSPARENT    */
/************************************************/
.skin-pivot .off-canvas-wrap,
.skin-pivot .docs-wrap,
.skin-pivot .inner-wrap,
.skin-pivot #page-base,
.skin-pivot .page-base,
.skin-pivot #main-section.main-section,
.skin-pivot #page-content,
.skin-pivot .row,
.skin-pivot .columns,
.skin-pivot #sidebar.large-2.medium-3.columns.hide-for-small.hide-for-print,
.skin-pivot .exit-off-canvas {
  background: transparent !important;
  border: none !important;
}

/***********************************************************/
/* 4) FOOTER, CATLINKS, PRINTFOOTER: ALSO TRANSPARENT      */
/***********************************************************/
.skin-pivot footer,
.skin-pivot .footer,
.skin-pivot #footer,
.skin-pivot .mw-footer,
.skin-pivot #mw-footer-container,
.skin-pivot #mw-footer,
.skin-pivot #catlinks,
.skin-pivot .catlinks,
.skin-pivot .printfooter,
.skin-pivot #mw-data-after-content {
  background: transparent !important;
  border: none !important;
  color: #F0DFAF !important;
}

/************************************************************/
/* 5) MAIN CONTENT OVERLAY BOX (Darkish, slightly transparent) */
/************************************************************/
.skin-pivot #content,
.skin-pivot .mw-body,
.skin-pivot .mw-content-ltr,
.skin-pivot .mw-content-rtl {
  background-color: #171F23; /* fallback */
  background: rgba(23, 31, 35, 0.85);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 204, 102, 0.3);
  margin-bottom: 20px;
}

/***********************************************************/
/* 6) ADDITIONAL "DUNE" THEME STYLES (NAV, HEADINGS, ETC.) */
/***********************************************************/

/* Navbars */
.skin-pivot .navbar,
.skin-pivot .navbar-default,
.skin-pivot .navbar-inverse {
  background-color: #171F23;  /* fallback */
  background: rgba(23, 31, 35, 0.9) !important;
  border: none !important;
  color: #F0DFAF !important;
}
.skin-pivot .navbar-nav > li > a,
.skin-pivot .dropdown-menu > li > a {
  color: #D97D3A !important;
  font-weight: bold !important;
  text-decoration: none;
}
.skin-pivot .navbar-nav > li > a:hover,
.skin-pivot .dropdown-menu > li > a:hover {
  color: #E28D4F !important;
  text-decoration: underline;
}

/* Sidebar & panels */
.skin-pivot #nav,
.skin-pivot #nav-wrapper,
.skin-pivot .nav-content,
.skin-pivot .list-group,
.skin-pivot .list-group-item {
  background-color: #171F23; /* fallback */
  background: rgba(23, 31, 35, 0.9);
  border: none;
  color: #F0DFAF;
}
.skin-pivot .list-group-item:hover {
  background-color: rgba(23, 31, 35, 1);
}

/* Panel/Sidebar headings */
.skin-pivot #nav h3,
.skin-pivot #nav-wrapper h3,
.skin-pivot .panel-heading,
.skin-pivot .nav-content h3 {
  background-color: transparent;
  border: none;
  color: #F8E4B8;
  margin: 10px 0 5px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Common styles for all headings in main content without text transformation */
.skin-pivot h1,
.skin-pivot h2,
.skin-pivot h3,
.skin-pivot h4,
.skin-pivot h5,
.skin-pivot h6 {
  color: #F8E4B8;
  font-weight: bold;
  padding-bottom: 5px;
  margin-top: 1em;
  margin-bottom: 0.5em;
  border-bottom: none;
  text-transform: none;
}

/* Only H1 and H3 are uppercase and have an underline */
.skin-pivot h1,
.skin-pivot h3 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.skin-pivot h4,
.skin-pivot h5,
.skin-pivot h6 {
  color: #F8E4B8;
  font-weight: bold;
  padding-bottom: 3px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: none;
}

/* Links site-wide */
.skin-pivot a {
  color: #D97D3A;
  text-decoration: none;
  font-weight: bold;
}
.skin-pivot a:hover {
  color: #E28D4F;
  text-decoration: underline;
}

/* Make non-existing page links (redlinks) appear red again */
.skin-pivot a.new,
.skin-pivot a.new:visited {
  color: #BA0000 !important;
  text-decoration: underline;
}
.skin-pivot a.new:hover {
  color: #DD0000 !important;
}

/***********************************************************/
/* Additional Pivot Nav Overrides */
/***********************************************************/
.skin-pivot nav.tab-bar.hide-for-print {
  background: rgba(23, 31, 35, 0.9);
  border: none;
  color: #F0DFAF;
  padding: 0.5em;
}
.skin-pivot nav.tab-bar.hide-for-print a {
  color: #D97D3A;
  text-decoration: none;
  font-weight: bold;
}
.skin-pivot nav.tab-bar.hide-for-print a:hover {
  color: #E28D4F;
  text-decoration: underline;
}

/* Title link in the middle nav area */
.skin-pivot nav.tab-bar.hide-for-print .title a {
  color: #F8E4B8;
  font-size: 1.2em;
  text-transform: uppercase;
}

/* Left/middle/right nav sections inside the tab-bar */
.skin-pivot #left-nav-aside,
.skin-pivot #middle-nav,
.skin-pivot #right-nav-aside {
  background-color: transparent;
  color: #F0DFAF;
}

/* Logo element */
.skin-pivot li.name.logo img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Search bar in <li class="has-form"> */
.skin-pivot li.has-form input[type="search"] {
  background-color: #1E140A; /* fallback */
  background: rgba(30, 20, 10, 0.8);
  color: #F0DFAF;
  border: 1px solid #D97D3A;
  padding: 0.5em;
  width: 100%;
}
.skin-pivot li.has-form input[type="search"]::placeholder {
  color: #C9B795;
}

/* Navigation labels (sidebar) */
.skin-pivot label.sidebar {
  background-color: transparent;
  color: #F8E4B8;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5em 0;
  display: block;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 0.5em;
}
.skin-pivot li.mw-list-item a {
  color: #D97D3A;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding: 0.25em 0;
}
.skin-pivot li.mw-list-item a:hover {
  color: #E28D4F;
  text-decoration: underline;
}

/***********************************************************/
/* 7) TOC TRANSPARENCY & CUSTOM MENU ICONS */
/***********************************************************/
.skin-pivot .toc,
.skin-pivot #toc,
.skin-pivot .toctitle {
  background: rgba(23, 31, 35, 0.7) !important;
  border: 1px solid rgba(217, 125, 58, 0.4);
  color: #F0DFAF;
  border-radius: 5px;
  padding: 10px;
}
.skin-pivot .toctitle h2 {
  color: #F8E4B8;
  margin: 0;
  text-transform: uppercase;
}
.skin-pivot .toc ul > li.toclevel-1 {
  list-style: none;
  padding-left: 1.5em;
  position: relative;
}
.skin-pivot .toc ul > li.toclevel-1::before {
  content: "\25C6 ";
  position: absolute;
  left: 0;
  color: #D97D3A;
}
.skin-pivot .toc ul > li.toclevel-2 {
  list-style: none;
  padding-left: 1.5em;
  position: relative;
}
.skin-pivot .toc ul > li.toclevel-2::before {
  content: "\25CA ";
  position: absolute;
  left: 0;
  color: #D97D3A;
}

/***********************************************************/
/* MAIN SIDEBAR MENU ICONS: top-level vs sub-level */
/***********************************************************/
.skin-pivot li.mw-list-item {
  list-style: none;
  position: relative;
  padding-left: 1em;
}
.skin-pivot li.mw-list-item::before {
  content: none !important;
}
.skin-pivot li.mw-list-item ul li.mw-list-item {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}
.skin-pivot li.mw-list-item ul li.mw-list-item::before {
  content: "\22FB " !important;
  position: static;
  margin-right: 0.5em;
  color: #D97D3A;
  font-family: "Orbitron", "Segoe UI Symbol", sans-serif;
}

/***********************************************************/
/* SIDEBAR/HIDING TOOLS (Preserved) */
/***********************************************************/
html body.skin-pivot #p-tb,
html body.skin-pivot #p-tb + ul {
  display: none !important;
}
html body.skin-pivot #p-tb + li {
  display: none !important;
}
li[id^="t-"] {
  display: none !important;
}

/***********************************************************/
/* Two‑Column Table Overrides (Dark Gray) */
/***********************************************************/
.skin-pivot table.two-column-table {
  background-color: #171F23 !important;
  border: none !important;
  width: 100% !important;
  table-layout: fixed;
}
.skin-pivot table.two-column-table > thead,
.skin-pivot table.two-column-table > thead > tr,
.skin-pivot table.two-column-table > thead > tr > th,
.skin-pivot table.two-column-table > thead > tr > td {
  background-color: #171F23 !important;
  border: none !important;
  vertical-align: top;
}
.skin-pivot table.two-column-table > tbody,
.skin-pivot table.two-column-table > tbody > tr {
  background-color: #171F23 !important;
  border: none !important;
}
.skin-pivot table.two-column-table > tbody > tr > td,
.skin-pivot table.two-column-table > tbody > tr > th {
  background-color: #171F23 !important;
  border: none !important;
  vertical-align: top;
}
/* Vertical divider on first column */
.skin-pivot table.two-column-table > tbody > tr > td:first-child {
  border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.skin-pivot table.two-column-table > tfoot,
.skin-pivot table.two-column-table > tfoot > tr,
.skin-pivot table.two-column-table > tfoot > tr > td,
.skin-pivot table.two-column-table > tfoot > tr > th {
  background-color: #171F23 !important;
  border: none !important;
  vertical-align: top;
}
.skin-pivot table.two-column-table > tbody > tr > td p,
.skin-pivot table.two-column-table > thead > tr > td p,
.skin-pivot table.two-column-table > thead > tr > th p,
.skin-pivot table.two-column-table > tfoot > tr > td p,
.skin-pivot table.two-column-table > tfoot > tr > th p {
  margin: 0;
  padding: 0;
  background-color: #171F23 !important;
}

/***********************************************************/
/* Responsive: Switch Two‑Column to Single‑Column */
/***********************************************************/
@media only screen and (max-width: 600px) {
  .skin-pivot table.two-column-table > tbody > tr {
    display: flex;
    flex-direction: column;
  }
  .skin-pivot table.two-column-table > tbody > tr > td,
  .skin-pivot table.two-column-table > tbody > tr > th {
    display: block;
    width: 100%;
    border: none !important;
    box-sizing: border-box;
    vertical-align: top;
  }
}

/***********************************************************/
/* Demo Test Table (Scoped to Pivot Skin) */
/***********************************************************/
.skin-pivot table.demo-test-table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
  border: 2px solid red !important;
  background-color: #222 !important;
}
.skin-pivot table.demo-test-table td,
.skin-pivot table.demo-test-table tr {
  vertical-align: top;
  text-align: left !important;
  padding: 0.5em !important;
  border: 1px dotted yellow !important;
}
.skin-pivot table.demo-test-table th {
  vertical-align: top;
  text-align: left !important;
  padding: 0.5em !important;
  border: 1px dotted yellow !important;
}

/***********************************************************/
/* Dune Theme Special Header with Pointed Effect           */
/***********************************************************/
.skin-pivot .dune-box {
  height: auto;  /* Allow height to adjust to content */
  line-height: 1.5rem;
  border-top: 3px solid #F8E4B8;
  border-bottom: 3px solid #F8E4B8;
  width: fit-content;
  padding: 0.2rem 0;
  text-align: center;
  display: flex;
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  font-family: sans-serif;
  color: #F8E4B8;
  flex-grow: 1; /* Allows it to expand */
  font-size: 1.5rem; /* Adjust font size as needed */
}

.skin-pivot .dune-box::before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.5em; /* Adjust to position relative to the box */
  transform: rotate(-45deg);
  border-top: 3px solid #F8E4B8;
  border-left: 3px solid #F8E4B8;
  width: 2em !important;
  height: 2em !important;
}

.skin-pivot .dune-box::after {
  content: '';
  display: inline-block;
  position: relative;
  right: -0.5em; /* Adjust to position relative to the box */
  transform: rotate(135deg);
  border-top: 3px solid #F8E4B8;
  border-left: 3px solid #F8E4B8;
  width: 2em !important;
  height: 2em !important;
}

/***********************************************************/
/* No-Style Table Overrides (transparent background, no border) */
/***********************************************************/
.skin-pivot table.nostyle-table {
  background-color: transparent !important;
  border: none !important;
  width: auto !important;
  table-layout: auto;
}

/* Remove borders / backgrounds on thead */
.skin-pivot table.nostyle-table > thead,
.skin-pivot table.nostyle-table > thead > tr,
.skin-pivot table.nostyle-table > thead > tr > th,
.skin-pivot table.nostyle-table > thead > tr > td {
  background-color: transparent !important;
  border: none !important;
  vertical-align: top;
}

/* Remove borders / backgrounds on tbody */
.skin-pivot table.nostyle-table > tbody,
.skin-pivot table.nostyle-table > tbody > tr {
  background-color: transparent !important;
  border: none !important;
}

/* Remove borders / backgrounds on each cell of tbody */
.skin-pivot table.nostyle-table > tbody > tr > td,
.skin-pivot table.nostyle-table > tbody > tr > th {
  background-color: transparent !important;
  border: none !important;
  vertical-align: top;
}

/* Remove borders / backgrounds on tfoot */
.skin-pivot table.nostyle-table > tfoot,
.skin-pivot table.nostyle-table > tfoot > tr,
.skin-pivot table.nostyle-table > tfoot > tr > td,
.skin-pivot table.nostyle-table > tfoot > tr > th {
  background-color: transparent !important;
  border: none !important;
  vertical-align: top;
}

/* Eliminate margins/padding for any <p> within the table cells */
.skin-pivot table.nostyle-table > tbody > tr > td p,
.skin-pivot table.nostyle-table > thead > tr > td p,
.skin-pivot table.nostyle-table > thead > tr > th p,
.skin-pivot table.nostyle-table > tfoot > tr > td p,
.skin-pivot table.nostyle-table > tfoot > tr > th p {
  margin: 0;
  padding: 0;
  background-color: transparent !important;
}

/***********************************************************/
/* 8) Dune-Style Infobox Table – Overrides Pivot Table Rules */
/***********************************************************/
.skin-pivot table.infobox-dune {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 0.5em !important;
  
  background-color: #262626 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  table-layout: auto;
}

.skin-pivot table.infobox-dune th,
.skin-pivot table.infobox-dune td {
  padding: 6px 8px !important;
  font-size: 0.85em !important;
  color: #e2d3ae !important;
  border-bottom: 1px solid #3a3a3a !important;
  vertical-align: middle !important;
}

.skin-pivot table.infobox-dune th {
  text-align: left !important;
  font-weight: normal !important;
  width: auto !important;
}

.skin-pivot table.infobox-dune td {
  text-align: right !important;
}

.skin-pivot table.infobox-dune tr:last-child th,
.skin-pivot table.infobox-dune tr:last-child td {
  border-bottom: none !important;
}

/* ===================================================== */
/* DUNE-THEMED MAIN CARD (Card Module Styles)          */
/* ===================================================== */

.dune-card {
  position: relative;
  background-color: #1c1c1c;
  color: #e2d3ae;
  width: auto;
  padding: 16px;
  margin: 1em;
  border: 1px solid #e2d3ae;
  border-radius: 6px;
  box-sizing: border-box;
}

.dune-card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 2px solid #e2d3ae;
  border-radius: 6px;
  transform: translate(4px, 4px);
}

.dune-card-inner {
  position: relative;
  z-index: 1;
}

.dune-card-label {
  color: #b6a896;
  font-size: 0.8em;
  text-transform: uppercase;
  margin-bottom: 6px;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

.dune-card-title {
  margin: 0;
  font-size: 1.4em;
  color: #e2d3ae;
  text-transform: uppercase;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.dune-card-image {
  text-align: center;
  margin-bottom: 8px;
}

.dune-card-description {
  font-size: 0.9em;
  text-align: left;
  line-height: 1.4;
  background-color: #262626;
  border-radius: 4px;
  border: 1px solid #444;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal;
}

.dune-card-locked {
  background-color: #262626;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
  padding: 8px;
  margin-bottom: 12px;
}

.dune-card-locked-label {
  font-size: 0.9em;
  margin-bottom: 4px;
  text-align: center;
}

.dune-card-locked-icon {
  color: #b6a896;
  margin-right: 4px;
}

.dune-card-infobox table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5em;
  background-color: #262626;
  border: 1px solid #444;
  border-radius: 4px;
  table-layout: auto;
}

.dune-card-infobox th,
.dune-card-infobox td {
  padding: 6px 8px;
  font-size: 0.85em;
  color: #e2d3ae;
  border-bottom: 1px solid #3a3a3a;
  vertical-align: middle;
  background-color: #262626;
  text-align: left;
}

.dune-card-infobox td {
  text-align: right;
}

.dune-card-infobox tr:last-child th,
.dune-card-infobox tr:last-child td {
  border-bottom: none;
}

.dune-card-infobox .icon {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  margin-right: 4px;
}

.dune-card-infobox .infobox-child {
  padding-left: 1.8em;
}

.skin-pivot table.infobox-dune {
  border-collapse: collapse;
  margin: 1em 0;
  width: auto;
  max-width: 100%;
  table-layout: auto;
  background-color: #262626;
  border: 1px solid #444;
  border-radius: 4px;
}

.skin-pivot table.infobox-dune .table-row th,
.skin-pivot table.infobox-dune .table-row td {
  padding: 6px 8px;
  font-size: 0.85em;
  color: #e2d3ae;
  border-bottom: 1px solid #3a3a3a;
  vertical-align: middle;
  background-color: #262626;
  text-align: left;
}

.skin-pivot table.infobox-dune .table-row-child th,
.skin-pivot table.infobox-dune .table-row-child td {
  padding: 6px 8px;
  font-size: 0.85em;
  color: #e2d3ae;
  border-bottom: 1px solid #3a3a3a;
  vertical-align: middle;
  background-color: #262626;
  text-align: left;
}

.skin-pivot table.infobox-dune .table-row-child th {
  padding-left: 50px;
  text-align: left;
}

.skin-pivot table.infobox-dune .table-row-child th::before {
  content: "• ";
  color: #b6a896;
  font-size: 1.1em;
  margin-right: 6px;
}

.skin-pivot table.infobox-dune tr,
.skin-pivot table.infobox-dune th,
.skin-pivot table.infobox-dune td {
  background-color: #262626 !important;
}

/***********************************************************/
/* 9) DUNE-INFOBOX MODULE STYLES (Angled Container)        */
/***********************************************************/
/* These are the .skin-pivot .dune-infobox styles from the example:
   If you plan to use <div class="dune-infobox"> instead of .dune-card 
   in your MediaWiki pages, then keep these. */

.skin-pivot .dune-infobox {
  position: relative;
  background-color: #1c1c1c;
  color: #e2d3ae;
  width: 100%;
  padding: 16px;
  margin: 1em 0;
  border: 1px solid #e2d3ae;
  border-radius: 6px;
  box-sizing: border-box;
}
.skin-pivot .dune-infobox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 2px solid #e2d3ae;
  border-radius: 6px;
  transform: translate(4px, 4px);
}

.skin-pivot .dune-infobox-toplabel {
  color: #b6a896;
  font-size: 0.8em;
  text-transform: uppercase;
  margin-bottom: 6px;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}
.skin-pivot .dune-infobox-title {
  margin: 0;
  font-size: 1.4em;
  color: #e2d3ae;
  text-transform: uppercase;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.skin-pivot .dune-infobox-image {
  text-align: center;
  margin-bottom: 8px;
}
.skin-pivot .dune-infobox-image img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border: 1px solid #444;
  border-radius: 4px;
}

.skin-pivot .dune-infobox-description {
  font-size: 0.9em;
  line-height: 1.4;
  margin-bottom: 12px;
  background-color: #262626;
  border-radius: 4px;
  padding: 8px;
  border: 1px solid #444;
}

.skin-pivot .dune-infobox-locked-block {
  background-color: #262626;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
  padding: 8px;
  margin-bottom: 12px;
}
.skin-pivot .dune-infobox-locked-header {
  font-size: 0.9em;
  margin-bottom: 4px;
}
.skin-pivot .lock-icon {
  color: #b6a896;
  margin-right: 4px;
}
.skin-pivot .dune-infobox-locked-desc {
  font-size: 1em;
  color: #e2d3ae;
}

.skin-pivot .dune-infobox-stats {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5em;
  background-color: #262626;
  border: 1px solid #444;
  border-radius: 4px;
}
.skin-pivot .dune-infobox-stats th,
.skin-pivot .dune-infobox-stats td {
  padding: 6px 8px;
  font-size: 0.85em;
  border-bottom: 1px solid #3a3a3a;
  color: #e2d3ae;
}
.skin-pivot .dune-infobox-stats th {
  text-align: left;
  font-weight: normal;
}
.skin-pivot .dune-infobox-stats td {
  text-align: right;
}
.skin-pivot .dune-infobox-stats tr:last-child th,
.skin-pivot .dune-infobox-stats tr:last-child td {
  border-bottom: none;
}

.skin-pivot .icon-inline {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  margin-right: 4px;
}
.skin-pivot .ingredient-list {
  margin: 0;
  padding-left: 1.2em;
  list-style-type: square;
  text-align: left;
}


/***********************************************************/
/* 10) RESPONSIVE 3-COLUMN LAYOUT (Floats + Media Queries) */
/***********************************************************/

/* Wrap columns in .responsive-container. 
   We prefix with .skin-pivot for extra specificity (optional). */

.skin-pivot .responsive-container {
  width: 100%;
  text-align: center; /* centers inline-block children horizontally */
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Default (desktop): three columns (32% width + 2% margin = ~100%) */
.skin-pivot .responsive-col {
  display: inline-block;
  vertical-align: top;
  width: 32% !important;
  margin-right: 2% !important;
  box-sizing: border-box;
  text-align: left; /* reset text alignment if needed */
}

/* Remove margin-right from the last column in each row */
.skin-pivot .responsive-col:last-child {
  margin-right: 0 !important;
}

/* TABLET: two columns (max-width: 900px) */
@media screen and (max-width: 900px) {
  .skin-pivot .responsive-col {
    width: 48% !important;  /* ~50% each */
    margin-right: 4% !important;
  }
  /* Remove right margin on every 2nd column */
  .skin-pivot .responsive-col:nth-child(2n) {
    margin-right: 0 !important;
  }
}

/* MOBILE: single column (max-width: 600px) */
@media screen and (max-width: 600px) {
  .skin-pivot .responsive-col {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1em; /* optional spacing between stacked columns */
  }
}

/* End of CSS */