/* Additions on top of style.css, which is the 2017 myowndress.com stylesheet kept as it was.
   Only what the old site got from plugins (RoyalSlider, widgets), what the guide pages need,
   and a phone layout. At desktop widths the old rules win. */

/* The hero slider (was RoyalSlider, rs-minimal-white skin) */
.slides { position: relative; overflow: hidden; aspect-ratio: 1000 / 333; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.slides img.on { opacity: 1; }
.slides .bullets { position: absolute; bottom: 15px; right: 73px; z-index: 35; padding-top: 4px; }
.slides .bullets button { display: inline-block; padding: 6px 5px 6px 4px; border: 0; background: none; cursor: pointer; }
.slides .bullets span { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); }
.slides .bullets .on span { background: #fff; }
#hero article { z-index: 2; }
.slides.experience { aspect-ratio: 890 / 700; max-width: 890px; margin: 18px auto 8px; }
.slides.experience img { object-fit: contain; }
.slides.experience .bullets { right: 50%; transform: translateX(50%); bottom: 6px; }
.slides.experience .bullets span { background: rgba(63, 75, 92, 0.3); }
.slides.experience .bullets .on span { background: #3f4b5c; }

/* The home page body below the steps band (was a fixed 820px box) */
.homeBody { display: flow-root; }
#main ul { padding-left: 20px; }
#main li { margin: 6px 0; }

/* Pinterest box in the sidebar (was the Twitter feed) */
.pinBoard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.pinBoard img { display: block; width: 100%; height: auto; }
.btn {
  display: inline-block; padding: 9px 22px; border: 1px solid #2b4570; border-radius: 8px;
  background: linear-gradient(#7193c4, #3a5b8f); color: #fff !important; text-decoration: none !important;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn:hover { background: linear-gradient(#80a2d2, #44669b); }
.btn img { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; border-radius: 50%; }

/* The banner above the footer (was "Only $2,995 / Click here", now the Bride's Kit) */
.kitBanner {
  display: block; position: relative; max-width: 1000px; aspect-ratio: 1000 / 270; margin: 24px 0 0;
  background: url(../images/Custom_wedding_dress.jpg) left top / auto 100% no-repeat; text-decoration: none !important;
}
.kitBanner .kbText {
  position: absolute; top: 0; right: 0; bottom: 0; width: 43%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(90deg, rgba(232, 233, 236, 0), #e6e7ea 34px), linear-gradient(#e6e7ea, #c9cdd3);
  background-blend-mode: normal; color: #4a6994; text-align: center;
}
.kitBanner b { font-weight: normal; font-size: 46px; line-height: 1.05; }
.kitBanner .kbText > span { font-size: 21px; }
.kitBanner i {
  font-style: normal; margin-top: 10px; padding: 8px 26px; border: 1px solid #2b4570; border-radius: 10px;
  background: linear-gradient(#7193c4, #3a5b8f); color: #fff; font-size: 24px; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 5px rgba(0, 0, 0, 0.35);
}
.kitBanner:hover i { background: linear-gradient(#80a2d2, #44669b); }
#mainContent .kitBanner { margin-right: 40px; }

/* Guide pages inside #mainContent */
#mainContent { box-sizing: border-box; padding-right: 40px; width: 100%; padding-bottom: 30px; }
#mainContent h1.crossLine { font-size: 1.6em; margin: 20px 0 14px; }
#mainContent h2.crossLine { font-size: 1.35em; margin: 30px 0 10px; }
#mainContent h3 { color: #3f4b5c; font-weight: lighter; font-size: 1.25em; margin: 22px 0 6px; }
#mainContent li { margin: 6px 0; line-height: 1.45; }
#mainContent p { line-height: 1.5; }
.lede { font-size: large; }
.tip { border-left: 3px solid #90a9a9; padding: 2px 0 2px 14px; font-style: italic; }
#mainContent .scroll { overflow-x: auto; }
#mainContent .scroll table { width: 100%; float: none; border-collapse: collapse; font-size: 15px; }
#mainContent .scroll th, #mainContent .scroll td { text-align: left; padding: 7px 9px; border-bottom: 1px solid #d5dde0; vertical-align: top; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 20px 0; padding: 0; list-style: none; }
#mainContent .cards li { margin: 0; padding: 14px 16px; background: #fff; border-radius: 6px; box-shadow: 0 0 9px -3px #333; }
.cards a { font-size: 19px; text-decoration: none; }
.cards p { margin: 6px 0 0; font-size: 15px; }
.buy { font-weight: bold; }
.buy::after { content: " on Amazon \2197"; font-weight: normal; font-size: 0.85em; color: #7d8797; }
.clear { clear: both; }
.oldStep { display: flow-root; }
.oldStep img { margin: 0 18px 8px; }
.oldStep img.l { float: left; }
.oldStep img.r { float: right; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.details img { width: 100%; height: auto; display: block; }
/* Dress ideas (the InspLG photos from the old order page) */
#mainContent .ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; padding: 0; list-style: none; }
#mainContent .ideas li { margin: 0; text-align: center; font-size: 15px; color: #64748c; }
.ideas img { display: block; width: 100%; height: auto; margin-bottom: 6px; box-shadow: 0 0 9px -3px #333; }
figure.note { margin: 12px 0; }
figure.note figcaption { font-size: small; font-style: italic; color: #7d8797; text-align: center; }

/* Footer: room for the disclosure line under the old link row */
#wrapper footer { height: auto; min-height: 105px; padding-bottom: 14px; }
#wrapper footer p.disclosure { padding-top: 0; margin: 4px auto 0; max-width: 760px; font-size: 12px; color: #7d8797; }

/* Phones (most Pinterest visitors). The old site had no phone layout. */
@media (max-width: 640px) {
  #wrapper { min-width: 0; margin: 0; border-radius: 0; }
  #wrapper img { max-width: 100%; height: auto; }
  #wrapper p { text-align: left; }
  #header { padding-bottom: 0; }
  #logo { float: none; width: auto; padding: 22px 16px 6px; }
  #logo img { max-width: 300px; }
  #navback { margin-bottom: 0; background-size: 140% auto; }
  #mainnav { margin: 0; }
  #mainnav ul { margin: 0; padding: 4px 8px 0; text-align: center; }
  #mainnav li { display: inline-block; }
  #mainnav a { width: auto; float: none; display: inline-block; margin: 6px 1px; padding: 8px 9px; font-size: 14px; }
  #socialicons { margin: 0; }
  #socialicons ul { margin: 0; padding: 0; text-align: center; }
  #socialicons a { float: none; margin: 4px auto 0; }
  #hero { margin-top: 10px; }
  #hero article { position: static; width: auto; padding: 14px 16px 0; text-align: left; }
  #hero h2 { font-size: 26px; }
  #title p { font-size: 140%; padding: 0 16px; }
  #steps ul { padding: 8px 0; margin: 0; }
  #steps li { display: inline-block; width: 30%; margin: 4px 0; }
  #steps li > span { display: none; }
  #main, #sidebar { float: none; width: auto; padding: 16px; margin: 0; }
  #headBanner p { font-size: 210%; padding: 14px 10px 4px; }
  #mainContent { padding: 4px 16px 24px; }
  #mainContent .kitBanner { margin-right: 0; }
  #myDiv { float: none; width: auto; height: auto; }
  #mainContent table { width: auto; float: none; }
  .oldStep img { max-width: 92px; margin: 0 12px 6px; }
  .kitBanner { aspect-ratio: auto; padding-top: 46%; background-size: auto 46vw; }
  .kitBanner .kbText { position: static; width: auto; padding: 16px 12px 18px; background: linear-gradient(#e6e7ea, #c9cdd3); }
  .kitBanner b { font-size: 32px; }
  .kitBanner .kbText > span { font-size: 17px; }
  .kitBanner i { font-size: 18px; }
  .details { grid-template-columns: 1fr; }
  #wrapper footer { background-size: 140% auto; }
  #wrapper footer p { padding: 18px 12px 0; }
}