@charset "utf-8";

/* ============================================
   RGM MEDIA - UNIVERSAL CSS
   Reorganized - single source of truth
   
   SECTION INDEX:
   1.  GLOBAL BASE          all pages
   2.  NAVIGATION           all pages
   3.  CARD SYSTEM          main.php, gallery pages
   4.  BUTTONS              all pages
   5.  TABLES               all pages
   6.  SOCIAL SHARE         watercolors.php, detail pages
   7.  ANIMATIONS           all pages
   8.  VIDEO                all pages
   9.  CART & COMMERCE      watercolors.php, cart.php
   10. WATERCOLORS PAGE     watercolors.php, watercolors-detail.php
   11. PHOTOS PAGES         photos-detail.php, photos-services.php
   12. ARCH PAGE            arch.php
   13. INDEX PAGE           index.php
   14. MODAL & SLIDESHOW    arch.php, photos-services.php
   15. RESPONSIVE           all breakpoints consolidated
   ============================================ */


/* ============================================
   1. GLOBAL BASE
   Used by: all pages
   ============================================ */

body {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #fff;
}

body.arch-page,
body.photos-page {
  background-color: #fafafa;
}

body.main-page {
  animation: fadeInContent 1.5s ease-in;
}

@keyframes fadeInContent {
  from { opacity: 0; }
  to   { opacity: 1; }
}

h1 {
  font-family: "Times New Roman", Times, serif;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  margin-bottom: 20px;
}

h2 {
  font-family: "Segoe Print", Times, serif;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  margin: 15px 0 10px 0;
}

h3 {
  font-family: "Segoe Print", Times, serif;
  color: black;
  max-width: 600px;
  margin: 0 auto 20px auto;
  padding: 5px;
  border: none;
  word-wrap: break-word;
}

p {
  text-align: center;
  font-size: 16px;
}

a {
  text-decoration: none;
}


/* ============================================
   2. NAVIGATION
   Used by: all pages
   ============================================ */

.menu-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.top-menu {
  text-align: center;
  margin-bottom: 20px;
}


/* ============================================
   3. CARD SYSTEM
   Used by: main.php, arch.php, photos-gallery.php,
            photos-services.php
   ============================================ */

.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

a.card, .card {
  display: block;
  background: #4169E1;
  border-radius: 10px;
  padding: 10px;
  width: 220px;
  height: auto;
  min-height: 260px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  color: white;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}

a.card:visited, a.card:link,
.card-photo:visited, .card-photo:link {
  color: white;
  text-decoration: none;
}

a.card:hover, .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 15px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  text-decoration: none;
  color: white;
}

.card img,
.card-photo img {
  max-width: 100%;
  border-radius: 5px;
}

.card h1 {
  margin: 10px 0;
  font-size: 1.2em;
}

.card p {
  font-size: 0.9em;
  color: #444;
}

.card a {
  text-decoration: none;
  display: block;
}

.card a:hover {
  text-decoration: none;
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
  display: block;
}

.card:hover .card-image {
  transform: scale(1.1);
}

.card-content {
  padding: 15px;
}

.card-content h1 {
  margin: 10px 0 5px 0;
  font-size: 1.2em;
}

.card-content p {
  font-size: 0.85em;
  color: #000;
  margin: 5px 0;
}

.card-photo {
  display: block;
  background: #4169e1;
  border-radius: 10px;
  padding: 10px;
  width: 215px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.card-photo:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.2);
  text-decoration: none;
  color: white;
}

.card-photo h1 {
  font-size: 18px;
  margin: 10px 0 5px 0;
  color: white;
}


/* ============================================
   4. BUTTONS
   Used by: all pages
   ============================================ */

.button-area {
  background-color: #000;
  padding: 12px;
  margin-top: 12px;
  width: fit-content;
  text-align: left;
}

.button-area-light {
  width: 100%;
  margin: 20px 0 0 0;
  background: white;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}

.button-area-cart {
  background-color: #ffffff;
  padding: 12px;
  margin-top: 12px;
  width: fit-content;
  text-align: center;
}

.button-row {
  display: flex;
  gap: 10px;
}

.info-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.info-button {
  background-color: #4169E1;
  color: white;
  border: none;
  padding: 10px 25px;
  margin: 5px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  display: inline-block;
  text-decoration: none;
}

.info-button:hover {
  background-color: #274abb;
  transform: translateY(-2px);
}

.info-button:focus {
  outline: 2px solid #4169E1;
  outline-offset: 2px;
}

.info-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.delete-button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.delete-button:hover {
  background: #c82333;
}

.promo-button {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border: none;
  padding: 15px 40px;
  margin: 5px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.promo-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(245, 87, 108, 0.6);
}

/* Page CTA blocks - arch.php, photos-services.php */
.page-cta {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.page-cta-text {
  font-size: 1.1em;
}


/* ============================================
   5. TABLES
   Used by: all pages
   ============================================ */

table {
  table-layout: fixed;
  width: 100%;
  max-width: 700px;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  vertical-align: top;
  text-align: left;
}


/* ============================================
   6. SOCIAL SHARE
   Used by: watercolors.php, photos-detail.php
   ============================================ */

.social-share-container {
  text-align: center;
  margin: 40px 0 20px 0;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.social-share-container p {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  background: white;
  color: #666;
}

.share-btn:hover {
  border-color: #4169e1;
  color: #4169e1;
  transform: translateY(-1px);
}


/* ============================================
   7. ANIMATIONS & TRANSITIONS
   Used by: all pages
   ============================================ */

.fade-image {
  max-width: 300px;
  margin: 20px auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-image.show { opacity: 1; }
.fade-image.hide { opacity: 0; }


/* ============================================
   8. VIDEO CONTAINERS
   Used by: any page with embedded video
   ============================================ */

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 20px auto;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ============================================
   9. CART & COMMERCE
   Used by: watercolors.php, cart.php
   ============================================ */

.cart-wrapper {
  max-width: 95%;
  width: 100%;
  margin: 20px auto;
  background: #4169e1;
  border-radius: 10px;
  padding: 20px;
  color: white;
}

.cart-table {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  background: white;
  color: black;
  border-collapse: collapse;
  overflow-x: auto;
  display: table;
}

.cart-table th {
  background: #e0e8ff;
  font-weight: bold;
  padding: 10px;
  border: 1px solid #999;
}

.cart-table td {
  padding: 10px;
  border: 1px solid #999;
  text-align: center;
}

.cart-table .total-row {
  font-weight: bold;
  background: #f0f0f0;
}

.cart-status {
  margin: 15px 0;
  font-size: 1.1em;
  font-weight: bold;
}

#cart-area {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: left;
  max-width: 400px;
}

#cart-items .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  margin-bottom: 8px;
  gap: 16px;
}

#cart-items button {
  background-color: #cc0000;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

#cart-items button:hover {
  background-color: #990000;
}


/* ============================================
   10. WATERCOLORS PAGE
   Used by: watercolors.php, watercolors-detail.php
   ============================================ */

.watercolors {
  background: #4169E1;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  height: auto;
  padding: 50px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  text-align: left;
  text-decoration: none;
  color: white;
}

.watercolors-detail {
  background: #4169E1;
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.watercolors-newsletter {
  background: #4169E1;
  border-radius: 12px;
  width: 550px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.watercolors-newsletter h1,
.watercolors-newsletter h2 {
  text-align: center;
}

.watercolors-newsletter img {
  display: block;
  margin: 0 auto;
}

.watercolors table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  background-color: #4169E1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-size: 0.9em;
}

.watercolors th, .watercolors td {
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
  background-color: #4169E1;
  font-weight: bold;
}

.content-layout {
  width: 100%;
  max-width: 100%;
}

.content-layout img {
  max-width: 450px;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 5px;
}

.content-layout table {
  max-width: 450px;
  margin: 0 auto 20px auto;
  border-collapse: collapse;
  background: white;
  color: black;
}

.content-layout table td,
.content-layout table th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
  background: white;
}

/* Artwork panel — constrains image, table, buttons, and
   social share to a unified column width on detail pages */
.artwork-panel {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.artwork-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.artwork-panel table,
.artwork-panel .button-area-light,
.artwork-panel .social-share-container {
  width: 100%;
  box-sizing: border-box;
}

.return-gallery {
  margin-top: 10px;
}


/* ============================================
   11. PHOTOS PAGES
   Used by: photos-detail.php, photos-services.php
   ============================================ */

.photos-content img {
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.photos-content table,
.photos-content .button-area-light {
  max-width: 600px;
  width: 100%;
}

.slide-image.hero {
  max-width: 75%;
  max-height: 75%;
  min-width: 550px;
  min-height: 450px;
}


/* ============================================
   12. ARCH PAGE
   Used by: arch.php
   ============================================ */

/* arch-page body bg handled in section 1 */
/* arch modal/slideshow handled in section 14 */


/* ============================================
   13. INDEX PAGE - WELCOME OVERLAY
   Used by: index.php
   ============================================ */

#welcome-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1s ease-out 9s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

.welcome-title {
  font-size: 5em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 40px rgba(102, 126, 234, 0.8);
  letter-spacing: 0.1em;
  opacity: 0;
  animation: titleFadeIn 1s ease-out 0.5s forwards;
}

@keyframes titleFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

.welcome-subtitle {
  font-size: 2em;
  color: #b1c1ec;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 30px;
  opacity: 0;
  animation: subtitleSlide 1s ease-out 2.5s forwards;
}

@keyframes subtitleSlide {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.welcome-disciplines {
  display: flex;
  gap: 40px;
  margin-top: 60px;
  opacity: 0;
  animation: disciplinesFade 1s ease-out 4.5s forwards;
}

@keyframes disciplinesFade {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.discipline-icon {
  font-size: 3em;
  color: #667eea;
  animation: iconPulse 1s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1);   }
  50%       { transform: scale(1.2); }
}

.skip-intro {
  position: fixed;
  top: 30px; right: 30px;
  z-index: 10000;
  padding: 12px 30px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  cursor: pointer;
  font-size: 1.1em;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.skip-intro:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
}


/* ============================================
   14. MODAL & SLIDESHOW SYSTEM
   Used by: arch.php, photos-services.php
   ============================================ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active,
.touch-indicators.active {
  display: flex;
}

.slideshow-container {
  width: 80%;
  max-width: 900px;
  min-width: 300px;
  background: #4169e1;
  border-radius: 20px;
  padding: 60px 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.text-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  transition: opacity 1s ease;
}

.text-container.hidden {
  opacity: 0;
  pointer-events: none;
}

.logo {
  font-family: "Times New Roman", Times, serif;
  font-size: 3em;
  color: white;
  text-shadow: 2px 2px 4px black, 0 0 30px blue, 0 0 10px darkblue;
  text-align: center;
  margin-bottom: 10px;
}

.tagline {
  font-family: "Segoe Print", Arial, sans-serif;
  font-size: 1.5em;
  color: white;
  text-align: center;
  margin-bottom: 20px;
}

.project-name {
  font-family: "Times New Roman", Times, serif;
  font-size: 2em;
  color: white;
  text-shadow: 2px 2px 4px black, 0 0 30px blue, 0 0 10px darkblue;
  text-align: center;
}

.image-stage {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-image {
  position: absolute;
  max-width: 80%;
  max-height: 75%;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slide-image.active,
.fade-image.show,
.corner-wrapper.active,
.progress-container.active,
.step-counter.active {
  opacity: 1;
}

.corner-container {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  pointer-events: none;
}

.corner-wrapper {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.corner-wrapper.top-left     { top: 60px;    left: 100px;  }
.corner-wrapper.top-right    { top: 60px;    right: 100px; }
.corner-wrapper.bottom-left  { bottom: 60px; left: 100px;  }
.corner-wrapper.bottom-right { bottom: 60px; right: 100px; }

.corner-image {
  width: 280px;
  height: 185px;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  display: block;
}

.corner-text {
  font-family: "Segoe Print", "Comic Sans MS", cursive, Arial, sans-serif;
  font-size: 0.85em;
  color: #fff;
  background: rgba(0,0,0,0.8);
  text-align: center;
  padding: 6px 8px;
  width: 280px;
  box-sizing: border-box;
  border-radius: 0 0 15px 15px;
  font-weight: bold;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-text {
  font-family: "Segoe Print", "Comic Sans MS", cursive, Arial, sans-serif;
  font-size: 1.3em;
  color: #fff;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.7);
  text-align: center;
  position: absolute;
  z-index: 20;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 10px 20px;
  max-width: 90%;
}

.slide-text.active,
.slide-title.active,
.slide-caption.active {
  opacity: 1;
}

.slide-title {
  font-family: "Segoe Print", Arial, sans-serif;
  font-size: 1.4em;
  color: white;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.9);
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: rgba(0,0,0,0.7);
  padding: 8px 20px;
  border-radius: 8px;
  max-width: 80%;
}

.slide-caption {
  font-family: "Segoe Print", Arial, sans-serif;
  font-size: 1.1em;
  color: white;
  text-shadow: 3px 3px 8px rgba(0,0,0,0.9);
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: rgba(0,0,0,0.7);
  padding: 6px 18px;
  border-radius: 6px;
  max-width: 70%;
}

.progress-container {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 600px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #81C784);
  border-radius: 8px;
  transition: width 0.8s ease;
  box-shadow: 0 0 10px rgba(76,175,80,0.5);
}

.progress-text {
  font-family: "Segoe Print", Arial, sans-serif;
  color: white;
  text-align: center;
  margin-top: 6px;
  font-size: 0.9em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.step-counter {
  font-family: "Segoe Print", Arial, sans-serif;
  font-size: 0.95em;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  position: absolute;
  top: 110px; right: 60px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: rgba(0,0,0,0.7);
  padding: 6px 15px;
  border-radius: 6px;
}

.nav-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  z-index: 30;
}

.nav-button {
  background-color: white;
  color: #4169e1;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  font-weight: bold;
}

.nav-button:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.touch-indicators {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 8px;
  z-index: 30;
}

.indicator-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.3s ease;
}

.indicator-dot.active {
  background: white;
}


/* ============================================
   15. RESPONSIVE BREAKPOINTS
   All breakpoints consolidated here
   ============================================ */

@media (max-width: 1024px) {
  body                 { padding: 15px; }
  .welcome-title       { font-size: 4em; letter-spacing: 0.08em; }
  .welcome-subtitle    { font-size: 1.6em; letter-spacing: 0.15em; margin-top: 25px; }
  .welcome-disciplines { gap: 35px; margin-top: 50px; }
  .discipline-icon     { font-size: 2.5em; }
  .skip-intro          { top: 20px; right: 20px; padding: 10px 25px; font-size: 1em; }
}

@media (max-width: 768px) {
  body                        { padding: 15px; }
  h1                          { font-size: 1.5em; }
  h2                          { font-size: 1.2em; }
  .card                       { width: 100%; max-width: 300px; }
  .card-image                 { height: 120px; }
  .info-button                { width: 100%; margin-bottom: 10px; padding: 12px; }
  .share-buttons              { flex-direction: column; align-items: stretch; }
  .share-btn                  { width: 100%; max-width: 300px; margin: 0 auto; }
  .welcome-title              { font-size: 2.5em; letter-spacing: 0.05em; text-align: center; padding: 0 20px; }
  .welcome-subtitle           { font-size: 1em; letter-spacing: 0.1em; margin-top: 20px; text-align: center; padding: 0 20px; }
  .welcome-disciplines        { gap: 25px; margin-top: 40px; }
  .discipline-icon            { font-size: 2em; }
  .skip-intro                 { top: 15px; right: 15px; padding: 8px 20px; font-size: 0.9em; }
  .watercolors-detail         { padding: 15px; }
  .watercolors                { padding: 15px; }
  .watercolors h1,
  .watercolors-detail h1      { font-size: 1.2em; }
  .content-layout table       { font-size: 0.85em; }
  .content-layout td          { padding: 6px; }
  .button-area-light          { padding: 10px; }
  .slideshow-container        { width: 95%; padding: 40px 20px; min-height: 400px; }
  .logo                       { font-size: 2em; }
  .tagline                    { font-size: 1em; }
  .project-name               { font-size: 1.5em; }
  .slide-image                { max-width: 90%; max-height: 65%; }
  .corner-wrapper             { display: none; }
  .slide-text                 { font-size: 1em; padding: 8px 15px; bottom: 90px !important; }
  .slide-title                { font-size: 1.1em; top: 30px; padding: 6px 15px; max-width: 90%; }
  .slide-caption              { font-size: 0.95em; bottom: 100px; padding: 5px 12px; max-width: 85%; }
  .step-counter               { font-size: 0.85em; top: 80px; right: 20px; padding: 5px 12px; }
  .progress-container         { width: 85%; bottom: 50px; }
  .progress-bar               { height: 8px; }
  .progress-text              { font-size: 0.85em; }
  .nav-button                 { padding: 10px 20px; font-size: 14px; }
  .photos-content img,
  .photos-content table,
  .photos-content .button-area-light { max-width: 100%; }

  video, iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .video-container { padding-bottom: 56.25%; }
}

@media (max-width: 480px) {
  body                        { padding: 10px; }
  h1                          { font-size: 1.2em; }
  h2                          { font-size: 1em; }
  .card                       { width: 100%; }
  .welcome-title              { font-size: 2em; letter-spacing: 0.03em; }
  .welcome-subtitle           { font-size: 0.8em; letter-spacing: 0.08em; margin-top: 15px; }
  .welcome-disciplines        { gap: 20px; margin-top: 30px; }
  .discipline-icon            { font-size: 1.8em; }
  .skip-intro                 { top: 10px; right: 10px; padding: 6px 15px; font-size: 0.85em; }
  .watercolors-detail         { padding: 10px; }
  .watercolors                { padding: 10px; }
  .watercolors h1,
  .watercolors-detail h1      { font-size: 1em; }
  .content-layout table       { font-size: 0.75em; }
  .content-layout td          { padding: 4px; }
  .button-area-light          { padding: 8px; }
  .cart-wrapper               { padding: 10px 5px; max-width: 100%; }
  .delete-button              { width: 100%; padding: 8px; font-size: 14px; }
  .button-area-cart           { padding: 10px 5px; }

  .button-area-cart .info-button {
    display: block;
    width: 90%;
    margin: 5px auto;
    padding: 10px;
  }

  video, iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .cart-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }

  .cart-table thead           { display: none; }
  .cart-table tbody           { display: block; }

  .cart-table tr {
    display: block;
    margin-bottom: 15px;
    border: 2px solid #999;
    background: white;
    border-radius: 5px;
  }

  .cart-table td {
    display: block;
    text-align: right;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
  }

  .cart-table td:last-child    { border-bottom: none; }

  .cart-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
    text-align: left;
  }

  .cart-table .total-row       { background: #f0f0f0; }
  .cart-table .total-row .total-row td { font-size: 14px; font-weight: bold; }
}